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. Interview with BOA

    1. BFS 2. QuickSort 3. PCA, 1000 articles, so many factors, how to reduce factors. 4. newton's metho ...

  2. Java遇见HTML——JSP篇之商品浏览记录的实现

    一.项目总体介绍 使用Cookie实现商品浏览记录. 要实现这个程序采取的是Model1(Jsp+JavaBean)架构实现,具体步骤: 首先要有个数据库,商品表,操作数据库的一个类DBHelper类 ...

  3. 第五篇 SQL Server代理理解代理错误日志

    本篇文章是SQL Server代理系列的第五篇,详细内容请参考原文. 正如这一系列的前几篇所述,SQL Server代理作业是由一系列的作业步骤组成,每个步骤由一个独立的类型去执行.在第四篇中我们看到 ...

  4. [RGEOS]支持栅格数据读取和显示

    SharpMap真的很强大,这里通过改造GdalRasterLayer类实现了在RGeos项目中支持栅格图像的读取和显示,同时支持影像的无级缩放. GdalRasterLayer通过读取FWTools ...

  5. [MVCSharp]开始使用MVC#

    Getting started with MVC# framework The source code of this example can be found under "Example ...

  6. ON_NOTIFY_REFLECT : Message Reflection for Windows Controls

    转自: https://msdn.microsoft.com/en-us/library/eeah46xd.aspx TN062: Message Reflection for Windows Con ...

  7. mysql及redis环境部署时遇到的问题解决

    redis开启远程访问redis默认只允许本地访问,要使redis可以远程访问可以修改redis.conf打开redis.conf文件在NETWORK部分有说明 解决办法:注释掉bind 127.0. ...

  8. git客户端

    https://git-for-windows.github.io/ http://blog.csdn.net/shulianghan/article/details/18812279 自己的gith ...

  9. 《数据结构与算法分析:C语言描述_原书第二版》CH2算法分析_课后习题_部分解答

    对于一个初学者来说,作者的Solutions Manual把太多的细节留给了读者,这里尽自己的努力给出部分习题的详解: 不当之处,欢迎指正. 1.  按增长率排列下列函数:N,√2,N1.5,N2,N ...

  10. PostgreSQL Replication之第十章 配置Slony（1）

    在PostgreSQL领域中,Slony是最广泛的复制解决方案之一.它不仅是最老的复制方案实现的一个,但也是有最多的外部工具支持的一个,例如PgAdmin3等. 在本章中,我们将深入探究Slony并学 ...