前端面试题第四套

关注

原创最新推荐文章于 2026-08-15 14:16:33 发布 1.7k 阅读 AI 写同款· GEO 优化 ›

用友web前端试题(四)解析：深入JavaScript核心与工程化 JavaScript作为前端开发的核心语言，原型链、闭包、事件循环等底层机制是构建复杂应用的基础。理解这些原理，能帮助开发者掌握函数对象、异步执行和内存管理的本质，从而在性能优化和组件抽象中做出合理决策。随着前端技术从jQuery切换到MVVM框架，浏览器存储、事件委托等工程实践也日益重要。本文以用友web前端面试题（四）为例，逐题拆解这些高频考点，从手写new实现到浏览器事件循环，再到flex布局与框架选型，还原企业级前端面试的考察逻辑。对于准备中大型公司前端岗位的开发者，这类基于真实项目场景的试题比单纯阅读详情

1) NOSCRIPT标签是做什么用的？ C

a.  制止脚本的运行
b.  防止区域脚本被js修改<br>(例如aDiv.innerHTML = 'something' 将会不起作用)
c.  用来定义在脚本未被执行时的替代内容
d.  NOSCRIPT 标签并不存在
解析:NOSCRIPT标签用来定义在脚本未被执行时的替代内容。也可以用在检测浏览器是否支持脚本，若不支持脚本则可以显示NOSCRIPT标签里的innerText

2) 下列事件哪个不是由鼠标触发的事件 D

a.  click
b.  contextmenu
c.  mouseout
d.  keydown

3) 下面有关html的描述，不推荐的是？B

a.  在页面顶部添加 doctype声明；
b.  在 </head> … <body> 中间插入 HTML 代码；
c.  避免使用 <font> 标签；
d.  使用 <table> 元素展现学生成绩表等数据。

4) 下面哪个属性不会让 div 脱离文档流（normal flow）？C

a.  position: absolute;
b.  position: fixed;
c.  position: relative;
d.  float: left;

5) 以下关于盒子模型描述正确的是 A

a.  标准盒子模型中：盒子的总宽度 ＝ 左右margin + 左右border + 左右padding + width
b.  IE盒子模型中：盒子总宽度 ＝ 左右margin + 左右border + width
c.  标准盒子模型中：盒子的总宽度 ＝ 左右margin + 左右border + width
d.  IE盒子模型中：盒子总宽度 ＝ width

6) jquery ajax中都支持哪些返回类型？ ABCD

a.  xml
b.  html
c.  jsonp
d.  Json
解析:$.ajax()函数依赖服务器提供的信息来处理返回的数据。如果服务器报告说返回的数据是XML，那么返回的结果就可以用普通的XML方法或者jQuery的选择器来遍历。如果见得到其他类型，比如HTML，则数据就以文本形式来对待。
通过dataType选项还可以指定其他不同数据处理方式。除了单纯的XML，还可以指定 html、json、jsonp、script或者text。

7) 常见的浏览器端的存储技术有哪些？ABD

a.  cookie
b.  localStorage
c.  session
d.  userData

8) 下面属于CSS3新增属性的有？ABCD

a.  box-shadow
b.  text-shadow
c.  border-radius
d.  rgba

9) XMLHttpRequest对象有几个返回状态值？C

a. 3
b. 4
c. 5
d. 6
解析:1. XMLHttpRequest返回值
0  初始化状态。XMLHttpRequest 对象已创建或已被 abort() 方法重置
1  open()方法已调用，但是 send() 方法未调用。请求还没有被发送
2  send()方法已调用，HTTP 请求已发送到 Web 服务器。未接收到响应
3  所有响应头部都已经接收到。响应体开始接收但未完成
4  HTTP 响应已经完全接收

10) 创建一个对象obj，该对象包含一个名为”name”的属性，其值为”value” 。以下哪一段JavaScript代码无法得到上述的结果？B

a.var obj = new Object();obj["name"] = "value";
b.var obj = new Object();obj.prototype.name = "value";
c.var obj = {name : "value"};
d.var obj = new function() { this.name = "value";}

11) 以下js代码会输出什么？

