python web前端开发面试_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.为什么不继续做后端开发转做前端(对简历里有后端开发经验的人)？

==================================

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

vara= function(){return 1;};functiona(){return 2;}

console.log(a());//1

functionA(x,y){returnx+y;}functionM(x,y){returnx-y;}

console.log(A.call(M,3,1));//4

varfoo= "11"+2-"1";

console.log(foo);//111

console.log(typeoffoo);//number

varfoo= "11"+2+"1";

console.log(foo);//1121

console.log(typeoffoo);//string

for(vari=1;i<=3;i++){//立即执行函数，输出1 2 3

setTimeout((function(a){

console.log(a);

})(i),0);

};

==================================

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中，可以加快渲染，脚本放在关闭标签