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。

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

Web前端开发工程师面试题的更多相关文章

  1. Web前端开发工程师养成计划【转载】

    Web前端开发工程师养成计划(入门篇) 最原始的忠告:这个世界上有想法的人很多,但是有想法又能实现它的人太少! 首先要感谢伟大的Web2.0概念.产品概念.用户体验概念.jQuery插件,是它们在中国 ...

  2. Web前端开发工程师基本要求

    一位好的Web前端开发工程师在知识体系上既要有广度,又要有深度,所以很多大公司即使出高薪也很难招聘到理想的前端开发工程师.现在说的重点不在于讲解技术,而是更侧重于对技巧的讲解.技术非黑即白,只有对和错 ...

  3. Web前端开发工程师的就业前景

    Web前端开发工程师的就业前景 Web前端开发工程师是一个全新的职业,在IT行业真正受到重视的时间不超过5年.因此,大家越来越关心web前端工程师前景怎么样?web前端工程师就业如何?Web前端开发是 ...

  4. 从就业面分析web前端开发工程师就业前景（2011.6)

    案例一 公司名称:法国电信北京研发中心 工作地点:北京 联系方式:hao.luan@orange-ftgroup.com 栾先生 岗位名称:web 前端开发工程师 岗位要求: 1. 计算机或相关专业本 ...

  5. web前端开发工程师,你了解吗？

    web前端开发工程师可以说是一个全新的职业,在IT整个行业中真正受到重视的时间没有超过5年,也正因为这样,大家越来越想了解web前端工程师的前景究竟怎么样?web前端培训就业前景如何?web前端工程师 ...

  6. 上海洋码头(www.ymatou.com)急招技术人才(职位：互联网软件开发工程师，.NET网站架构师，Web前端开发工程师，高级测试工程师，产品经理）

    对公司招聘职位有兴趣的童鞋可以把简历发送到zhangzhiqiang@ymatou.com,我们HR会快速给你答复. 互联网软件开发工程师 岗位职责: 1.参与洋码头各个平台(www.ymatou.c ...

  7. web前端开发工程师

    web前端开发工程师 百科名片 Web前端开发工程师是一个很新的职业,在国内乃至国际上真正开始受到重视的时间不超过5年.Web前端开发是从网页制作演变而来的,名称上有很明显的时代特征.在互联网的演化进 ...

  8. web前端开发工程师工资多少

      做web前端开发工程师工资高不高?下面千锋小编为大家分析一下:作为目前互联网行业中的主流技术,Web前端一直是占有重要的地位.尤其是近年来HTML5技术的突飞猛进,使Web前端技术有了更好的发展. ...

  9. 25个Web前端开发工程师必看的国外大牛和酷站

    逛了一周国外大牛们的博客与酷站,真是满满的钦佩.震撼.羡慕.惊喜………… Web设计是一个不断变化的领域,因此掌握最新的发展趋势及技术动向对设计师来说非常重要.无论是学习新技术,还是寻找免费资源与工具 ...

随机推荐

  1. App Store idfa被拒检查办法

    最近应用因为这个问题被拒两次,理由如下: PLA 3.3.12We found your app uses the iOS Advertising Identifier but does not in ...

  2. python笔记 - day8

    python笔记 - day8 参考: http://www.cnblogs.com/wupeiqi/p/4766801.html http://www.cnblogs.com/wupeiqi/art ...

  3. UR fall detection dataset

    http://fenix.univ.rzeszow.pl/~mkepski/ds/uf.html

  4. Android PickerView滚动选择器的使用方法

    手机里设置闹钟需要选择时间,那个选择时间的控件就是滚动选择器,前几天用手机刷了MIUI,发现自带的那个时间选择器效果挺好看的,于是就自己仿写了一个,权当练手.先来看效果: 效果还行吧?实现思路就是自定 ...

  5. Linux 技巧：让进程在后台可靠运行的几种方法

    我们经常会碰到这样的问题,用 telnet/ssh 登录了远程的 Linux 服务器,运行了一些耗时较长的任务, 结果却由于网络的不稳定导致任务中途失败.如何让命令提交后不受本地关闭终端窗口/网络断开 ...

  6. Android 百度地图SDK 定位

    引用locSDK_6.1.3.jar,切记添加相应的so文件. 1.定位初始化,需要使用getApplicationContext() mLocClient = new LocationClient( ...

  7. linux时钟系统概述

    1. 了解下linux系统中一些时间概念,在kernel/time/timekeeping.c中定义了多个时间.RTC时间:在PC中,RTC时间又叫CMOS时间,通常由一个专门的计时硬件来实现,软件可 ...

  8. [转载]CAD文件版本

    http://blog.sina.com.cn/s/blog_4c9fa4dd0101il1v.html 在工作中会遇到打开一张图纸时出现“图形文件无效”的提示,大部都是因为用低版本软件打开了高版本的 ...

  9. IIS应用程序池添加ASP.NET v4.0

    可能在安装.NET Framewrok 4.0之前,IIS就已经装好了,结果在IIS的应用程序池中只有.NET 2.0的Classic .NET AppPool和DefaultAppPool.在使用v ...

  10. Using RestTemplate, how to send the request to a proxy first so I can use my junits with JMeter?

    org.springframework.http.client.SimpleClientHttpRequestFactory java.net.Proxy java.net.Proxy.Type ja ...