console.log(1 +  "2" + "2");        //122
console.log(1 +  +"2" + "2");       //32
console.log(1 +  -"1" + "2");       //02
console.log(+"1" +  "1" + "2");     //112
console.log( "A" - "B" + "2");      //NaN2
console.log( "A" - "B" + 2);        //NaN

12) 以下js代码会输出什么？

console.log("0 || 1 = "+(0 || 1));   //0 || 1 = 1
console.log("1 || 2 = "+(1 || 2));   //1 || 2 = 1
console.log("0 && 1 = "+(0 && 1));   //0 && 1 = 0
console.log("1 && 2 = "+(1 && 2));   //1 && 2 = 2

13) 以下js代码会输出什么？

console.log(false == '0')  //true
console.log(false === '0')  //false

14) 以下js代码会输出什么？

var a={},
b={key:'b'},
c={key:'c'};

a[b]=123;
a[c]=456;

console.log(a[b]); //456

15) 以下js代码会输出什么？

    (function(y) {
    return (function(y) {
        console.log(y);
    })(2)
})(1);

//闭包

16) Ajax跨域问题解决方案?

使用中间层过渡的方式：
　 中间过渡，很明显，就是在AJAX与不同域的服务器进行通讯的中间加一层过渡，这一层过渡可以是PHP、JSP、c++等任何具备网络通讯功能的语言，由中间层向不同域的服务器进行读取数据的操作。拿PHP做一个例子，如果需要对不同域的某一个php进行通讯，现在客户端的xmlhttprequest先query本域的一个PHP，然后由本域的这个PHP去和不同域的PHP进行通讯，然后由本域的PHP输出response；
2、使用＜script＞标签
　　这个方法是利用＜script＞标签中的src来query一个PHP获得response，因为＜script＞标签的src属性不存在跨域的问题。
　eg:＜script LANGUAGE=”Javascript” src=”" id=”get”＞
＜/script＞
＜script LANGUAGE=”Javascript”＞
＜!–
function get(url)
{
    var obj = document.getElementById(“get”);
    obj.src = url;
(obj.readStatus == 200)
    {
    alert(param);
    }
}
function query()
{
    get(get.php);
}
//–＞
＜/script＞

17) html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？

    * HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。

* 拖拽释放(Drag and drop) API 
  语义化更好的内容标签（header,nav,footer,aside,article,section）
  音频、视频API(audio,video)
  画布(Canvas) API
  地理(Geolocation) API
  本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；
  sessionStorage 的数据在浏览器关闭后自动删除

  表单控件，calendar、date、time、email、url、search  
  新的技术webworker, websocket, Geolocation

* 移除的元素

纯表现的元素：basefont，big，center，font, s，strike，tt，u；

对可用性产生负面影响的元素：frame，frameset，noframes；

支持HTML5新标签：

* IE8/IE7/IE6支持通过document.createElement方法产生的标签，
  可以利用这一特性让这些浏览器支持HTML5新标签，

  浏览器支持新标签后，还需要添加标签默认的样式：

* 当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架
   <!--[if lt IE 9]>        <script>src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script> 
   <![endif]--> 
如何区分： DOCTYPE声明\新增的结构元素\功能元素

18) 浮动元素引起的问题和解决办法？

浮动元素引起的问题：
（1）父元素的高度无法被撑开，影响与父元素同级的元素
（2）与浮动元素同级的非浮动元素会跟随其后
（3）若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构
解决方法：
    使用CSS中的clear:both;属性来清除元素的浮动可解决2、3问题，对于问题1，添加如下样式，给父元素添加clearfix样式：
.clearfix:after{content: ".";display: block;height: 0;clear: both;visibility: hidden;}.clearfix{display: inline-block;} /* for IE/Mac */
清除浮动的几种方法：
1，额外标签法，<div style="clear:both;"></div>（缺点：不过这个办法会增加额外的标签使HTML结构看起来不够简洁。）2，使用after伪类
#parent:after{
content:".";
height:0;
visibility:hidden;
display:block;
clear:both;
}
3,浮动外部元素4,设置`overflow`为`hidden`或者auto

19) 写一个求和的函数sum，达到下面的效果

// Should equal 15
sum(1, 2, 3, 4, 5);
// Should equal 0
sum(5, null, -5);
// Should equal 10
sum('1.0', false, 1, true, 1, 'A', 1, 'B', 1, 'C', 1, 'D', 1,
  'E', 1, 'F', 1, 'G', 1);
