Web前端开发工程师面试题
Web前端开发工程师面试题
1.说说css的优先级？
2.在移动端中，常常使用tap作为点击事件，好处是？会带来什么问题？
3.原生JS的window,onload与Jquery的$(document).ready(function(){})有什么不同
4.看下面的代码输出什么，foo的值为什么？
var foo = "11"+2-"1";
console.log(foo);
console.log(typeof foo);
5.如何优化一个网站，可从dom，css，js等几个方面来谈谈？
6.希望获取到页面中所有的checkbox怎么做？(不能使用第三方框架)
7.实现一个函数clone，可以对Javascript中的5种主要的数据类型(Number、String、Object、Array、Boolean)进行复制
8.说说call，apply，bind的作用和区别？
9.看下面的代码输出什么，为什么？
function A(x,y){return x+y;}
function M(x,y){return x-y;}
console.log(A.call(M,3,1));
10.看下面的代码输出什么，为什么？
var a = function(){return 1;};
function a(){return 2;}
console.log(a());
---------------------------------
当面问的问题：
1.说说对ES6的了解？
2.nodejs有没有实际用过？
3.有没有做过vuejs，angularjs，react，h5开发？
4.版本管理svn，git有没有用过，如果代码给其他人覆盖了要怎么处理？
5.有没有自己写过业务组件，基于jquery插件和原生的组件，如弹窗、点击事件、grid表格、上传附件？
6.在工作中有没有遇到技术与业务需求冲突的难题，如何解决的？
7.jquery里面不用callback方法如何获得ajax返回数据？
8.为什么不继续做后端开发转做前端（对简历里有后端开发经验的人）？
==================================
答案和相关内容有空再慢慢补充，先发一个测试的内容：
<html> <head> </head> <body> <script> var a = function(){return 1;}; function a(){return 2;} console.log(a());// 1 function A(x,y){return x+y;} function M(x,y){return x-y;} console.log(A.call(M,3,1));//4 var foo = "11"+2-"1"; console.log(foo);//111 console.log(typeof foo);//number var foo = "11"+2+"1"; console.log(foo);//1121 console.log(typeof foo);//string for(var i=1;i<=3;i++){ //立即执行函数，输出1 2 3 setTimeout((function(a){ console.log(a); })(i),0); }; </script> </body> </html>
==================================
1.说说css的优先级？
CSS三种位置写法的优先级是：行内样式＞内页样式＞外部样式
从CSS代码存放位置看权重优先级：内嵌样式 > 内部样式表 > 外联样式表。
从样式选择器看权重优先级：important > 内嵌样式 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符。
2.在移动端中，常常使用tap作为点击事件，好处是？会带来什么问题？
在手机WEB端，click会有 200~300 ms，所以用tap代替click作为点击事件。
singleTap和doubleTap 分别代表单次点击和双次点击。
有可能出现点透的情况，即点击会触发非当前层的点击事件。
使用fastclick库直接一句：FastClick.attach(document.body);所有的click响应速度直接提升，click响应速度比tap还要快一点。
3.原生JS的window,onload与Jquery的$(document).ready(function(){})有什么不同?
Jquery的$(document).ready(function(){})在dom文档树加载完之后执行一个函数（这里面的文档树加载完不代表全部文件加载完）
window.onload是在dom文档树加载完和所有文件加载完之后执行一个函数。
即$(document).ready要比window.onload先执行。
4.看下面的代码输出什么，为什么？
var foo = "11"+2-"1";
console.log(foo);
console.log(typeof foo);
答：111
number
原因："11"+2结果是112，type是string，但是-“1”，使得foo转化成数字类型进行运算。
一个是number一个是string时，会尝试将string转换为number
（ps：var foo = "11"+2+"1";时输出的是1121、string，直接字符串拼接）
5.如何优化一个网站，可从dom，css，js等几个方面来谈谈？
1.尽可能通过ID或者类来查找元素，使用ID查找元素是最快的，其次的是根据类和类型查找元素，通过属性查找元素是最慢的。
2.改变DOM就会引起浏览器渲染，而渲染是相当慢的，因此应该避免不必要的渲染，例如把for循环里面innerHTML操作变成字符串在for循环后一次性赋值。
3.改变DOM元素的样式，类也会导致浏览器渲染，因此也应该减少不必要的操作，例如用style.cssText一次性设置多个样式。
4.批量修改DOM时从文档流中摘除该元素 ，对其应用多重改变 ，将元素带回文档中
5.减少iframe，iframe需要消耗大量的时间，并阻塞下载，建议少用，动态给iframe添加URL可以改善性能
6.样式放在header中，可以加快渲染，脚本放在关闭标签</body>之前可以加快下载速度
----------------------------------
一、页面级优化，减少HTTP请求数
1). 从设计实现层面简化页面保持页面简洁、减少资源的使用时最直接的。
2). 合理设置HTTP缓存
3). 资源合并与压缩，将外部的脚本、样式进行合并，多个合为一个。
4). CSS Sprites，合并CSS图片，减少请求数
5). 将外部脚本置底（将脚本内容在页面信息内容加载后再加载），异步执行 inline脚本
6). Lazy Load Javascript（只有在需要加载的时候加载，在一般情况下并不加载信息内容。）
7). 将 CSS放在 HEAD中，避免使用CSS表达式
8). 避免重复的资源请求
二、代码级优化
1. Javascript
需要遍历 HTML Collection的时候，尽量将它转为数组后再访问，以提高性能。即使不转换为数组，也请尽可能少的访问它，例如在遍历的时候可以将 length属性、成员保存到局部变量后再使用局部变量。
除非你能肯定在 with代码中只访问 obj中的属性，否则慎用 with，替代的可以使用局部变量缓存需要访问的属性。
避免使用 eval和 Function构造函数
减少作用域链查找、减少闭包的使用
对直接量和局部变量的访问是最快的，对对象属性以及数组的访问需要更大的开销。
----------------------------------
6.希望获取到页面中所有的checkbox怎么做？(不能使用第三方框架)
var domList = document.getElementsByTagName('input');
var checkBoxList = [];
var len = domList.length;
//使用while的效率会比for循环更高
while(len --){
if (domList[len].type == 'checkbox') {
checkBoxList.push(domList[len]);
}
}
7.实现一个函数clone，可以对Javascript中的5种主要的数据类型(Number、String、Object、Array、Boolean)进行复制
// 方法一： Object.prototype.clone = function(){ var o = this.constructor === Array ? [] : {}; for(var e in this){ o[e] = typeof this[e] === "object" ? this[e].clone() : this[e]; } return o; } //方法二： function clone(Obj){ var buf; if(Obj instanceof Array){ buf = []; var i = Obj.length; while (i--) { buf[i] = clone(Obj[i]); } return buf; }else if(Obj instanceof Object){ buf = {}; for (var k in Obj){ buf[k] = clone(Obj[k]); } return buf; }else{ return Obj; } } 方法三： 利用ES5内置的函数 var s = JSON.stringify( obj ); var o = JSON.parse( s );
附深度复制 deep clone方法：
1.ES5新增的JSON对象提供的两个方法也可以实现深度复制，分别是JSON.stringify()和JSON.parse();前者用来将对象转成字符串，后者则把字符串转换成对象。
function extendDeep(parent, child) { var i, proxy; proxy = JSON.stringify(parent); //把parent对象转换成字符串 proxy = JSON.parse(proxy) //把字符串转换成对象，这是parent的一个副本 child = child || {}; for(i in proxy) { if(proxy.hasOwnProperty(i)) { child[i] = proxy[i]; } } //因为proxy是中间对象，可以将它回收掉 proxy = null; return child; }
2.节点克隆：
var p = document.getElementsByTagName("p")[0];
var cP = p.cloneNode();//克隆p节点
var dcP = p.cloneNode(true);//克隆p节点，深度克隆，克隆节点以及节点下面的子内容。
8.说说call，apply，bind的作用和区别？
三者都是用来改变函数的this对象的指向的；
三者第一个参数都是this要指向的对象，也就是想指定的上下文；
三者都可以利用后续参数传参；
bind 是返回对应函数，便于稍后调用；apply 、call 则是立即调用 。
对于 apply、call 二者而言，作用完全一样，只是接受参数的方式不一样。call需要把参数按顺序传递进去，而apply则是把参数放在数组里。
bind()的实现，相当于使用函数在内部包了一个call/apply ，第二次 bind() 相当于再包住第一次 bind() ,故第二次以后的 bind 是无效的。
另：arguments参数是个伪数组，通过var args = Array.prototype.slice.call(arguments);转化为标准数组。
getElementsByTagName、document.childNodes等返回的NodeList对象属于伪数组。不能应用 Array下的 push、pop等方法。通过 Array.prototype.slice.call 可转换为真正的数组。
-----------------------------
9.看下面的代码输出什么，为什么？
function A(x,y){return x+y;}
function M(x,y){return x-y;}
console.log(A.call(M,3,1));
答：输出4
原因：call第一个参数传的是this对象，在A方法里面没有用到，后面的参数按顺序传入的。
10.看下面的代码输出什么，为什么？
console.log(a());
var a = function(){return 1;};
function a(){return 2;}
console.log(a());
答：输出2、1
原因：
JavaScript程序执行按照从上到下的顺序执行，一旦用到变量，则变量名存入到堆内存，变量值存入到栈内存，此时内存回收程序员是无法控制的，只能等待浏览器回收。
一旦执行函数，函数进入到栈内存中，函数的变量被加载到栈内存中，函数执行后，马上释放栈内存。
JavaScript函数和变量声明的“提前”（hoist）行为。
function a(){return 2;} 为函数声明，加载的时候就“提前”了，程序运行前就预处理就完成了，可以写在调用之后，因此第一个输出是2；
var a = function(){return 1;} 为函数表达式，属于按顺序执行，声明一个变量a，把一个匿名函数赋值给变量a，必须写在调用a之前，在调用的时候初始化function 里面的代码块，因此后面输出的是1。
-------------------------
golang技术交流群：316397059，vuejs技术交流群：458915921 囤币一族：621258209，有兴趣的可以加入
微信公众号： 心禅道（xinchandao）投资论道
