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

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.为什么不继续做后端开发转做前端（对简历里有后端开发经验的人）？

==================================答案和相关内容有空再慢慢补充，先发一个测试的内容：

 

==================================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);答：111number原因："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中，可以加快渲染，脚本放在关闭标签

之前可以加快下载速度----------------------------------一、页面级优化，减少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。

 

-------------------------

 

文章链接