// Should equal 0.3, not 0.30000000000000004
sum(0.1, 0.2);

答案:

function sum() {
var nResult = 0;
for (var i = 0, l = arguments.length; i < l; i++) {
    nResult += window.parseFloat(arguments[i]) || 0;
    }
return nResult.toFixed(3) * 1000 / 1000;
}

20) 请写一个表格以及对应的CSS，使表格奇数行为白色背景，偶数行为灰色背景，鼠标移上去时为黄色背景

<table class="table">
  <tr><td>第一行</td></tr>
  <tr><td>第二行</td></tr>
  <tr><td>第三行</td></tr>
  <tr><td>第四行</td></tr>
</table>

<style>
  .table tr:nth-child(2n-1){
  background-color:white;
  }
  .table tr:nth-child(2n){
  background-color:grey;
  }
  .table tr:hover{
  background-color:yellow;
  }
</style>

21）第一部分：用CSS实现布局
让我们一起来做一个页面
首先，我们需要一个布局。
请使用CSS控制3个div，实现如下图的布局。

第二部分：用javascript优化布局
由于我们的用户群喜欢放大看页面
于是我们给上一题的布局做一次优化。
当鼠标略过某个区块的时候，该区块会放大25%，
并且其他的区块仍然固定不动。

提示：
也许，我们其他的布局也会用到这个放大的效果哦。可以使用任何开源代码，包括曾经你自己写的。
关键字：javascript、封装、复用
第三部分：处理紧急情况
好了，我们的页面完成了。
于是我们将页面发布上网。
突然，晴天霹雳，页面无法访问了，这时候，你会怎么做？
解析:

    第一题：主要考虑几个问题：1. IE6 的 3 像素 BUG；2. 清楚浮动；
CSS代码：
    div{background:#CCCCCC;}  
#first{float:left;width:100px; height:150px}  
#second{clear:left;float:left;margin-top:10px;width:100px;height:150px}  
#third{zoom:1; width:200px;margin-left:110px;_margin-left:107px; height:310px}  
XML/HTML代码
<div id="first"></div>     
<div id="second"></div>     
<div id="third"></div> 
 第二题：用javascript优化布局
提示：
也许，我们其他的布局也会用到这个放大的效果哦。
可以使用任何开源代码，包括曾经你自己写的。
关键字：javascript、封装、复用
惭愧啊，用上边那个布局我怎么也没把它优化出来，硬这头皮用绝对定位改了布局；
所以样式改成了这样：
body{ margin:0; padding:0}  
div{background:#CCCCCC; position:absolute}  
#first{width:100px; height:150px}  
#second{top:160px;width:100px;height:150px}  
#third{ width:200px; height:310px; left:110px} 
javascript 要考虑封装、复用
function zoom(id,x,y){ // 设置缩放函数参数：容器id、横向缩放倍数、纵向缩放倍数（等比例缩放时也可以设定一个参数）  
var obj=document.getElementById(id); // 获取元素对象值  
var dW=obj.clientWidth; // 获取元素宽度  
var dH=obj.clientHeight; // 获取元素高度  
//var oTop=obj.offsetTop;  
//var oLeft=obj.offsetLeft;  
    obj.onmouseover=function(){ // 鼠标移入  
this.style.width=dW*x+"px"; // 横向缩放  
this.style.height=dH*y+"px"; // 纵向缩放  
this.style.backgroundColor="#f00″; // 设置调试背景  
this.style.zIndex=1; // 设置z轴优先  
}  
    obj.onmouseout=function(){ // 鼠标移出，设回默认值  
this.style.width="";  
this.style.height="";  
this.style.padding="";  
this.style.backgroundColor="";  
this.style.zIndex="";  
}  
}  
zoom("first",1.25,1.25);  
zoom("second",1.25,1.25);  
zoom("third",1.25,1.25); 
    第三题也许是JS代码没有放在页面的后面，加载速度慢尚未显示出来。或者是页面地址出错了。
这种情况下，先查看页面的源代码，看看有没有什么问题，然后找后台技术人员，看是不是服务器或技术方面的问题。

22）“你有什么业余爱好?”

收录于