web前端开发工程师面试题积累（02）
这都是自己之前在面试过程中，做的笔试题目，千里之行，始于足下。基础最重要，把每次遇到的问题，不管是不会的还是会的，都再学习一遍，温故而知新吧。加油鸭~~~！！！整理不易，记得点赞，亲
选择题
1.关于html和模型，下列说法正确的是？C
A.margin是内边距
B.padding是外边距
C.border是边框
D.border-radius是css3标准，因此IE并不支持border-radius属性
2.在HTML页面上包含如下所示的层对象，则javascript语句
document.getElementById(“info”).innerHTML的值是(B)
<div id="info" style="display :block"><p>请填写</p></div>
A. 请填写
B. 请填写< /p>
C.id="info" sstyle="display:block"
D.
请填写
3.表示有序列表的是 D
A.ul
B.dl
C.li
D.ol
4.如何在CSS中插入注释？C
A.//this is a comment
B.//this is a comment //
C./* this is a comment*/
D.’ this is a comment’
5.浏览器将打开一个新的窗口，应在a标签中使用 C
A.“target=_self”
B.“target=_top”
C.“target=_blank”
D.“target=_parent”
6.在不改变元素的显示属性的情况下，元素都是可以设置宽度的，并且能够设置成功，这句话是否正确？B
A.正确
B.错误
7.对于li这个节点，下列哪个css选择器的优先级最高？D
A. li #app
B. li .cnt
C. li .cnt :hover
D. #app.cnt
8.一下说法，错误的是 A
A.用于显示变粗的文字
B.
C.的文字会带下划线
D.用于强调文本
9.下列说法正确的是 B
A.display:none ；为被隐藏的对象保留其物理空间；
B.visibility:hidden; 所占据的空间位置仍然存在，仅为视觉上的完全透明；
C.visibility:hidden; 产生reflow和repaint(回流与重绘)；
D.visibility:hidden; 与display:none；两者没有本质上的区别；
解析：display: none和visibility:hidden的区别就是visibility:hidden会保留元素的空间
repaint(重绘)
，repaint发生更改时，元素的外观被改变，且在没有改变布局的情况下发生，如改变outline,visibility,background
color，不会影响到dom结构渲染。
reflow(渲染)，与repaint区别就是他会影响到dom的结构渲染，同时他会触发repaint，他会改变他本身与所有父辈元素(祖先)，这种开销是非常昂贵的，导致性能下降是必然的，页面元素越多效果越明显。
所以display:none才会产生reflow visibility:hidden只会出发repaint
10.以下描述错误的是 A
A.cookie以及localStorage都会伴随着http请求发送到服务器
B.get提交的url会有长度的限制，而post提交的数据则可以比较大
C.在javascript中可以操作cookie
D.javascript在浏览器的执行是单线程的
11.只能输入零和非零开头的数字，正确的正则表达式是 A
A.^(0|[1-9][0-9])$
B.^(0|[1-9][1-9])$
C.^(0|[1-9][0-9])$
D.^+[1-9][0-9]*$
12.要在10秒后调用checkState，下列哪个是正确的 B
A.window.setTimeout(checkState,10);
B.window.setTimeout(checkState,10000);
C.window.setTimeout(checkState(),10);
D.window.setTimeout(checkState(),10000);
13.在javascript中，用于阻止默认事件的默认操作的方法是 C
A.stopDeafault()
B.stopPropagation()
C.preventDefault()
D.preventDefaultEven()
E.preventPropagation()
14.以下代码，在浏览器中执行的结果是 C
var A = {
n:4399};
var B = function() {
this.n = 9999;};
var C = function(){
var n = 8888 };
B.prototype = A;
C.prototype = A;
var b = new B();
var c = new C();
A.n++;
console.log(b.n);
console.log(c.n);
A. 9999 8888
B. 10000 8888
C. 9999 4400
D. 4400 4400
15.以下代码，在浏览器中执行的结果是 B
(function(){
var x = foo();
var foo = function foo(){
return "foobar"
};
return x;
})();
A.foo()
B.类型错误
C.undefined
D.foobar
16.关于javascript，以下选项描述错误的是 C
A.在原型上扩展的可枚举方法，会被for in 循环出来
B.使用Object.defineProperty可向对象添加或者修改属性
C.通过hasOwnProperty可判断一个对象以及其原型链上是否具有指定名称的属性
D.原型链是JS实现继承的一种模型
E.for循环是按顺序的，for in 循环是不一定按顺序的
17.运行结果是 C
var obj = {
a:1,b:function(){
alert(this.a)}}
var fun = obj.b;
fun();
A.弹出a
B.弹出1
C.弹出undefined
D.什么也看不到
18.以下语句的执行结果是什么? B
console.log('one');
setTimeout(function(){
console.log('two')},0);
console.log('three');
A.‘one’,‘two’,‘three’
B.‘one’,‘three’,‘two’
C.‘one’,‘three’
D.‘two’,‘one’,‘three’
19.在jquery中想要实现通过远程http get 请求载入信息功能的下面的哪一下事件？C
A.$.ajax(url)
B.load(url)
C.$.get(url)
D.getScript(url)
20.下面有关浏览器中使用js跨域获取数据的描述，说法错误的是？A
A.域名、端口相同，协议不同，属于相同的域
B.js可以使用jsonp进行跨域
C.通过修改document.domain来跨子域
D.使用window.name来进行跨域
21.以下代码执行的结果是 ( A)
for(var i=0;i<5;++i){
setTimeout(function(){
console.log(i+ ' ');
},100)
}
A.5 5 5 5 5
B.0 0 0 0 0
C.0 1 2 3 4
D.1 2 3 4 5
22.以下Js程序的输出是什么 B
<SCRIPT LANGUAGE="JavaScript">
var a = "undefined";
var b = "false";
var c = "";
function assert(avar){
if(avar)
alert(true);
else
alert(false);
}
assert(a);
assert(b);
assert(c);
</SCRIPT>
A.true, true, true
B.true,true,false
C.false,false,true
D.false,false,false
23.js数组的方法中，哪些不能改变自身数组？D
A.pop
B.splice
C.sort
D.contat
24.若一棵二叉树具有10个度为2的结点，5个度为1的结点，则度为0的结点个数是 B
A.9
B.11
C.15
D.不确定
24.假设栈S和队列Q的初始状态为空，元素a、b、c、d、e、f依次通过S和Q，既每一个元素必须先进栈，之后再出栈进入队列。若这6个元素出队的顺序是b、d、c、f、e、a，则栈S的容量至少应该为 A
A.3
B.4
C.5
D.6
解析:设栈长度为s，起始为0因为栈后进先出，队列先进先出。又因为元素E1.。E6是顺序入栈，那么分析过程如下：按照出栈过知程分析，因为给定出栈顺序：E2,E4,E3,E6,E5,E1,E2要进栈，所以道E1必须进栈，进栈顺序：E1,E2，所以s为2下面E2出栈，打印出E2，剩余结果为E4,E3,E6,E5,E1,因为E2出栈了，所以当前栈容量为2，但是只是内用了1个，存放E1，下面继续E3进栈，容E4进栈，此时s为3，根据出栈结果，那么E4出栈，E3出栈，此时栈容量为3但是只有E1在栈中，剩余结果为E6,E5,E1,同理，E5进栈，E6进栈，此时栈被填满，容量为3，后E6出栈，E5出栈，E1出栈，栈空，容量为3.所以S的容量至少为3.
填空题
1.产生水平线的HTML标签为
2.为HTML5新增标签，其语义为 突出显示文本 。
3.为图片添加简要说明文字的属性是 title。
4.CSS中float：left 可以通过 overflow：hidden； 来清除。
5.在CSS中， z-index 属性可以用来设置元素的叠放顺序。
6.margin:10px 20px 30px 40px,其中margin-left对应的值为 。
7.ECMAScript中的基本数据类型包括 number 、 string 、 boolean 、 null 和 undefined 。
8.JavaScript当中的变量，分为 全局变量 、 局部变量 。
9.JavaScript中，50%7 = 1 。
10.Number（null）= 0 。
11.Window.location.hash返回 页面的标签值 。
12.typeof(null) = object 。
13.想在ECMAScript函数传递参数，但该函数没定义接收参数变量，函数内部可以通过 arguments 对象来访问参数。
14.如何清除window.setInterval()定时器? window.clearInterval() 。
15.HTTP状态消息中 200 表示请求已成功，请求所希望的响应头或数据体将随此响应返回。
16.
var a=5；var b = 3；
var c=a>b?"张三"："李四";
alert(c);
c的值为 张三 。
17.通过String对象的 charAt() 方法，可以得到字符串中指定位置处的字符。
18.关于浏览器对象，history对象的父对象是 location对象 。
19.jQuery中合并数组产生新数组的方法是 $.merge() 。
20.在javascript中，可以使用Data对象的 getDate 方法返回一个月中的每一天。
21.获取焦点的事件 onfocus 。失去焦点的事件 onblur 。
22.在HTML页面上，按下键盘上任意一个键时都会出发JavaScript的 onkeydown 事件。
23.JavaScript通过 location.href ="http://www.baidu.com"来实现页面的跳转。
24.请补全以下代码。
var color = ' Blue ';
var obj = {
color:' Red ',
getColor:function(){
alert(this.color);
}
}
var getColor = obj.getColor;
getColor();
obj.getColor();
控制台输出：
Blue
Red
简答题
1.编写一个数组去重的方法
var arr = [2,3,4,4,5,2,3,6],
arr2 = [];
for(var i = 0;i< arr.length;i++){
if(arr2.indexOf(arr[i]) < 0){
arr2.push(arr[i]);
}
}
console.log(arr2);
2.请描述以下cookies，sessionStorage和localStorage的区别？
数据生命周期：
cookie：生成时就会被指定一个maxAge，这就是cookie的生存周期，在这个周期内cookie有效，默认关闭浏览器失效
sessionStorage：页面会话期间可用 localStorage：除非数据被清除，否则一直存在
存放数据大小：cookie：4k左右（因为每次http请求都会携带cookie） sessionStorage：一般5M或者更大
localStorage：一般5M或者更大 与服务器通信：
cookie：由对服务器的请求来传递，每次都会携带在HTTP头中，如果使用cookie保存过多的数据会带来性能问题
sessionStorage、localStorage：数据不是由每个服务器请求传递的，而是只有在请求时使用数据，不参与和服务器的通信
易用性： cookie：cookie需要自己封装setCookie，getCookie
sessionStorage、localStorage：可以用源生接口，也可再次封装来对Object和Array有更好的支持
共同点： 都是保存在浏览器端，和服务器端的session机制不同
3.解释css sprites，如何使用？
CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background-
repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片的位置。
4.描述下Ajax的原理？
Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。
5.你有哪些性能优化的方法？
（1） 减少http请求次数：CSS Sprites,JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存，图片服务器。
（2） 前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数。
（3） 用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。
（4） 当需要设置的样式很多时设置className而不是直接操作style。
（5） 少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。
（6） 避免使用CSS Expression（css表达式)又称Dynamicproperties(动态属性)。
（7） 图片预加载，将样式表放在顶部，将脚本放在底部 加上时间戳。