前端面试题（经典）

来源：互联网发布：mac 映射网络驱动器编辑：程序博客网时间：2024/06/06 04:18

1、position的值， relative和absolute分别是相对于谁进行定位的？

absolute :生成绝对定位的元素，相对于最近一级的定位不是 static 的父元素来进行定位。
fixed （老IE不支持）生成绝对定位的元素，通常相对于浏览器窗口或 frame 进行定位。
relative 生成相对定位的元素，相对于其在普通流中的位置进行定位。
static 默认值。没有定位，元素出现在正常的流中
sticky 生成粘性定位的元素，容器的位置根据正常文档流计算得出

2、如何解决跨域问题？

JSONP

原理是：动态插入script标签，通过script标签引入一个js文件，这个js文件载入成功后会执行我们在url参数中指定的函数，并且会把我们需要的json数据作为参数传入。

由于同源策略的限制，XmlHttpRequest只允许请求当前源（域名、协议、端口）的资源，为了实现跨域请求，可以通过script标签实现跨域请求，然后在服务端输出JSON数据并执行回调函数，从而解决了跨域的数据请求。

优点是兼容性好，简单易用，支持浏览器与服务器双向通信。缺点是只支持GET请求。

JSONP：json+padding（内填充），顾名思义，就是把JSON填充到一个盒子里

<script>    function createJs(sUrl){        var oScript = document.createElement('script');        oScript.type = 'text/javascript';        oScript.src = sUrl;        document.getElementsByTagName('head')[0].appendChild(oScript);    }    createJs('jsonp.js');    box({       'name': 'test'    });    function box(json){        alert(json.name);    }<script>

通过修改document.domain来跨子域

将子域和主域的document.domain设为同一个主域.前提条件：这两个域名必须属于同一个基础域名!而且所用的协议，端口都要一致，否则无法利用document.domain进行跨域

主域相同的使用document.domain

使用window.name来进行跨域

window对象有个name属性，该属性有个特征：即在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个window.name的，每个页面对window.name都有读写的权限，window.name是持久存在一个窗口载入过的所有页面中的

使用HTML5中新引进的window.postMessage方法来跨域传送数据

还有flash、在服务器上设置代理页面等跨域方式。个人认为window.name的方法既不复杂，也能兼容到几乎所有浏览器，这真是极好的一种跨域方法。

3、XML和JSON的区别？

(1).数据体积方面。

JSON相对于XML来讲，数据的体积小，传递的速度更快些。

(2).数据交互方面。

JSON与JavaScript的交互更加方便，更容易解析处理，更好的数据交互。

(3).数据描述方面。

JSON对数据的描述性比XML较差。

(4).传输速度方面。

JSON的速度要远远快于XML。

4、说说你对作用域链的理解？

作用域链的作用是保证执行环境里有权访问的变量和函数是有序的，作用域链的变量只能向上访问，变量访问到window对象即被终止，作用域链向下访问变量是不被允许的。

5、创建ajax过程？

(1)创建XMLHttpRequest对象,也就是创建一个异步调用对象.

(2)创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.

(3)设置响应HTTP请求状态变化的函数.

(4)发送HTTP请求.

(5)获取异步调用返回的数据.

(6)使用JavaScript和DOM实现局部刷新.

<script type="text/javascript" >        var XHR = new XMLHttpRequest();        XHR.open( 'get', './a.php');        XHR.send(null);        XHR.onreadystatechange = function () {          if ( XHR.readyState === 4 ) {            if ( XHR.status === 200 ) {              alert(XHR.responseText);            }          }        }<script>

6、HTTP和HTTPS？

HTTP协议通常承载于TCP协议之上，在HTTP和TCP之间添加一个安全协议层（SSL或TSL），这个时候，就成了我们常说的HTTPS。

默认HTTP的端口号为80，HTTPS的端口号为443。

7、为什么HTTPS安全？

因为网络请求需要中间有很多的服务器路由器的转发。中间的节点都可能篡改信息，而如果使用HTTPS，密钥在你和终点站才有。https之所以比http安全，是因为他利用ssl/tls协议传输。它包含证书，卸载，流量转发，负载均衡，页面适配，浏览器适配，refer传递等。保障了传输过程的安全性

8、对前端模块化的认识？

AMD 是 RequireJS 在推广过程中对模块定义的规范化产出。
CMD 是 SeaJS 在推广过程中对模块定义的规范化产出。

AMD 是提前执行，CMD 是延迟执行。

AMD推荐的风格通过返回一个对象做为模块对象，CommonJS的风格通过对module.exports或exports的属性赋值来达到暴露模块对象的目的。

CMD模块方式

   define(function(require, exports, module) {      // 模块代码    });

9、谈谈性能优化问题？

代码层面：避免使用css表达式，避免使用高级选择器，通配选择器。
缓存利用：缓存Ajax，使用CDN，使用外部js和css文件以便缓存，添加Expires头，服务端配置Etag，减少DNS查找等
请求数量：合并样式和脚本，使用css图片精灵，初始首屏之外的图片资源按需加载，静态资源延迟加载。
请求带宽：压缩文件，开启GZIP，

开启GPU加速-webkit-transform:transition3d(0,0,0)或者-webkit-transform:translateZ(0);，其实是为了渲染3D样式，但我们设置值为0后，并没有真正使用3D效果，但浏览器却因此开启了GPU硬件加速模式。这种GPU硬件加速在当今PC机及移动设备上都已普及，在移动端的性能提升是相当显著地，所以建议大家在做动画时可以尝试一下开启GPU硬件加速。

10、栈和队列的区别?

栈的插入和删除操作都是在一端进行的，而队列的操作却是在两端进行的。

队列先进先出，栈先进后出。

栈只允许在表尾一端进行插入和删除，而队列只允许在表尾一端进行插入，在表头一端进行删除

11、栈和堆的区别？

栈区（stack）— 由编译器自动分配释放，存放函数的参数值，局部变量的值等。

堆区（heap） — 一般由程序员分配释放，若程序员不释放，程序结束时可能由OS回收。

堆（数据结构）：堆可以被看成是一棵树，如：堆排序；

栈（数据结构）：一种先进后出的数据结构。

12、说下快速排序的流程？

“快速排序”的思想很简单，整个排序过程只需要三步：

　　（1）在数据集之中，找一个基准点

　　（2）建立两个数组，分别存储左边和右边的数组

　　（3）利用递归进行下次比较

var arr = [1,4,7,8,5,2,6];        function quickSort(arr) {            if(arr.length <= 1) {                return arr;            }            var num = Math.floor(arr.length / 2);            var numValue = arr.splice(num, 1);            var left = [],                right = [];            for (var i = 0; i < arr.length; i++) {                if(arr[i] < numValue) {                    left.push(arr[i])                } else {                    right.push(arr[i])                }            }             return quickSort(left).concat(numValue,quickSort(right));//递归不断重复比较        }        console.log(quickSort(arr));

13、你觉得jQuery或zepto源码有哪些写的好的地方？

jquery源码封装在一个匿名函数的自执行环境中，有助于防止变量的全局污染，然后通过传入window对象参数，可以使window对象作为局部变量使用，好处是当jquery中访问window对象的时候，就不用将作用域链退回到顶层作用域了，从而可以更快的访问window对象。同样，传入undefined参数，可以缩短查找undefined时的作用域链。

(function( window, undefined ) {         //用一个函数域包起来，就是所谓的沙箱         //在这里边var定义的变量，属于这个函数域内的局部变量，避免污染全局         //把当前沙箱需要的外部变量通过函数参数引入进来         //只要保证参数对内提供的接口的一致性，你还可以随意替换传进来的这个参数        window.jQuery = window.$ = jQuery;    })( window );

jquery将一些原型属性和方法封装在了jquery.prototype中，为了缩短名称，又赋值给了jquery.fn，这是很形象的写法。

有一些数组或对象的方法经常能使用到，jQuery将其保存为局部变量以提高访问速度。

jquery实现的链式调用可以节约代码，所返回的都是同一个对象，可以提高代码效率。

14、ES6的了解有哪些？

新增模板字符串（为JavaScript提供了简单的字符串插值功能）、
箭头函数（操作符左边为输入的参数，而右边则是进行的操作以及返回的值Inputs=>outputs。）、
for-of（用来遍历数据—例如数组中的值。）
arguments对象可被不定参数和默认参数完美代替。
ES6将promise对象纳入规范，提供了原生的Promise对象。
增加了let和const命令，用来声明变量。
增加了块级作用域。let命令实际上就增加了块级作用域。
ES6规定，var命令和function命令声明的全局变量，属于全局对象的属性；let命令、const命令、class命令声明的全局变量，不属于全局对象的属性。。
还有就是引入module模块的概念
Symbol数据类型

15、js继承方式及其优缺点？

原型链继承的缺点

一是字面量重写原型会中断关系，使用引用类型的原型，并且子类型还无法给超类型传递参数。

借用构造函数（类式继承）

借用构造函数虽然解决了刚才两种问题，但没有原型，则复用无从谈起。所以我们需要原型链+借用构造函数的模式，这种模式称为组合继承

组合式继承

组合式继承是比较常用的一种继承方法，其背后的思路是使用原型链实现对原型属性和方法的继承，而通过借用构造函数来实现对实例属性的继承。这样，既通过在原型上定义方法实现了函数复用，又保证每个实例都有它自己的属性。

16、谈谈浮动和清除浮动？

浮动的框可以向左或向右移动，直到他的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流的块框表现得就像浮动框不存在一样。浮动的块框会漂浮在文档普通流的块框上。

浮动产生原因

一般是一个盒子里使用了CSS float浮动属性，导致父级对象盒子不能被撑开，这样CSS float浮动就产生了

清除方法

对父级设置适合CSS高度
clear:both清除浮动, 增加标签,不推荐使用. 在父盒子后添加一个空标签,标签样式为clear:both;
父级div定义 overflow:hidden
最高大上的伪元素清除

.clearfix { zoom:1;  //兼容ie 6 7}.clearfix:after { content:".";display:block;height:0;clear:both; visibility:hidden;}

17、用过哪些设计模式？

工厂模式：

主要好处就是可以消除对象间的耦合，通过使用工程方法而不是new关键字。将所有实例化的代码集中在一个位置防止代码重复。

工厂模式解决了重复实例化的问题 ，但还有一个问题,那就是识别问题，因为根本无法 搞清楚他们到底是哪个对象的实例。

function createObject(name,age,profession){//集中实例化的函数var obj = new Object();    obj.name = name;    obj.age = age;    obj.profession = profession;    obj.move = function () {        return this.name + ' at ' + this.age + ' engaged in ' + this.profession;    };    return obj;}var test1 = createObject('trigkit4',22,'programmer');//第一个实例var test2 = createObject('mike',25,'engineer');//第二个实例

构造函数模式

使用构造函数的方法，即解决了重复实例化的问题，又解决了对象识别的问题，该模式与工厂模式的不同之处在于：

1.构造函数方法没有显示的创建对象 (new Object());

2.直接将属性和方法赋值给 this 对象;

3.没有 renturn 语句。

18、你对闭包的理解？

使用闭包主要是为了设计私有的方法和变量。闭包的优点是可以避免全局变量的污染，缺点是闭包会常驻内存，会增大内存使用量，使用不当很容易造成内存泄露。在js中，函数即闭包，只有函数才会产生作用域的概念

闭包有三个特性：

函数嵌套函数
函数内部可以引用外部的参数和变量
参数和变量不会被垃圾回收机制回收

19、Cookie的弊端？

cookie虽然在持久保存客户端数据提供了方便，分担了服务器存储的负担，但还是有很多局限性的。

弊端: 数量和长度的限制

IE6或更低版本最多20个cookie
IE7和之后的版本最后可以有50个cookie。
Firefox最多50个cookie
chrome和Safari没有做硬性限制
cookie的最大大约为4096字节，为了兼容性，一般不能超过4095字节。
安全性问题。如果cookie被人拦截了，那人就可以取得所有的session信息。即使加密也与事无补，因为拦截者并不需要知道cookie的意义，他只要原样转发cookie就可以达到目的了。
有些状态不可能保存在客户端。例如，为了防止重复提交表单，我们需要在服务器端保存一个计数器。如果我们把这个计数器保存在客户端，那么它起不到任何作用。

优点: 极高的扩展性和可用性

通过良好的编程，控制保存在cookie中的session对象的大小。
通过加密和安全传输技术（SSL），减少cookie被破解的可能性。
只在cookie中存放不敏感数据，即使被盗也不会有重大损失。
控制cookie的生命期，使之不会永远有效。偷盗者很可能拿到一个过期的cookie。

浏览器本地存储

在较高版本的浏览器中，js提供了sessionStorage和globalStorage。在HTML5中提供了localStorage来取代globalStorage。

html5中的Web Storage包括了两种存储方式：sessionStorage和localStorage。

sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。

而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

web storage和cookie的区别

Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。

除此之外，Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。

但是cookie也是不可以或缺的：cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在，而Web Storage仅仅是为了在本地“存储”数据而生

浏览器的支持除了IE７及以下不支持外，其他标准浏览器都完全支持(ie及FF需在web服务器里运行)，值得一提的是IE总是办好事，例如IE7、IE6中的userData其实就是javascript本地存储的解决方案。通过简单的代码封装可以统一到所有的浏览器都支持web storage。

localStorage和sessionStorage都具有相同的操作方法，例如setItem、getItem和removeItem等

　cookie 和session 的区别：

1.　cookie数据存放在客户的浏览器上，session数据放在服务器上。
2.　cookie不是很安全，别人可以分析存放在本地的COOKIE并进行COOKIE欺骗
考虑到安全应当使用session。
3.　session会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能
考虑到减轻服务器性能方面，应当使用COOKIE。
4.　个cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个cooki。
5.　所以个人建议：

将登陆信息等重要信息存放为SESSION其他信息如果需要保留，可以放在COOKIE中

20、null和undefined的区别？

null是一个表示”无”的对象，转为数值时为0；undefined是一个表示”无”的原始值，转为数值时为NaN。

当声明的变量还未被初始化时，变量的默认值为undefined。

null用来表示尚未存在的对象，常用来表示函数企图返回一个不存在的对象。

undefined表示”缺少值”，就是此处应该有一个值，但是还没有定义。典型用法是：

（1）变量被声明了，但没有赋值时，就等于undefined。

（2) 调用函数时，应该提供的参数没有提供，该参数等于undefined。

（3）对象没有赋值的属性，该属性的值为undefined。

（4）函数没有返回值时，默认返回undefined。
null表示”没有对象”，即该处不应该有值。典型用法是：

（1）作为函数的参数，表示该函数的参数不是对象。

（2）作为对象原型链的终点。

21、new操作符具体干了什么呢?

1、创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型。

2、属性和方法被加入到 this 引用的对象中。

3、新创建的对象由 this 所引用，并且最后隐式的返回 this 。

22、js延迟加载的方式有哪些？

defer和async、动态创建DOM方式（创建script，插入到DOM中，加载完毕后callBack）、按需异步载入js

23、哪些操作会造成内存泄漏？

内存泄漏指任何对象在您不再拥有或需要它之后仍然存在。

垃圾回收器定期扫描对象，并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为 0（没有其他对象引用过该对象），或对该对象的惟一引用是循环的，那么该对象的内存即可回收。

setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏。

闭包、控制台日志、循环（在两个对象彼此引用且彼此保留时，就会产生一个循环）

24、列举IE 与其他浏览器不一样的特性？

IE支持currentStyle，FIrefox使用getComputStyle
IE 使用innerText，Firefox使用textContent
滤镜方面：IE:filter:alpha(opacity= num)；Firefox：-moz-opacity:num
事件方面：IE：attachEvent：火狐是addEventListener
鼠标位置：IE是event.clientX；火狐是event.pageX
IE使用event.srcElement；Firefox使用event.target
IE中消除list的原点仅需margin:0即可达到最终效果；FIrefox需要设置margin:0;padding:0以及list-style:none
CSS圆角：ie7以下不支持圆角

25、javascript对象的几种创建方式

1，工厂模式

2，构造函数模式

3，原型模式

4，混合构造函数和原型模式

5，动态原型模式

6，寄生构造函数模式

7，稳妥构造函数模式

26、javascript继承的6种方法

1，原型链继承

2，借用构造函数继承

3，组合继承(原型+借用构造)

4，原型式继承

5，寄生式继承

6，寄生组合式继承

27/说说你对Promise的理解

依照 Promise/A+ 的定义，Promise 有四种状态：

pending: 初始状态, 非 fulfilled 或 rejected.fulfilled: 成功的操作.rejected: 失败的操作.settled: Promise已被fulfilled或rejected，且不是pending

另外， fulfilled 与 rejected 一起合称 settled。

Promise 对象用来进行延迟(deferred) 和异步(asynchronous ) 计算。

Promise 的构造函数

构造一个 Promise，最基本的用法如下：

var promise = new Promise(function(resolve, reject) {    if (...) {  // succeed        resolve(result);    } else {   // fails        reject(Error(errMessage));    }});

Promise 实例拥有 then 方法（具有 then 方法的对象，通常被称为 thenable）。它的使用方法如下：

promise.then(onFulfilled, onRejected)

接收两个函数作为参数，一个在 fulfilled 的时候被调用，一个在 rejected 的时候被调用，接收参数就是 future，onFulfilled 对应 resolve, onRejected 对应 reject。

26、实现一个函数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;    }

28、说说mongoDB和MySQL的区别

MySQL是传统的关系型数据库，MongoDB则是非关系型数据库

mongodb以BSON结构（二进制）进行存储，对海量数据存储有着很明显的优势。

对比传统关系型数据库,NoSQL有着非常显著的性能和扩展性优势，与关系型数据库相比，MongoDB的优点有：
- 弱一致性（最终一致），更能保证用户的访问速度：
- 文档结构的存储方式，能够更便捷的获取数据。

29、请解释什么是事件代理(事件委托)

事件代理（Event Delegation），又称之为事件委托。是 JavaScript 中常用绑定事件的常用技巧。顾名思义，“事件代理”即是把原本需要绑定的事件委托给父元素，让父元素担当事件监听的职务。事件代理的原理是DOM元素的事件冒泡。使用事件代理的好处是可以提高性能。

30、说说你对MVC和MVVM的理解

MVC

View 传送指令到 Controller

Controller 完成业务逻辑后，要求 Model 改变状态

Model 将新的数据发送到 View，用户得到反馈
所有通信都是单向的。

Angular它采用双向绑定（data-binding）：View的变动，自动反映在 ViewModel，反之亦然。

组成部分Model、View、ViewModel

View：UI界面

ViewModel：它是View的抽象，负责View与Model之间信息转换，将View的Command传送到Model；

Model：数据访问层

一、Promise方法你最常用什么写法？构造函数传入的参数是什么类型？（我回答的是匿名函数）那么，传入的该函数是会立刻执行的吗？若调用了两次resolve方法会怎么样？发生异常会怎么样？

Promise是一个构造函数，自己身上有all、race、reject、resolve这几个眼熟的方法，原型上有then、catch等同样很眼熟的方法。这么说用Promise new出来的对象肯定就有then、catch方法喽。
当通过Promise构造函数实例化一个对象时,会传递一个函数作为参数,而且这个函数在新建一个Promise后,会立即执行。所以传入的该函数是会立刻执行的。

会在本次new 操作立刻执行。。
第一次resove就确定了自己是成功还是失败。第二次没用了。添加reject也改变不了。
Promise 一旦决议了，之后的决议就没有用了，状态无法改变的。会忽略

补充resolve方法的两个用途：(1)改变状态；(2)传参
我们会在异步操作成功时调用resolve函数，其作用是将Promise对象的状态从Pending变为Resolved，并将异步操作的结果，作为参数传递给Fulfilled状态的回调函数。

发生异常分为以下几种情况：
参考：http://www.cnblogs.com/lvdabao/p/es6-promise-1.html

二、promise的原理？jquery的ajax返回的是promise对象吗？(百度面试)

jquery的ajax返回的是deferred对象，通过promise的resolve()方法将其转换为promise对象。

var jsPromise = Promise.resolve($.ajax('/whatever.json'));

三、promise 只有2个状态，成功和失败，怎么让一个函数无论成功和失败都能被调用？ Promise.all() 是干什么用的，怎么用？

promise.all()的使用：
Promise.all方法用于将多个Promise实例，包装成一个新的Promise实例。

Promise.all方法接受一个数组作为参数，数组里的元素都是Promise对象的实例，如果不是，就会先调用下面讲到的Promise.resolve方法，将参数转为Promise实例，再进一步处理。（Promise.all方法的参数可以不是数组，但必须具有Iterator接口，且返回的每个成员都是Promise实例。）

var p =Promise.all([p1,p2,p3]);

p的状态由p1、p2、p3决定，分为两种情况。

当该数组里的所有Promise实例都进入Fulfilled状态，Promise.all**返回的实例才会变成Fulfilled状态。并将Promise实例数组的所有返回值组成一个数组，传递给Promise.all返回实例的回调函数**。
当该数组里的某个Promise实例都进入Rejected状态，Promise.all返回的实例会立即变成Rejected状态。并将第一个rejected的实例返回值传递给Promise.all返回实例的回调函数。

四、怎么让一个函数无论promise对象成功和失败都能被调用？

笨方法：

在两个回调中分别执行一次函数。

推荐方式：

扩展一个 Promise.finally()，finally方法用于指定不管Promise对象最后状态如何，都会执行的操作，它与done方法的最大区别在于，它接受一个普通的回调函数作为参数，该函数不管怎样都必须执行。

http://es6.ruanyifeng.com/#do…两个有用的附加方法

//添加finally方法Promise.prototype.finally=function (callback) {   var p=this.constructor;   return this.then(//只要是promise对象就可以调用then方法     value => p.resolve(callback()).then(() => value),     reason => p.resolve(callback()).then(() => {throw reason})   );}

对finally方法的理解：(1)p.resolve(callback())这句函数callback已经执行
(2)finally方法return的是一个promise对象，所以还可以继续链式调用其他方法
(3)对于Promise.resolve方法

Promise.resolve('foo');等价于new Promise(resolve => resolve('foo'));

所以可以通过then方法的回调函数接受实例对象返回的参数
比如：

Promise.resolve(function(){console.log(2);}).then(function(cb){cb()})

(4)p.resolve(callback()).then(() => value)调用then的目的是给promise实例即this添加成功和失败的回调函数

五、使用promise需注意哪些？

古人云：“君子一诺千金”，这种“承诺将来会执行”的对象在JavaScript中称为P**romise对象**。参考：https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/0014345008539155e93fc16046d4bb7854943814c4f9dc2000

Promise是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现，ES6将其写进了语言标准，统一了用法，原生提供了Promise对象。
本文所描述的Promise指Promises/A+规范定义的Promise，可参考Promise/A+,一个可靠的可共同协作的JavaScript Promise开放标准。
Promise是CommonJs的规范之一，包含resolve,reject,done,fail,then等方法，能够帮助我们控制代码的流程，避免函数的多层嵌套。异步在web开发中越来越重要，对于开发人员来说，J**非线性执行的编程会让开发者觉得难以掌控，而Promise可以让我们更好地掌控代码的执行流程,jQuery等流行的**js库都已经实现了这个对象，现在ES6已经原生实现了Promise。
参考：http://www.cnblogs.com/linda586586/p/5592040.html

promise的构造函数为匿名函数，该函数的两个参数为resolve和reject，他们是两个函数。

resolve和reject的作用：1、resolve用来将Promise对象的状态置为成功，并将异步操作结果value作为参数传给成功回调函数。（两个作用）
注意：只要promise实例的状态变为resolved，回调函数就会立即执行。

2、reject用来将Promise对象的状态置为失败，并将异步操作错误error作为参数传给失败回调函数。

使用promise代替地狱式回调函数的好处：
这种写法被称为 composing promises ，是 promises 的强大能力之一。这样写可以带来好处：

清晰的代码结构。
避免始料不及的错误。进行快速的问题定位，避免难以调试更甚至于失败了而没有任何反馈。

then方法的参数：两个回调函数，第一个回调函数是promise的状态变为resolved时调用，第二个回调函数时promise的状态变为rejected时调用，第二个函数可选，不一定提供。这两个函数都接受promise对象传出的值作为参数。(熟悉then的用法)

promise.all()的使用：
Promise.all方法用于将多个Promise实例，包装成一个新的Promise实例。

当该数组里的所有Promise实例都进入Fulfilled状态，Promise.all返回的实例才会变成Fulfilled状态。并将Promise实例数组的所有返回值组成一个数组，传递给Promise.all返回实例的回调函数。

当该数组里的某个Promise实例都进入Rejected状态，Promise.all返回的实例会立即变成Rejected状态。并将第一个rejected的实例返回值传递给Promise.all返回实例的回调函数。

Promise.race方法跟Promise.all方法差不多。唯一的区别在于该方法返回的Promise实例并不会等待所有Proimse都跑完，而是只要有一个*Promise实例改变状态，它就跟着改变*状态。并使用第一个改变状态实例的返回值作为返回值。

var p=Promise.race([p1,p2,p3]);

promise.resolve(）:该方法的作用是将现有对象转为promise对象。

Promise.resolve('foo');等价于new Promise(resolve => resolve('foo'));

promise.reject(）:会返回一个新的promise实例，状态为rejected

var p = Promise.reject('出错了');//等价于var p = new Promise((resolve,reject) => reject('出错了'));//注意：Promise的参数为匿名函数，resolve不能写为nullp.then(null,function (s) {//then的两个参数也都为匿名构造函数  console.log(s)})

注意

细节一：
resolve(value) VS resolve(promise)
ps：resolve方法传入的实参不限于值类型或者Promise实例。更多内容请参考Promise/A+。具体参考：http://imweb.io/topic/57a0760393d9938132cc8da9

细节二：
then方法返回的是一个新的Promise实例（注意是新的）
重要的事情要说三遍。这也是我们能够使用第二节中的链式写法的最重要原因（结合例子理解）

细节三：

var d = new Date();var promise1 = new Promise(function(resolve, reject) {    setTimeout(resolve, 1000, 'resolve from promise1');    // setTimeout(reject, 1000, 'reject from promise1');});var promise2 = promise1.then(function(result) {    console.log('promise1.then(resolve):', result);    return result;}, function(error) {    console.log('promise1.then(reject):', error);    return error;});promise2.then(    result => console.log('result:', result, new Date() - d),    error => console.log('error:', error, new Date() - d))// promise1.then(resolve): resolve from promise1// result: resolve from promise1 1012

通过运行上面的例子，我们会发现promise的状态无论是fulfilled或者rejected，其绑定的.then方法返回的Promise实例（即promise2）都只会执行它的onFulfilled回调方法。(???)

细节四：
所以这里作者给的建议是：在回调方法中一定要有return语句，放弃在回调方法中使用return，相当于放弃获取在该回调方法中的所有操作结果。

细节五：
这就是Promise的状态透传特点，如果当前的promise实例没有绑定回调函数，或者绑定的不是函数，那么当前实例就会把其状态以及不可变值或者不可变原因传递给当前实例调用.then方法返回的新promise实例。

细节六
对使用第二个回调函数处理错误存在的两个问题有所了解，一般使用catch()方法进行错误捕获。

promise的使用场景：
1,用于取代回调函数解决异步操作。
2.Promise最大的好处是在异步执行的流程中，把执行代码和处理结果的代码清晰地分离了
3.Promise还可以做更多的事情，比如，有若干个异步任务，需要先做任务1，如果成功后再做任务2，任何任务失败则不再继续并执行错误处理函数。
要串行执行这样的异步任务，不用Promise需要写一层一层的嵌套代码。有了Promise，我们只需要简单地写：

job1.then(job2).then(job3).catch(handleError);

对js中异步操作的理解：
程序不按顺序执行，下一步操作不用等待上一步。

第一部分考察项目经历

这一部分的套路就是给出一个topic，让面试者给出较为详细的说明，进而问一些更为深入的问题，达到考察的目的。

1 自我介绍。

2 介绍一个印象最深的项目，使用何种技术，解决何种问题？

3 迄今为止遇到的最大的一个技术挑战？是如何解决的？

第二部分定点考察知识点

0 计算机基础

这一部分主要考察对计算机基础知识的掌握。根据我面试的经验，如果你所在的是一家逼格不是特别高的创业公司的话，那么来面你这个web前端职位的人，大部分会是非计算机专业转过来的，所以这部分他们大概率会掌握的不是很好。。所以没有必要考察太深。

1 简述线程与进程的区别？

进程由线程组成，线程是CPU调度的基本单元。

2请从插入删除与查询的效率角度，对链表与数组进行比较。

链表插入删除的效率高，为常量时间复杂度O(1)，但查询效率低，为线性时间复杂度O(n)；

数组查询效率高，为常量时间复杂度O(1)，但插入删除效率低，为线性时间复杂度O(n)

3 简述栈和队列的区别？

栈是先入后出，队列是先入先出。

HTML

基础

div, span, a, strong, form, em, label, p, h1, input, ol, ul ,select, textarea, img, table

上述中哪些是inline tags（默认）? span, a, strong, em, label, input, select, textarea, img

上述中哪些是block tags（默认）? div, form, p, h1, ol, ul , table

块元素与内联元素的区别？

块元素一般都从新行开始，它可以容纳内联元素和其他块元素,常见块元素是段落标签'P". 如果没有css的作用，块元素会顺序以每次另起一行的方式一直往下排。而有了css以后，我们可以改变这种html的默认布局模式，把块元素摆放到你想要的位置上去。而不是每次都愚蠢的另起一行。

内联元素(inline element)一般都是基于语义级(semantic)的基本元素。内联元素只能容纳文本或者其他内联元素，常见内联元素 “a”。

inline-block的元素特点：将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。(准确地说，应用此特性的元素呈现为内联对象，周围元素保持在同一行，但可以设置宽度和高度地块元素的属性)

<b> 和<strong>的区别？

strong是web标准中xhtml的标签，strong的意思是“强调”；b是html的，b的意思是bold（粗体）。为什么用strong代替b？其实这个问题不妨改问：xhtml和html有什么不同，为什么要用xhtml代替html？

简单地说：web标准主张xhtml不涉及具体的表现形式，“强调”可以用加粗来强调，也可以用其它方式来强调，比如下划线，比如字体加大，比如红色，等等，可以通过css来改变strong的具体表现，这就是为什么b要改为strong

strong代表其中内容文字的意义。b代表其中文字的样式是粗体。在html规范中二者的区别基本上看不出来。在xhtml中由于强调“样式与内容的分离”所以代表样式的b被掏汰了。取而代之的是其它标签。注意，不是strong代替了b。strong代表强调，你可以自定义任何样式来代表强调。只是strong的默认样式与b相同而已。

Html的发展历史是：Html4 xhtml html5。

H5的新特性有哪些？

用于绘画的 canvas 元素 Websocket, <video> <audio> <header> <footer> 正则表达式

HTML5添加了许多新新的语法特征，其中包括<video>、<audio>和<canvas>元素，同时集成了SVG内容。

写html代码题

1 按照下面的样子布局：

2 如何使用原生的create/add/remove/move/copy/search DOM中的元素？（写出代码）

1 var para=document.createElement("p");  // 创建2 var element=document.getElementById("div1"); // 查找3 getElementByTagName 4 getElementByName5 element.appendChild(para); //追加 add6 parent.removeChild(child); //删除

如何选取特定的HTML元素：

1 element = document.getElementById(id);

Document 对象：每个载入浏览器的 HTML 文档都会成为 Document 对象。Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。

提示：Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。

HTML DOM 定义了多种查找元素的方法，除了 getElementById() 之外，还有 getElementsByName() 和 getElementsByTagName()和Document.getElementByClassName();。不过，如果您需要查找文档中的一个特定的元素，最有效的方法是 getElementById()。

如需替换 HTML DOM 中的元素，请使用 replaceChild() 方法。

cloneNode(deepBoolean)
复制并返回当前节点的复制节点，复制节点是一个孤立节点，它复制了原节点的属性，在把这个新节点加入到document前，根据需要修改ID属性确保其ID的唯一。

Move：

1 var divs = document.getElementsByTagName("div");   // order: first, second, third2 divs[0].parentNode.appendChild(divs[0]);           // order: second, third, first3 divs[1].parentNode.insertBefore(divs[0], divs[1]); // order: third, second, third

appendChild() 方法：可向节点的子节点列表的末尾添加新的子节点。语法：appendChild(newchild)

insertBefore() 方法：可在已有的子节点前插入一个新的子节点。语法：insertBefore(newchild,refchild)

相同之处：插入子节点

什么是DOM，DOM使用了什么数据结构？

HTML DOM 定义了访问和操作获取、修改、添加或删除 HTML 元素的标准方法。DOM 将 HTML 文档表达为树结构。

可通过 JavaScript （以及其他编程语言）对 HTML DOM 进行访问。

CSS

1 如何理解CSS中的盒子模型？ Margin和Padding的区别是什么？

边框border 内边距外边距。

Margin是外边距，padding是内边距。

http://www.w3school.com.cn/css/css_boxmodel.asp

2 如何验证(validate)一个 HTML文件和CSS文件?

一般sublime这样的编辑器，都会对html和css文件进行语法验证。

http://validator.w3.org/

http://jigsaw.w3.org/css-validator/

3 解释在这个CSS 选择器(selector)中发生了什么:

[role=navigation] > ul a:not([href^=mailto]) {
}

定义了role属性，并且值为navigation的任何元素，其子元素列表下的除邮箱链接之外的所有链接元素。

在 CSS 中，选择器是一种模式，用于选择需要添加样式的元素。上述css 选择器主要使用了下面的三种模式：

[attribute=value]

[target=_blank]

选择 target="_blank" 的所有元素

element>element

div>p

选择父元素为 <div> 元素的所有 <p> 元素。

:not(selector)

:not(p)

选择非 <p> 元素的每个元素。

什么是LESS? <LESS>(选做)

Less 扩充了 CSS 语言，增加了诸如变量、混合（mixin）、运算、函数等。 Less 既可以运行在服务器端（Node.js 和 Rhino 平台）也可以运行在客户端（浏览器）。Sass、LESS和Stylus是CSS预处理器。他是CSS上的一种抽象层。他们是一种特殊的语法/语言编译成CSS。

JavaScript

基础

如何理解JS是单线程这一说法？为什么不会卡住？
Javascript除了一个主线程外,还配有一个代码队列,这个队列用以存放定时器、HTTP请求、事件响应的回调。

什么是浏览器事件模型？请描述js的事件冒泡和捕获(event bubble and capturing), 如何停止冒泡(bubble)?

浏览器事件模型与js事件模型是同一个概念。

假设你在一个元素中又嵌套了另一个元素

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

| element1                        |

|   -------------------------     |

|   |element2               |     |

|   -------------------------     |

|                                 |

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

：并且两者都有一个onClick事件处理函数(event handler)。如果用户单击元素2，则元素1和元素2的单击事件都会被触发。但是哪一个事件先被触发？哪一个事件处理函数会被首先执行？换句话说，事件的发生顺序到底如何？

　　两种模型

　　不出所料，在那些“不堪回首”（浏览器大战）的日子里，Netscape和微软有两种截然不同的处理方法：

Netscape主张元素1的事件首先发生，这种事件发生顺序被称为捕获型
微软则保持元素2具有优先权，这种事件顺序被称为冒泡型

W3c明智的在这场争斗中选择了一个择中的方案。任何发生在w3c事件模型中的事件，首是进入捕获阶段，直到达到目标元素，再进入冒泡阶段

                 | |  / \

-----------------| |--| |-----------------

| element1       | |  | |                |

|   -------------| |--| |-----------     |

|   |element2    \ /  | |          |     |

|   --------------------------------     |

|        W3C event model                 |

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

　　为一个web开发者，你可以选择是在捕获阶段还是冒泡阶段绑定事件处理函数，这是通过addEventListener()方法实现的，如果这个函数的最后一个参数是true，则在捕获阶段绑定函数，反之false，在冒泡阶段绑定函数。

(如何选择在哪个阶段绑定事件处理函数？)

如何取消冒泡？

在微软的模型中，你必须设置事件的cancelBubble的属性为true：

1 window.event.cancelBubble = true

在w3c模型中你必须调用事件的stopPropagation()方法：

1 e.stopPropagation()

这会阻止所有冒泡向外传播。

在js中我们为什么需要event delegation？简要描述一下事件委托？

如今的JavaScript技术界里最火热的一项技术应该是‘事件委托(event delegation)’了。使用事件委托技术能让你避免对特定的每个节点添加事件监听器；相反，事件监听器是被添加到它们的父元素上。事件监听器会分析从子元素冒泡上来的事件，找到是哪个子元素的事件。也就是说把监听子元素上的事件监听函数放在它的父元素上来。

Ajax

Ajax的全称？原理？优点？

全称：Asynchronous js and xml

原理：Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。

把服务器端看成一个数据接口(只负责吐数据)，它返回的是一个纯文本流，当然，这个文本流可以是XML格式，可以是Html，可以是Javascript代码，也可以只是一个字符串。这时候，XMLHttpRequest向服务器端请求这个页面，服务器端将文本的结果写入页面，这和普通的web开发流程是一样的，不同的是，客户端在异步获取这个结果后，不是直接显示在页面，而是先由javascript来处理，然后再显示在页面。

优点：局部刷新，避免重新刷新整个页面。

什么是XMLHTTPRequest对象？

XMLHttpRequest是ajax的核心机制，是JavaScript的一个内置对象。它是在IE5中首先引入的，是一种支持异步请求的技术。简单的说，也就是javascript可以及时向服务器提出请求和处理响应，而不阻塞用户。达到无刷新的效果。

1 if (window.XMLHttpRequest)2   {// code for all new browsers3   xmlhttp=new XMLHttpRequest();4   }

Js读代码题

多项选择题：下列哪一项会返回‘true’?

null == undefined
Boolean( “true” )
Boolean( 0 )
isNaN( 10 )
isNaN( “10” )
NaN === NaN

AB.

A 扩展问题：null == undefined，如果是null === undefined，那是真是假？ Null与undefined的区别是什么？

undefined 表示一个变量声明但未赋值:

1  var TestVar;2  alert(TestVar); //shows undefined3  alert(typeof TestVar); //shows undefined

undefined is a type itself (undefined) while null 是一个对象。

总所周知：null == undefined

但是：null !== undefined

null这是一个对象，但是为空。因为是对象，所以 typeof null 返回 'object' 。

同样，当我们定义一个变量但未赋予其初始值，例如：

　　　　var aValue;

这时，JavaScript在所谓的预编译时会将其初始值设置为对window.undefined属性的引用，

Undefined Null 区别？

typeof 返回的是字符串，有六种可能："number"、"string"、"boolean"、"object"、"function"、"undefined"

ECMAScript 有 5 种原始类型（primitive type），即 Number 、 String、Boolean、Undefined、Null。

Number 对象是原始数值的包装对象。

创建 Number 对象的语法：

1 var myNum=new Number(value);2 var myNum=Number(value);

1 <script type=text/javascript>2 var a = 123;3 alert(typeof(a));4 </script>

typeof 一个函数的返回值是function，如果把这个function赋给一个var，则typeof的返回值是object。

==和===的区别是什么？

javaScript has two sets of equality operators: === and !==, and their evil twins == and !=. The good ones work the way you would expect.

如果两个操作数有相同的类型，并具有相同的值 then === produces true and !== produces false.

The evil twins do the right thing when the operands are of the same type, but if they are of different types, they attempt to coerce the values. the rules by which they do that are complicated and unmemorable.

==和!=在两个操作数类型相同的时候，会根据值是否相等来判断。如果类型不相同，那就邪恶了。。

C: 对于不等于1的整数，为false；

DEF：A NaN按照定义永远不等于它自己。. 在任何语言中都是这样。. 在js中NaN是为一个一个不等于它自身的东东。

之所以Nan不等于它本身，是为了实现bool IsNaN(number) 函数:

1 function isNaN(x)2 { 3     return x != x; 4 }

3 读代码，并写出代码的执行结果：

1 var t = true;2 window.setTimeout(function (){3     t = false;4 },1000);5 while (t){}6 alert('end');

Output：没有输出，死循环。

分析：

确实是死循环导致setTimeout不执行，也导致alert不执行。
js是单线程是对的，所以会先执行while(t){}再alert，但这个循环体是死循环，所以永远不会执行alert。
至于说为什么不执行setTimeout，是因为js的工作机制是：当线程中没有执行任何同步代码的前提下才会执行异步代码，setTimeout是异步代码，所以setTimeout只能等js空闲才会执行，但死循环是永远不会空闲的，所以setTimeout也永远不会执行。

深入理解js单线程：

JavaScript引擎是单线程运行的,浏览器无论在什么时候都只且只有一个线程在运行JavaScript程序。

一、浏览器的内核是多线程的，它们在内核制控下相互配合以保持同步，一个浏览器至少实现三个常驻线程：javascript引擎线程，GUI渲染线程，浏览器事件触发线程。

1. javascript引擎是基于事件驱动单线程执行的，JS引擎一直等待着任务队列中任务的到来，然后加以处理，浏览器无论什么时候都只有一个JS线程在运行JS程序。

2. GUI渲染线程负责渲染浏览器界面，当界面需要重绘（Repaint）或由于某种操作引发回流(reflow)时,该线程就会执行。但需要注意 GUI渲染线程与JS引擎是互斥的，当JS引擎执行时GUI线程会被挂起，GUI更新会被保存在一个队列中等到JS引擎空闲时立即被执行。

3. 事件触发线程，当一个事件被触发时该线程会把事件添加到待处理队列的队尾，等待JS引擎的处理。这些事件可来自JavaScript引擎当前执行的代码块如setTimeOut、也可来自浏览器内核的其他线程如鼠标点击、AJAX异步请求等，但由于JS的单线程关系所有这些事件都得排队等待JS引擎处理。（当线程中没有执行任何同步代码的前提下才会执行异步代码）

什么是递归？ (递归是一个通用的概念。不仅限于js)

什么是闭包？

　　　在js中，如果你在一个function中使用了另外一个function关键字，你就创建了一个闭包。

1 function say667() {2     // Local variable that ends up within closure3     var num = 42;4     var say = function() { console.log(num); }5     num++;6     return say;7 }8 var sayNumber = say667();9 sayNumber(); // logs 43

闭包(上述代码中的匿名函数)中，保存的是outter函数的local变量的一个引用。

Output：43

分析：闭包。1.函数嵌套函数2.函数内部可以访问到外部的变量或者对象3.避免了垃圾回收。

js在处理对象时，永远使用引用reference。比如说，你使用foo调用了一个对象，那么返回的闭包将引用那个原始的对象。

 1 function foo(x) { 2   var tmp = 3; 3  4   return function (y) { 5     console.log(x + y + tmp); 6     x.memb = x.memb ? x.memb + 1 : 1; 7     console.log(x.memb); 8   } 9 }10 11 var age = new Number(2);12 var bar = foo(age); // bar is now a closure referencing age.13 bar(10);

As expected, each call to bar(10) will increment x.memb. What might not be expected, is that xis simply referring to the same object as the age variable! After a couple of calls to bar, age.memb will be 2! This referencing is the basis for memory leaks with HTML objects.

http://stackoverflow.com/questions/111102/how-do-javascript-closures-work

1 <script>2   function sayAlice() {3      var say = function() { alert(alice); }4      var alice = 'Hello Alice';5      return say;6   }7   sayAlice()();8 </script>

Output：Hello Alice

分析：如果把sayAlice()();改为sayAlice()会怎么样？

 1 <script> 2   function foo(x) { 3     var tmp = 3; 4     return function (y) { 5       alert(x + y + (++tmp)); 6     } 7   } 8   var bar = foo(2); 9   bar(10);10 </script>

Output：16

分析：闭包。

1 <script>2   var a = 10;3   function test() {4     alert(a); 5     alert(b); 6   }7   var b = 6;8   test();9 </script>

Output：10 6

分析：跟viriable hoisting 什么区别？这也是一个闭包吗？

When a JavaScript function is invoked, a new execution context is created. Together with the function arguments and the parent object, this execution context also receives all the variables declared outside of it (in the above example, both 'a' and 'b').

上述代码，如果使用c语言实现，会输出什么结果？？

上述代码，如果使用Java实现，

 1 <script> 2   function foo(x) { 3     var tmp = 3; 4     return function (y) { 5       alert(x + y + tmp); 6       x.memb = x.memb ? x.memb + 1 : 1; 7       alert(x.memb); 8     } 9   }10   var age = new Number(2);11   var bar = foo(age); // bar is now a closure referencing age.12   bar(10);13 </script>

Output： 15 1

1 <script>2     var foo = {}; 3      foo.bar = 'hello'; 4      alert(foo.length);5 </script>

Output：undefined

1 <script> 2    function hi(){3  　　var a;4  　　alert(a);5   }6   hi();7 </script>

Output：undefined

问题：与不使用hi 函数什么区别？也形成了闭包，但是a不是在Outter space定义的。

1 function addTen(num) {2     num += 10;3     return num;4 }5 6 var count = 20;7 var result = addTen(count);8 alert(count); 9 alert(result);

output : 20 30 考察js的参数传递

js与java类似，本质上都是值传递，但是引用是地址，值传递时拷贝了引用值的副本，但两个引用指向的还是同一个内存地址。

1 function setName(obj) {2     obj.name = "Nicholas";3     obj = new Object();4     obj.name = "Greg";5 }6 var person = new Object();7 setName(person);8 alert(person.name)

output：Nicholas

分析：主要考察引用传递。

JavaScript 是面向对象的语言，但 JavaScript 不使用类。

在 JavaScript 中，不会创建类，也不会通过类来创建对象（就像在其他面向对象的语言中那样）。

1 var city = "Rome"+function() {2     console.log(city);3     var city = "Paris";4 }();

output： undefined

分析：为什么？

(variable hoisting) 在Js中，变量被移动到脚本的顶部，然后执行。但是这种说法并不准确。在下面的代码中:

1 console.log(a);2 var a = 'Hello World!';

会输出 undefined, 并不是 'Hello World', 所以上述代码等效于下面的代码：

1 var a;2 console.log(a);3 a = 'Hello World!';

而不是下面的代码：

1 var a = 'Hello World!';2 console.log(a);

实际上，js并没有移动任何代码，你需要理解js的执行上下文(context): context分为两个阶段：创建阶段和执行阶段。在创建阶段，为这些变量和函数创建内存空间，人们往往把这个阶段与variable hoisting混淆起来。对于变量的赋值，是在执行上下文的执行阶段进行的。当你对变量a赋值“Hello World”的时候，js引擎只有在执行阶段才知道a的值，在创建阶段，js只是把一个undefined的占位符放在那里，所以所有的变量都是被初始化为undefined的。所以建议永远把变量声明和函数放在你的代码的顶部。

 1 var name = "The Window"; 2 var object = { 3     name: "My Object", 4     getNameFunc: function () { 5         return function () { 6             return this.name; 7         }; 8     } 9 };10 alert(object.getNameFunc()());

output: The Window

分析：闭包？

 1 var name = "The Window"; 2 var object = { 3     name: "My Object", 4     getNameFunc: function () { 5         var that = this; 6         return function () { 7             return that.name; 8         }; 9     }10 };11 alert(object.getNameFunc()());

output: My Object

分析：this指的是调用函数的那个对象

当点击button#2的时候，console中会打印什么？

1 var nodes = document.getElementsByTagName('button');2 // assume there is totally 5 nodes3 for (var i = 0; i < nodes.length; i++) {4     nodes[i].addEventListener('click', function() {5         console.log('You clicked element #' + i);6     });7 }

Output: you clicked element #5

分析：闭包？

1 element.addEventListener('click', function() { /* do stuff here*/ }, false);

最后一个参数决定这个linstener如何响应bubbling事件。

选做：

 1 function Mammal(name) { 2     this.name = name; 3     this.offspring = []; 4 } 5 Mammal.prototype.haveABaby = function () { 6     var newBaby = new Mammal("Baby " + this.name); 7     this.offspring.push(newBaby); 8     return newBaby; 9 }10 11 Mammal.prototype.toString = function () {12     return '[Mammal "' + this.name + '"]';13 };     // 到目前为止，这  是一个Mammal对象的实现。14 15  16 17 // 将Employee的原型指向Person的一个实例18 19 // 因为Person的实例可以调用Person原型中的方法, 所以Employee的实例也可以调用Person原型中的所有属性。20 Cat.prototype = new Mammal();21 22 //修正constructor23 Cat.prototype.constructor = Cat;24 function Cat(name) {25     this.name = name;26 }27 28 Cat.prototype.toString = function () {29     return '[Cat "' + this.name + '"]';30 }  // 到目前为止，这是Mammal的一个子类Cat。31 32 33 var someAnimal = new Mammal('Mr. Biggles');34 var myPet = new Cat('Felix');35 alert(someAnimal);   36 alert(myPet);        37 38 myPet.haveABaby();39 alert(myPet.offspring.length);      40 alert(myPet.offspring[0]);

Output:

[Mammal “Mr. Biggles”]

[Cat, “Felix”]

[Mammal “Baby Felix”]

进一步问题：什么是prototype？什么是原型链?

1 console.log("New york");2 setTimeout(function () {3     console.log("Vienne");4 }, 1000);5 setTimeout(function () {6     console.log("London");7 });8 console.log("Ottawa");

Output: New York， Ottawa，Landon，Vienne。

分析：setTimeout异步函数。

js写代码题

1 尝试实现下面的需求：

(1) 测试array numbers中是不是每一个元素都比2大

E.G.

1 var numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];2 var everyResult = numbers.every(function (item, index, array) {3     return (item > 2);4 });5 alert(everyResult); //false

分析：对数组中的每个元素都执行一次指定的函数（callback），直到此函数返回 false，如果发现这个元素，every 将返回 false，如果回调函数对每个元素执行后都返回 true ，every 将返回 true。

(2) 得到新的array，其中的元素是numbers中所有比2大的元素。

var numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];

 1 <script> 2   var numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1]; 3   var numbersLargerThan2 = []; 4   for(i in numbers){ // i has some problems here. 5      if(numbers[i]>2) { 6        numbersLargerThan2.push(numbers[i]); 7      } 8   } 9   for(i in numbersLargerThan2) {10     alert(numbersLargerThan2[i]);11   }12   // push pop13 </script>

(3) 一个新的array,其中的每一个元素都比numbers中的元素大1

var numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];

 1 //一个新的array,其中的每一个元素都比numbers中的元素大1 2 <script> 3   var numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1]; 4   var numbersAfterAdd1 = []; 5   for(i in numbers) { 6      numbersAfterAdd1.push(numbers[i]+1); 7   } 8  9   for(i in numbersAfterAdd1) {10      alert(numbersAfterAdd1[i]);11   }12 </script>

2列出js中创建对象的方法，并写出一个js中的继承关系的实现。

应该知道4种常见创建对象的方法：

1 用{} ，对象字面量。

先创建再添加：

1 //创建一个简单对象字面量2 var person = {};   3 // 加入属性和方法4 person.name = 'ifcode';5 person.setName = function(theName) {6    person.name = theName;7 }

2 JS good parts中推荐这种写法:

1 var person = {2     name: 'ifcode',3     setName: function(theName) {4         this.name = theName;5     }6 }

 1 var clock={ 2    hour:12, 3    minute:10, 4    second:10, 5    showTime:function(){ 6       alert(this.hour+":"+this.minute+":"+this.second); 7    } 8 } 9 clock.showTime();//调用10 //var m = new myObj(); //不支持

上述两种方式只存在于一个实例的对象，也就是单例模式。

下面是可以创建多个实例的方式：

3 构造函数一般都符合factory pattern，根据默认的规则，构造函数应当首字母大写：

1 Person = function(defaultName) {2     this.name = defaultName;3     this.setName = function(theName) {4         this.name = theName;5     }6 }7 person = new Person('ifcode');  // new是调用构造函数

利用构造函数就可以方便地创建多个对象实例了。

4 利用 prototype的构造函数：

1 Person = function(defaultName) {2     this.name = defaultName;3 }4  5 6 Person.prototype.setName = function(theName) {7     this.name = theName;8 }

所有创建在prototype上得属性和方法，都将被所有对象实例分享。

一般在创建单例的时候，用2 ，在创建多个对象的时候，使用4.；

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

2.创建Object实例

1  var clock = new Object();2  clock.hour=12;3  clock.minute=10;4  clock.showHour=function(){alert(clock.hour);};5 6  clock.showHour();//调用

由此可见属性是可以动态添加，修改的

3用 function 关键字模拟 class

上述两种。。。

http://www.cnblogs.com/lucas/archive/2009/03/17/1411656.html

http://www.jianshu.com/p/f9a1203e33d0

js中继承关系的实现：

JavaScript中要实现继承，其实就是实现三层含义：
1、子类的实例可以共享父类的方法；
2、子类可以覆盖父类的方法或者扩展新的方法；
3、子类和父类都是子类实例的“类型”。

什么是prototype？原型

什么是原型链?

JavaScript 是基于原型的语言。当我们调用一个对象的属性时，如果对象没有该属性，JavaScript 解释器就会从对象的原型对象上去找该属性，如果原型上也没有该属性，那就去找原型的原型。这种属性查找的方式被称为原型链（prototype chain）。

ES6 并没有改变 JavaScript 基于原型的本质，只是在此之上提供了一些语法糖。class 就是其中之一。其他的还有 extends，super 和 static 。它们大多数都可以转换成等价的 ES5 语法。

javascript是面向对象的，怎么体现javascript的继承关系？使用prototype来实现。

ES6中启用了class关键字，如何使用该关键字实现继承关系？

 1 // ES6 中启用了关键字 class 2 class Person { 3   constructor(name, gender, age) { 4     this.name = name; 5     this.gender = gender; 6     this.age = age; 7   } 8   tellAge() { 9     console.log(this.age);10   }11 }12  13 var puya = new Person('PuYart', 'male', '21');14 puya.tellAge();

CLASS继承

 1 /* 2 *class：ES6及ES6以上才有该方法。 3 *class的出现将原型继承简化了很多，class的目的就是让定义类更简单。 4 *extends来继承对象，中间的原型之类的就可以免去，就可以继承扩展class 5 */ 6 //用class创建对象 7 class Leader{ 8     constructor(name){//constructor构造函数 9         this.name=name;10     }11     hello(){//定义在原型上的函数12         alert('Hello, '+this.name+'!');13     }14 }15 var liyi= new Leader('liyi');16 liyi.name;//输出'liyi'17 liyi.hello();//输出'Hello, liyi!'18 //用extends继承扩展19 class extendLeader extends Leader{20     constructor(name,grade,skill){//若是不扩展Leader的构造函数，就可以将constructor这一步省去21         super(name);22         this.grade=grade;23 　　　　 this.skill=skill;24 　　}25 　　run(){26 　　　　console.log(this.name+'职位：'+this.grade+' 技能：'+this.skill);27 　　}28 }29 var liyi=new extendLeader('liyi','研发经理','精通各种技术');30 liyi.name;//'liyi'31 liyi.grade;//'研发经理'32 liyi.skill;//'精通各种技术'33 liyi.hello;//'Hello, liyi!'34 liyi.run();//'liyi职位：研发经理 技能：精通各种技术'

Two awesome javascript inheritance libraries that come to mind are klass and selfish.js (I've used both, they're amazing.)

http://www.cnblogs.com/sanshi/archive/2009/07/08/1519036.html

知不知道ES6 中的class和extends关键字，如何使用上述关键字实现一个继承关系。

 1 function Person(name) { 2   this.name = name; 3 } 4  5 Person.prototype = { 6   getName: function() { 7     return this.name; 8   } 9 }10 11 function Employee(name, employeeID) {12   this.name = name;13   this.employeeID = employeeID;14 }15 16 // 这是不好的。17 Employee.prototype = new Person();18 Employee.prototype.getEmployeeID = function() {19   return this.employeeID;20 };21 22 var zhang = new Employee("ZhangSan", "1234");23 console.log(zhang.getName()); // "ZhangSan"

 1 function Employee(name, employeeID) { 2   this.name = name; 3   this.employeeID = employeeID; 4 } 5 // 创建Employee时实例化Person是不合适的 6 Employee.prototype = new Person(); 7 Employee.prototype.constructor = Employee; 8 Employee.prototype.getEmployeeID = function() {\ 9     return this.employeeID;10 };11 12 var zhang = new Employee("ZhangSan", "1234");13 console.log(zhang.constructor === Employee); // true14 console.log(zhang.constructor === Object); // false

提供一个原型方法（比如init）来初始化数据。

 1 // 空的构造函数 2 function Person() { 3 } 4  5 Person.prototype = { 6   init: function(name) { 7     this.name = name; 8   }, 9 10   getName: function() {11     return this.name;12   }13 }14 15 // 空的构造函数16 function Employee() {17 }18 19 // 创建类的阶段不会初始化父类的数据，因为Person是一个空的构造函数20 Employee.prototype = new Person();21 Employee.prototype.constructor = Employee;22 Employee.prototype.init = function(name, employeeID) {23   this.name = name;24   this.employeeID = employeeID;25 };26 27 Employee.prototype.getEmployeeID = function() {28   return this.employeeID;29 };

这种方式下，必须在实例化一个对象后手工调用init函数，如下：

1 var zhang = new Employee();2 zhang.init("ZhangSan", "1234");3 console.log(zhang.getName()); // "ZhangSan"

必须达到两个效果，构造类时不要调用init函数和实例化对象时自动调用init函数。看来我们需要在调用空的构造函数时有一个状态标示。

可以用 call 来实现继承:

 1 function Class1() {  2     this.showTxt = function(txt) {  3         alert(txt);  4     }  5 }  6 function Class2() {  7     Class1.call(this);  8 }  9 var c2 = new Class2(); 10 c2.showTxt("cc");

这样 Class2 就继承Class1了，Class1.call(this) 的意思就是使用 Class1 对象代替this对象，那么 Class2 中不就有Class1 的所有属性和方法了吗，c2 对象就能够直接调用Class1 的方法以及属性了，执行结果就是：alert（“cc”）;

Framework

1 如何使用JQuery选取一个ID为myDivId的元素？如何选取一组class为myCssClass的元素？写出代码。

1 $( "#myDivId" );2 $( ".myDivId" );

3 简述你使用过的前端框架，并介绍其优缺点？

JQuery/Query Mobile

Dojo/Dojo Mobile

zepto.js是一个专为mobile WebKit浏览器(如：Safari和Chrome), 语法借鉴并兼容JQuery。

Node.js

angularJS

bootstrap 是一套html css和js的框架。

React.js（React）是 Facebook 推出的一个用来构建用户界面的 JavaScript 库.

Slider 滑动条控件。（不算一个框架）

(选做)如果熟悉angularJS, 请选择(1), 如果熟悉React, 请选择(2):

(1) 描述angular中的数据绑定(data-binding)，描述angular依赖注入(dependency injection)

在angular中，model和view组件之间的Data Binding是可以自动同步数据的。angular实现Data Binding的方法可以让你确信在你的应用中model是single-source-of-truth，view仅仅是model的投影。当model改变时，view跟着改变，反之亦然。

angular的模板系统则不同，template是被浏览器去编译的，编译这步会产生一个live的view。对view进行的任何更改会立即反映到model中，对model进行的更改也会立即反映到view中。model是应用程序的single-source-of-truth，极大地简化了开发人员的编程模型，你仅仅把view当成model的瞬间投影即可。

Angular JS框架与Spring类似，都实现了DI。

(2) virtual DOM的优势是什么？解释FLUX中的数据流

来人们使用了 MVC、MVP 的架构模式，希望能从代码组织方式来降低维护这种复杂应用程序的难度。但是 MVC 架构没办法减少你所维护的状态，也没有降低状态更新你需要对页面的更新操作（前端来说就是DOM操作），你需要操作的DOM还是需要操作，只是换了个地方。

相对于 DOM 对象，原生的 JavaScript 对象处理起来更快，而且更简单。DOM 树上的结构、属性信息我们都可以很容易地用 JavaScript 对象表示出来。

既然状态改变了要操作相应的DOM元素，为什么不做一个东西可以让视图和状态进行绑定，状态变更了视图自动变更，就不用手动更新页面了。这就是后来人们想出了 MVVM 模式。

React 标榜自己是 MVC 里面 V 的部分，那么 Flux 就相当于添加 M 和 C 的部分。

Flux 是 Facebook 使用的一套前端应用的架构模式。

一个 Flux 应用主要包含四个部分：

the dispatcher

处理动作分发，维护 Store 之间的依赖关系

the stores

数据和逻辑部分

the views

React 组件，这一层可以看作 controller-views，作为视图同时响应用户交互

the actions

提供给 dispatcher 传递数据给 store

Flux 的核心“单向数据流“怎么运作的：

Action -> Dispatcher -> Store -> View

更多时候 View 会通过用户交互触发 Action，所以一个简单完整的数据流类似这样：

(选做)什么是npm, 你可以如何使用它？

npm是Node.js 的包管理工具，用来安装各种 Node.js 的扩展。

test/build等杂项

请描述Git中merge和rebase的区别(选做)

git merge和git rebase从最终效果来看没有任何区别，都是将不同分支的代码融合在一起，但是生成的代码树就稍微有些不同。rebase操作不会生成新的节点，是将两个分支融合成一个线性的提交。而merge操作生成的代码树会显得比较乱。

什么是mock? (选做)

mock测试就是在测试过程中，对于某些不容易构造或者不容易获取的对象，用一个虚拟的对象来创建以便测试的测试方法。

延伸问题：什么是冒烟测试（smoke test）?

冒烟测试源自硬件行业，对一个硬件或者硬件组件改动后，直接给设备加电，看看设备会不会冒烟，没冒烟，就表示待测组件是通过了测试。在软件开发过程中，一直有高内聚，低耦合这样的说法，各个功能模块之间的耦合还是存在的，因此一个功能的改动，还是会影响到其他功能模块。因此在开发人员修复了先前测试中发现的bug后，想知道这个bug的修复是否会影响到其他功能模块，需要做的就是冒烟测试。

列出你知道的前端的build/test automation/unit test/的工具/框架，以及你知道的其他工具，并给出简要描述。(选做)

静态代码检查工具JSLint。 JSHint跟JSLint非常像，都是Javascript代码验证工具

前端的测试框架很多，像QUnit、jasmine、mocha、jest、intern等

QUnit诞生之初是为了jquery的单元测试

Bower 包管理包依赖

Yeoman 快速构建

Build工具：

Grunt能做什么：
1、合并，压缩JS，CSS。
2、单元测试(Qunit)。
3、验证(JSHint)。
4、初始化一个Project。

Build工具：

Gulp + Webpack

服务器端相关

HTTP

这一部分主要考察对网络协议，主要是HTTP协议的理解。

HTTP请求共有几种类型？给出你常用的类型，并结合你给出的类型描述HTTP请求的幂等性。

8 种类型： GET POST PUT DELETE OPTION HEAD等等。

列出常见的HTTP请求的返回状态(Status Code)，并简述其含义？

如何解决HTTP的无状态性所带来的问题？(选做)

如何理解HTTP是无连接的？ (选做)

TCP是有连接的，而HTTP是无连接的。无连接：服务器处理完客户的请求，并收到客户的应答后，即断开连接。

什么是长连接？

HTTP响应码 1 2 3 4 5 的各种含义

什么是RESTful风格？

常见HTTP报头的含义：

Via

Keep-alive

是否熟悉抓包工具，平时都使用什么抓包工具？比如Fiddler？

什么是Proxy？什么是反向代理？

杂项

简述什么是MVC ？(选做)

什么是websocket？什么是REST？什么样的需求(使用场景)会需要websocket和REST？(选做)

其他问题：

期望薪资；

如何看待加班，婚育情况，住址，何时到岗；

是否有问题需要提问？

备选题

计算机基础

快排的主要思想？时间复杂度？如何避免最差的时间复杂度？(选做)

6二叉树有哪些遍历算法？如何从递归算法构造非递归算法？使用什么辅助数据结构？(选做)

4 什么是平衡二叉树？常见的平衡二叉树有哪些？(选做)

HTML

如何选取特定的HTML元素？

5 javascript的方法可以分为哪几类？

类方法(静态方法)，对象方法(实例方法)，原型方法。

javascript的方法可以分为三类：

a 类方法

b 对象方法

c 原型方法

例子：

 1 function People(name) 2 { 3   this.name=name; 4   //对象方法 5   this.Introduce=function(){ 6     alert("My name is "+this.name); 7   } 8 } 9 //类方法10 People.Run=function(){11   alert("I can run");12 }13 //原型方法14 People.prototype.IntroduceChinese=function(){15   alert("我的名字是"+this.name);16 }17 18  19 20 //测试21 22 var p1=new People("Windking");23 24 p1.Introduce();25 26 People.Run();27 28 p1.IntroduceChinese();

1 什么是document对象？如何通过Window对象访问document对象？

9 是否熟悉抓包工具，平时都使用什么抓包工具？

8 列出常见的HTTP报头的字段，并简述其含义？

Keep-alive什么是长连接？

10 什么是Proxy？什么是反向代理？

1      <script>2         var foo = []; 3         foo.push(1); 4         foo.push(2); 5         alert(foo.length);6      </script>

Output：2

什么是平衡二叉树？常见的平衡二叉树有哪些？()AVL 红黑。

算法：

快排的思想，时间复杂度？如何避免最差的时间复杂度？

二叉树的遍历算法？如何从递归算法构造非递归算法，使用什么辅助数据结构？

5. js中的3种弹出式消息提醒（警告窗口，确认窗口，信息输入窗口）的命令是什么？
alert
confirm
prompt

node.js前端面试题汇总，附答案

1、为什么用Nodejs，它有哪些缺点？答：事件驱动，通过闭包很容易实现客户端的生命活期。不用担心多线程，锁，并行计算的问题 V8引擎速度非常快对于游戏来说，写一遍游戏逻辑代

1、为什么用Nodejs，它有哪些缺点？

    答：事件驱动，通过闭包很容易实现客户端的生命活期。
    不用担心多线程，锁，并行计算的问题
    V8引擎速度非常快
    对于游戏来说，写一遍游戏逻辑代码，前端后端通用。

当然Nodejs也有一些缺点：

    nodejs更新很快，可能会出现版本联兼容
    nodejs还不算成熟，还没有大制作。
    nodejs不像其他的服务器，对于不同的连接，不支持进程和线程操作。

2、什么是error-first的回调方式？

答：Error-first回调方式用来同时传递error和data。将错误作为第一个参数，它就必须先检查看看有没有错误先。另外的参数就用来传递data了。

fs.readFile(filePath, function(err, data) {
if(err) {
    //处理错误，这里的return很重要，如果发生错误，在此处就会停止了。
    return console.log(err);
}
//传递data
console.log(data);
})

3、你是如何避免回调地狱的?

答：    模块化把回调函数分割成独立的函数

    使用控制流的库，比如async

    generators结合Promise

    async/await

4、Promise是什么?

答：概念不多说了，简单来说就是帮助你更好地处理异步操作的东西。

new Promise((resolve, reject) => {
setTimeout(() => {
    resolve('result');
}, 100)
})
.then(console.log)
.catch(console.error)

5、stub是什么? 举个例子?

stub是用来模拟组件/模块行为的东西，它在测试阶段为函数调用提供内部响应。

例子是写文件，但实际上并没有这么做

var fs = require('fs');

var writeFileStub = sinon.stub(fs, 'writeFile', function(path, data, cb) {
return cb(null)
})

expect(writeFileStub).to.be.called
writeFileStub.restore();

整理前端css和js以及http的相关面试题，附答案

自己整理了一些关于前端这个行业面试题，好多都不会好难过，I NEED AV....... HTMLCSS 1. 常用那几种浏览器测试？有哪些内核(Layout Engine)? (Q1)浏览器：IE，Chrome，FireFox，Safari，Opera。 (Q2)内

自己整理了一些关于前端这个行业面试题，好多都不会好难过，I NEED AV.......

HTML&CSS

1. 常用那几种浏览器测试？有哪些内核(Layout Engine)?
(Q1)浏览器：IE，Chrome，FireFox，Safari，Opera。
(Q2)内核：Trident，Gecko，Presto，Webkit。
2. 说下行内元素和块级元素的区别？行内块元素的兼容性使用？（IE8 以下）
(Q1)行内元素：会在水平方向排列，不能包含块级元素，设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效。
块级元素：各占据一行，垂直方向排列。从新行开始结束接着一个断行。
(Q2)兼容性：display:inline-block;*display:inline;*zoom:1;
3.清除浮动有哪些方式？比较好的方式是哪一种？
(Q1)
（1）父级div定义height。
（2）结尾处加空div标签clear:both。
（3）父级div定义伪类:after和zoom。
（4）父级div定义overflow:hidden。
（5）父级div定义overflow:auto。
（6）父级div也浮动，需要定义宽度。
（7）父级div定义display:table。
（8）结尾处加br标签clear:both。
(Q2)比较好的是第3种方式，好多网站都这么用。
4.box-sizing常用的属性有哪些？分别有什么作用？
(Q1)box-sizing: content-box|border-box|inherit;
(Q2)content-box:宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框(元素默认效果)。
border-box:元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
5.Doctype作用？标准模式与兼容模式各有什么区别?
(Q1)<!DOCTYPE>告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。
(Q2)标准模式的排版和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。
6.HTML5 为什么只需要写 <!DOCTYPE HTML>？
HTML5不基于 SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照它们应该的方式来运行）。
而HTML4.01基于SGML,所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。
7.页面导入样式时，使用link和@import有什么区别？
（1）link属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS;
（2）页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
（3）import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题;
8.介绍一下你对浏览器内核的理解？
主要分成两部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。
渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。
JS引擎则：解析和执行javascript来实现网页的动态效果。
最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎。
9.html5有哪些新特性？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？
（Q1）
HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。
(1)绘画 canvas;
(2)用于媒介回放的 video 和 audio 元素;
(3)本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失;
(4)sessionStorage 的数据在浏览器关闭后自动删除;
(5)语意化更好的内容元素，比如 article、footer、header、nav、section;
(6)表单控件，calendar、date、time、email、url、search;
(7)新的技术webworker, websocket, Geolocation;
(Q2)
IE8/IE7/IE6支持通过document.createElement方法产生的标签，
可以利用这一特性让这些浏览器支持HTML5新标签，
浏览器支持新标签后，还需要添加标签默认的样式。
当然也可以直接使用成熟的框架、比如html5shim;

10.简述一下你对HTML语义化的理解？
用正确的标签做正确的事情。
html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析;
即使在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的;
搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO;
使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

JavaScript

1.介绍js的基本数据类型
Undefined、Null、Boolean、Number、String
2.js有哪些内置对象？
数据封装类对象：Object、Array、Boolean、Number 和 String
其他对象：Function、Arguments、Math、Date、RegExp、Error
3.this对象的理解
this总是指向函数的直接调用者（而非间接调用者）；
如果有new关键字，this指向new出来的那个对象；
在事件中，this指向触发这个事件的对象，特殊的是，IE中的attachEvent中的this总是指向全局对象Window；
4.eval是做什么的？
它的功能是把对应的字符串解析成JS代码并运行；
应该避免使用eval，不安全，非常耗性能（2次，一次解析成js语句，一次执行）。
由JSON字符串转换为JSON对象的时候可以用eval，var obj =eval('('+ str +')');
5.DOM怎样添加、移除、移动、复制、创建和查找节点

// 创建新节点
createDocumentFragment()    //创建一个DOM片段
createElement()   //创建一个具体的元素
createTextNode()   //创建一个文本节点
// 添加、移除、替换、插入
appendChild()
removeChild()
replaceChild()
insertBefore() //在已有的子节点前插入一个新的子节点
// 查找
getElementsByTagName()    //通过标签名称
getElementsByName()    //通过元素的Name属性的值(IE容错能力较强，会得到一个数组，其中包括id等于name值的)
getElementById()    //通过元素Id，唯一性

6.null和undefined的区别？
null是一个表示"无"的对象，转为数值时为0；undefined是一个表示"无"的原始值，转为数值时为NaN。
undefined：
（1）变量被声明了，但没有赋值时，就等于undefined。
（2) 调用函数时，应该提供的参数没有提供，该参数等于undefined。
（3）对象没有赋值的属性，该属性的值为undefined。
（4）函数没有返回值时，默认返回undefined。
null：
（1）作为函数的参数，表示该函数的参数不是对象。
（2）作为对象原型链的终点。
7.new操作符具体干了什么呢?
（1）创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型。
（2）属性和方法被加入到 this 引用的对象中。
（3）新创建的对象由 this 所引用，并且最后隐式的返回 this 。
8.JSON 的了解？
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它是基于JavaScript的一个子集。数据格式简单, 易于读写, 占用带宽小。
格式：采用键值对，例如：{'age':'12', 'name':'back'}
9.call() 和 apply() 的区别和作用？
apply()函数有两个参数：第一个参数是上下文，第二个参数是参数组成的数组。如果上下文是null，则使用全局对象代替。
如：function.apply(this,[1,2,3]);
call()的第一个参数是上下文，后续是实例传入的参数序列。
如：function.call(this,1,2,3);
10.如何获取UA？

function whatBrowser() { document.Browser.Name.value=navigator.appName; document.Browser.Version.value=navigator.appVersion; document.Browser.Code.value=navigator.appCodeName; document.Browser.Agent.value=navigator.userAgent; }

其他

1.HTTP状态码知道哪些？
100  Continue  继续，一般在发送post请求时，已发送了http header之后服务端将返回此信息，表示确认，之后发送具体参数信息
200  OK 正常返回信息
201  Created  请求成功并且服务器创建了新的资源
202  Accepted  服务器已接受请求，但尚未处理
301  Moved Permanently  请求的网页已永久移动到新位置。
302 Found  临时性重定向。
303 See Other  临时性重定向，且总是使用 GET 请求新的 URI。
304  Not Modified  自从上次请求后，请求的网页未修改过。
400 Bad Request  服务器无法理解请求的格式，客户端不应当尝试再次使用相同的内容发起请求。
401 Unauthorized  请求未授权。
403 Forbidden  禁止访问。
404 Not Found  找不到如何与 URI 相匹配的资源。
500 Internal Server Error  最常见的服务器端错误。
503 Service Unavailable 服务器端暂时无法处理请求（可能是过载或维护）。
2.你有哪些性能优化的方法？
（1）减少http请求次数：CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存，图片服务器。
（2）前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数
（3）用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。
（4）当需要设置的样式很多时设置className而不是直接操作style。
（5）少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。
（6）避免使用CSS Expression（css表达式)又称Dynamic properties(动态属性)。
（7）图片预加载，将样式表放在顶部，将脚本放在底部  加上时间戳。
3.什么叫优雅降级和渐进增强？
优雅降级：Web站点在所有新式浏览器中都能正常工作，如果用户使用的是老式浏览器，则代码会检查以确认它们是否能正常工作。由于IE独特的盒模型布局问题，针对不同版本的IE的hack实践过优雅降级了,为那些无法支持功能的浏览器增加候选方案，使之在旧式浏览器上以某种形式降级体验却不至于完全失效.
渐进增强：从被所有浏览器支持的基本功能开始，逐步地添加那些只有新式浏览器才支持的功能,向页面增加无害于基础浏览器的额外样式和功能的。当浏览器支持时，它们会自动地呈现出来并发挥作用。
4.哪些常见操作会造成内存泄漏？
内存泄漏指任何对象在您不再拥有或需要它之后仍然存在。
垃圾回收器定期扫描对象，并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为 0（没有其他对象引用过该对象），或对该对象的惟一引用是循环的，那么该对象的内存即可回收。
setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏。
闭包、控制台日志、循环（在两个对象彼此引用且彼此保留时，就会产生一个循环）
5.线程与进程的区别
一个程序至少有一个进程,一个进程至少有一个线程.
线程的划分尺度小于进程，使得多线程程序的并发性高。
另外，进程在执行过程中拥有独立的内存单元，而多个线程共享内存，从而极大地提高了程序的运行效率。
线程在执行过程中与进程还是有区别的。每个独立的线程有一个程序运行的入口、顺序执行序列和程序的出口。但是线程不能够独立执行，必须依存在应用程序中，由应用程序提供多个线程执行控制。
从逻辑角度来看，多线程的意义在于一个应用程序中，有多个执行部分可以同时执行。但操作系统并没有将多个线程看做多个独立的应用，来实现进程的调度和管理以及资源分配。这就是进程和线程的重要区别。

整理前端面试题（2） - 笔记 - 前端网（QDFuns）

整理了一些关于前端的面试题HTMLCSS1.请描述一下cookies，sessionStorage和localStorage的区别？cookie是网站为了标示用户身份而储存在用户本地终端（...

HTML&CSS

1.请描述一下 cookies，sessionStorage 和 localStorage 的区别？
cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）。
cookie数据始终在同源的http请求中携带（即使不需要），记会在浏览器和服务器间来回传递。
sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。
存储大小：
cookie数据大小不能超过4k。
sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
有期时间：
localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；
sessionStorage  数据在当前浏览器窗口关闭后自动删除。
cookie       设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭
2.iframe有那些缺点？
iframe会阻塞主页面的Onload事件；
搜索引擎的检索程序无法解读这种页面，不利于SEO;
iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。
使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascript动态给iframe添加src属性值，这样可以绕开以上两个问题。
3.如何实现浏览器内多个标签页之间的通信?
WebSocket、SharedWorker
也可以调用localstorge、cookies等本地存储方式。
localstorge另一个浏览上下文里被添加、修改或删除时，它都会触发一个事件，我们通过监听事件，控制它的值来进行页面信息通信。
注意quirks：Safari 在无痕模式下设置localstorge值时会抛出 QuotaExceededError 的异常。
4.如何在页面上实现一个圆形的可点击区域？
（1）map+area或者svg
（2）border-radius
（3）纯js实现需要求一个点在不在圆上简单算法、获取鼠标坐标等等
5.介绍一下标准的CSS的盒子模型？低版本IE的盒子模型有什么不同的？
（1）有两种， IE 盒子模型、W3C 盒子模型。
（2）盒模型：内容(content)、填充(padding)、边界(margin)、边框(border)。
（3）区  别： IE的content部分把 border 和 padding计算了进去。
6.CSS优先级算法如何计算？
优先级就近原则，同权重情况下样式定义最近者为准;
载入样式以最后载入的定位为准;
优先级为:
!important >  id > class > tag
important比内联优先级高(style)
7.为什么要使用CSS sprites
CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background-position”的组合进行背景定位，这样可以减少很多图片请求的开销，因为请求耗时比较长；请求虽然可以并发，但是如果请求太多会给服务器增加很大的压力。
8.display:none和visibility:hidden的区别？
display:none  隐藏对应的元素，在文档布局中不再给它分配空间，它各边的元素会合拢，就当他从来不存在。
visibility:hidden  隐藏对应的元素，但是在文档布局中仍保留原来的空间。
9.position的absolute与fixed区别
absolute浮动定位是相对于父级中设置position为relative或者absolute最近的父级元素
fixed浮动定位是相对于浏览器视窗的
10.IE 8以下版本的浏览器中的盒模型有什么不同？
IE8以下浏览器的盒模型中定义的元素的宽高不包括内边距和边框

JavaScript

1.JS数组去重
Array.prototype.unique1 = function () {
var n = []; //一个新的临时数组
for (var i = 0; i < this.length; i++) //遍历当前数组
{
    //如果当前数组的第i已经保存进了临时数组，那么跳过，
    //否则把当前项push到临时数组里面
    if (n.indexOf(this[i]) == -1) n.push(this[i]);
}
return n;
}

Array.prototype.unique2 = function()
{
    var n = {},r=[]; //n为hash表，r为临时数组
    for(var i = 0; i < this.length; i++) //遍历当前数组
    {
        if (!n[this[i]]) //如果hash表中没有当前项
        {
            n[this[i]] = true; //存入hash表
            r.push(this[i]); //把当前数组的当前项push到临时数组里面
        }
    }
    return r;
}

Array.prototype.unique3 = function()
{
    var n = [this[0]]; //结果数组
    for(var i = 1; i < this.length; i++) //从第二项开始遍历
    {
        //如果当前数组的第i项在当前数组中第一次出现的位置不是i，
        //那么表示第i项是重复的，忽略掉。否则存入结果数组
        if (this.indexOf(this[i]) == i) n.push(this[i]);
    }
    return n;
}

2.js操作获取和设置cookie
//创建cookie
function setCookie(name, value, expires, path, domain, secure) {
    var cookieText = encodeURIComponent(name) + '=' + encodeURIComponent(value);
    if (expires instanceof Date) {
        cookieText += '; expires=' + expires;
    }
    if (path) {
        cookieText += '; expires=' + expires;
    }
    if (domain) {
        cookieText += '; domain=' + domain;
    }
    if (secure) {
        cookieText += '; secure';
    }
    document.cookie = cookieText;
}

//获取cookie
function getCookie(name) {
    var cookieName = encodeURIComponent(name) + '=';
    var cookieStart = document.cookie.indexOf(cookieName);
    var cookieValue = null;
    if (cookieStart > -1) {
        var cookieEnd = document.cookie.indexOf(';', cookieStart);
        if (cookieEnd == -1) {
            cookieEnd = document.cookie.length;
        }
        cookieValue = decodeURIComponent(document.cookie.substring(cookieStart + cookieName.length, cookieEnd));
    }
    return cookieValue;
}

//删除cookie
function unsetCookie(name) {
    document.cookie = name + "= ; expires=" + new Date(0);
}
3.ajax 有那些优缺点?如何解决跨域问题?
（Q1）
优点：
（1）通过异步模式，提升了用户体验.
（2）优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用.
（3）Ajax在客户端运行，承担了一部分本来由服务器承担的工作，减少了大用户量下的服务器负载。
（4）Ajax可以实现动态不刷新（局部刷新）
缺点：
（1）安全问题 AJAX暴露了与服务器交互的细节。
（2）对搜索引擎的支持比较弱。
（3）不容易调试。
（Q2）jsonp、 iframe、window.name、window.postMessage、服务器上设置代理页面。
4.JavaScript原型，原型链 ? 有什么特点？
（1）原型对象也是普通的对象，是对象一个自带隐式的 __proto__ 属性，原型也有可能有自己的原型，如果一个原型对象的原型不为null的话，我们就称之为原型链。
（2）原型链是由一些用来继承和共享属性的对象组成的（有限的）对象链。
5.GET和POST的区别，何时使用POST？
GET：一般用于信息获取，使用URL传递参数，对所发送信息的数量也有限制，一般在2000个字符
POST：一般用于修改服务器上的资源，对所发送的信息没有限制。
GET方式需要使用Request.QueryString来取得变量的值，而POST方式通过Request.Form来获取变量的值，
也就是说Get是通过地址栏来传值，而Post是通过提交表单来传值。
然而，在以下情况中，请使用 POST 请求：
无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 没有数据量限制）
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠
6.请解释一下 JavaScript 的同源策略
概念:同源策略是客户端脚本（尤其是Javascript）的重要的安全度量标准。它最早出自Netscape Navigator2.0，其目的是防止某个文档或脚本从多个不同源装载。
这里的同源策略指的是：协议，域名，端口相同，同源策略是一种安全协议。
指一段脚本只能读取来自同一来源的窗口和文档的属性。
为什么要有同源限制？
我们举例说明：比如一个黑客程序，他利用Iframe把真正的银行登录页面嵌到他的页面上，当你使用真实的用户名，密码登录时，他的页面就可以通过Javascript读取到你的表单中input中的内容，这样用户名，密码就轻松到手了。
7.Flash、Ajax各自的优缺点，在使用中如何取舍？
Flash适合处理多媒体、矢量图形、访问机器；对CSS、处理文本上不足，不容易被搜索。
Ajax对CSS、文本支持很好，支持搜索；多媒体、矢量图形、机器访问不足。
共同点：与服务器的无刷新传递消息、用户离线和在线状态、操作DOM
8.什么是闭包？
闭包，官方对闭包的解释是：一个拥有许多变量和绑定了这些变量的环境的表达式（通常是一个函数），因而这些变量也是该表达式的一部分。闭包的特点：
（1）作为一个函数变量的一个引用，当函数返回时，其处于激活状态。
（2）一个闭包就是当一个函数返回时，一个没有释放资源的栈区。
简单的说，Javascript允许使用内部函数---即函数定义和函数表达式位于另一个函数的函数体内。而且，这些内部函数可以访问它们所在的外部函数中声明的所有局部变量、参数和声明的其他内部函数。当其中一个这样的内部函数在包含它们的外部函数之外被调用时，就会形成闭包。
9.javascript里面的继承怎么实现，如何避免原型链上面的对象共享
用构造函数和原型链的混合模式去实现继承，避免对象共享可以参考经典的extend()函数，很多前端框架都有封装的，就是用一个空函数当做中间变量
10.ajax过程
(1)创建XMLHttpRequest对象,也就是创建一个异步调用对象.
(2)创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.
(3)设置响应HTTP请求状态变化的函数.
(4)发送HTTP请求.
(5)获取异步调用返回的数据.
(6)使用JavaScript和DOM实现局部刷新.

其他

1.一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？
（1）查找浏览器缓存
（2）DNS解析、查找该域名对应的IP地址、重定向（301）、发出第二个GET请求
（3）进行HTTP协议会话
（4）客户端发送报头(请求报头)
（5）服务器回馈报头(响应报头)
（6）html文档开始下载
（7）文档树建立，根据标记请求所需指定MIME类型的文件
（8）文件显示
2.为什么换工作？
3.你常用的开发工具是什么，为什么？
4.对前端界面工程师这个职位是怎么样理解的？它的前景会怎么样？
5.加班的看法？
加班就像借钱，原则应当是------救急不救穷

整理总结的一些前端面试题 - WEB前端 - 伯乐在线

整理总结的一些前端面试题，包括了：HTML、JavaScript、CSS，以及一些开放题。

HTML面试题

1.XHTML和HTML有什么区别

HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言
最主要的不同：
XHTML 元素必须被正确地嵌套。
XHTML 元素必须被关闭。
标签名必须用小写字母。
XHTML 文档必须拥有根元素。

2.前端页面有哪三层构成，分别是什么?作用是什么?

结构层 Html 表示层 CSS 行为层 js;

3.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么?

Ie(Ie内核) 火狐（Gecko）谷歌（webkit,Blink） opera(Presto),Safari(wbkit)

4.什么是语义化的HTML?

直观的认识标签对于搜索引擎的抓取有好处，用正确的标签做正确的事情！
html语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；
在没有样式CCS情况下也以一种文档格式显示，并且是容易阅读的。搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO。
使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

5.HTML5 为什么只需要写 !DOCTYPE HTML？

HTML5 不基于 SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照它们应该的方式来运行）；而HTML4.01基于SGML,所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。

6.Doctype作用？标准模式与兼容模式各有什么区别?

!DOCTYPE声明位于位于HTML文档中的第一行，处于html 标签之前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。
标准模式的排版和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。

7.html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和HTML5？

HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。
绘画 canvas
用于媒介回放的 video 和 audio 元素
本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；
sessionStorage 的数据在浏览器关闭后自动删除
语意化更好的内容元素，比如 article、footer、header、nav、section
表单控件，calendar、date、time、email、url、search
新的技术webworker, websockt, Geolocation
移除的元素
纯表现的元素：basefont，big，center，font, s，strike，tt，u；
对可用性产生负面影响的元素：frame，frameset，noframes；
支持HTML5新标签：
IE8/IE7/IE6支持通过document.createElement方法产生的标签，
可以利用这一特性让这些浏览器支持HTML5新标签，
浏览器支持新标签后，还需要添加标签默认的样式：

8.请描述一下 cookies，sessionStorage 和 localStorage 的区别？

cookie在浏览器和服务器间来回传递。 sessionStorage和localStorage不会
sessionStorage和localStorage的存储空间更大；
sessionStorage和localStorage有更多丰富易用的接口；
sessionStorage和localStorage各自独立的存储空间；

9.如何实现浏览器内多个标签页之间的通信?

调用localstorge、cookies等本地存储方式

CSS面试题

1.简要说一下CSS的元素分类

块级元素：div,p,h1,form,ul,li;
行内元素 : span>,a,label,input,img,strong,em;

2.CSS隐藏元素的几种方法（至少说出三种）

Opacity:元素本身依然占据它自己的位置并对网页的布局起作用。它也将响应用户交互;
Visibility:与 opacity 唯一不同的是它不会响应任何用户交互。此外，元素在读屏软件中也会被隐藏;
Display:display 设为 none 任何对该元素直接打用户交互操作都不可能生效。此外，读屏软件也不会读到元素的内容。这种方式产生的效果就像元素完全不存在;
Position:不会影响布局，能让元素保持可以操作;
Clip-path:clip-path 属性还没有在 IE 或者 Edge 下被完全支持。如果要在你的 clip-path 中使用外部的 SVG 文件，浏览器支持度还要低;

3.CSS清除浮动的几种方法（至少两种）

使用带clear属性的空元素
使用CSS的overflow属性；
使用CSS的:after伪元素；
使用邻接元素处理；

4.CSS居中（包括水平居中和垂直居中）

内联元素居中方案
水平居中设置：
1.行内元素
设置 text-align:center；
2.Flex布局
设置display:flex;justify-content:center;(灵活运用,支持Chroime，Firefox，IE9+)
垂直居中设置：
1.父元素高度确定的单行文本（内联元素）
设置 height = line-height；
2.父元素高度确定的多行文本（内联元素）
a:插入 table （插入方法和水平居中一样），然后设置 vertical-align:middle；
b:先设置 display:table-cell 再设置 vertical-align:middle；
块级元素居中方案
水平居中设置：
1.定宽块状元素
设置左右 margin 值为 auto；
2.不定宽块状元素
a:在元素外加入 table 标签（完整的，包括 table、tbody、tr、td），该元素写在 td 内，然后设置 margin 的值为 auto；
b:给该元素设置 displa:inine 方法；
c:父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left:50%；
垂直居中设置：
使用position:absolute（fixed）,设置left、top、margin-left、margin-top的属性;
利用position:fixed（absolute）属性，margin:auto这个必须不要忘记了;
利用display:table-cell属性使内容垂直居中;
使用css3的新属性transform:translate(x,y)属性;
使用:before元素;

5.写出几种IE6 BUG的解决方法

双边距BUG float引起的使用display
3像素问题使用float引起的使用dislpay:inline -3px
超链接hover 点击后失效使用正确的书写顺序 link visited hover active
Ie z-index问题给父级添加position:relative
Png 透明使用js代码改
Min-height 最小高度！Important 解决’
select 在ie6下遮盖使用iframe嵌套
为什么没有办法定义1px左右的宽度容器（IE6默认的行高造成的，使用over:hidden,zoom:0.08 line-height:1px）

6.对于SASS或是Less的了解程度？喜欢那个？

语法介绍

7.Bootstrap了解程度

特点，排版，插件的使用;

8.页面导入样式时，使用link和@import有什么区别？

link属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS;
页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题;

9.介绍一下CSS的盒子模型？

有两种， IE 盒子模型、标准 W3C 盒子模型；IE的content部分包含了 border 和 pading;
盒模型：内容(content)、填充(padding)、边界(margin)、边框(border).

10.CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？ CSS3新增伪类有那些？

id选择器（ # myid）
类选择器（.myclassname）
标签选择器（div, h1, p）
相邻选择器（h1 + p）
子选择器（ul > li）
后代选择器（li a）
通配符选择器（ * ）
属性选择器（a[rel = “external”]）
伪类选择器（a: hover, li: nth – child）
可继承的样式： font-size font-family color, UL LI DL DD DT;
不可继承的样式：border padding margin width height ;
优先级就近原则，同权重情况下样式定义最近者为准;
优先级为:

JavaScript
1
2
!important > id > class > tag
important 比内联优先级高

11.CSS3有哪些新特性？

CSS3实现圆角（border-radius:8px），阴影（box-shadow:10px），
对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）
transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋转,缩放,定位,倾斜
增加了更多的CSS选择器多背景 rgba

JavaScript面试题

1.javascript的typeof返回哪些数据类型

Ｏbject number function boolean underfind;

2.例举3种强制类型转换和2种隐式类型转换?

强制（parseInt,parseFloat,number）隐式（== – ===）；

3.数组方法pop() push() unshift() shift()

Push()尾部添加 pop()尾部删除
Unshift()头部添加 shift()头部删除

4.ajax请求的时候get 和post方式的区别?

一个在url后面一个放在虚拟载体里面
有大小限制
安全问题
应用不同一个是论坛等只需要请求的，一个是类似修改密码的;

5.call和apply的区别

Object.call(this,obj1,obj2,obj3)
Object.apply(this,arguments)

6.ajax请求时，如何解释json数据

使用eval parse,鉴于安全性考虑使用parse更靠谱;

7.事件委托是什么

让利用事件冒泡的原理，让自己的所触发的事件，让他的父元素代替执行！

8.闭包是什么，有什么特性，对页面有什么影响?简要介绍你理解的闭包

闭包就是能够读取其他函数内部变量的函数。

9.添加删除替换插入到某个接点的方法

obj.appendChidl()
obj.innersetBefore
obj.replaceChild
obj.removeChild
10.说一下什么是javascript的同源策略？

一段脚本只能读取来自于同一来源的窗口和文档的属性，这里的同一来源指的是主机名、协议和端口号的组合

11.编写一个b继承a的方法;

function A(name){

this.name = name;

this.sayHello = function(){alert(this.name+” say Hello!”);};

}

function B(name,id){

this.temp = A;

this.temp(name); //相当于new A();

delete this.temp;

this.id = id;

this.checkId = function(ID){alert(this.id==ID)};

}

12.如何阻止事件冒泡和默认事件

function stopBubble(e)

{

if (e && e.stopPropagation)

e.stopPropagation()

else

window.event.cancelBubble=true

}

return false

13.下面程序执行后弹出什么样的结果?

function fn() {

this.a = 0;

this.b = function() {

alert(this.a)

}

fn.prototype = {

b: function() {

this.a = 20;

alert(this.a);

c: function() {

this.a = 30;

alert(this.a);

}

var myfn = new fn();

myfn.b();

myfn.c();

14.谈谈This对象的理解。

this是js的一个关键字，随着函数使用场合不同，this的值会发生变化。
但是有一个总原则，那就是this指的是调用函数的那个对象。
this一般情况下：是全局对象Global。作为方法调用，那么this就是指这个对象

15.下面程序的结果

function fun(n,o) {

console.log(o)

return {

fun:function(m){

return fun(m,n);

}

};

}

var a = fun(0); a.fun(1); a.fun(2); a.fun(3);

var b = fun(0).fun(1).fun(2).fun(3);

var c = fun(0).fun(1); c.fun(2); c.fun(3);

//答案：

//a: undefined,0,0,0
//b: undefined,0,1,2
//c: undefined,0,1,1

16.下面程序的输出结果

var name = 'World!';

(function () {

if (typeof name === 'undefined') {

var name = 'Jack';

console.log('Goodbye ' + name);

} else {

console.log('Hello ' + name);

}

})();

17.了解Node么？Node的使用场景都有哪些？

高并发、聊天、实时消息推送

18.介绍下你最常用的一款框架

jquery,rn,angular等;

19.对于前端自动化构建工具有了解吗？简单介绍一下

Gulp,Grunt等；

20.介绍一下你了解的后端语言以及掌握程度

其它

1.对Node的优点和缺点提出了自己的看法？

(优点）
因为Node是基于事件驱动和无阻塞的，所以非常适合处理并发请求，
因此构建在Node上的代理服务器相比其他技术实现（如Ruby）的服务器表现要好得多。
此外，与Node代理服务器交互的客户端代码是由javascript语言编写的，
因此客户端和服务器端都用同一种语言编写，这是非常美妙的事情。
（缺点）
Node是一个相对新的开源项目，所以不太稳定，它总是一直在变，
而且缺少足够多的第三方库支持。看起来，就像是Ruby/Rails当年的样子。

2.你有哪些性能优化的方法？

（1）减少http请求次数：CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存，图片服务器。
（2）前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数
（3）用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。
（4）当需要设置的样式很多时设置className而不是直接操作style。
（5）少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。
（6）避免使用CSS Expression（css表达式)又称Dynamic properties(动态属性)。
（7）图片预加载，将样式表放在顶部，将脚本放在底部加上时间戳。
（8）避免在页面的主体布局中使用table，table要等其中的内容完全下载之后才会显示出来，显示div+css布局慢。对普通的网站有一个统一的思路，就是尽量向前端优化、减少数据库操作、减少磁盘IO。向前端优化指的是，在不影响功能和体验的情况下，能在浏览器执行的不要在服务端执行，能在缓存服务器上直接返回的不要到应用服务器，程序能直接取得的结果不要到外部取得，本机内能取得的数据不要到远程取，内存能取到的不要到磁盘取，缓存中有的不要去数据库查询。减少数据库操作指减少更新次数、缓存结果减少查询次数、将数据库执行的操作尽可能的让你的程序完成（例如join查询），减少磁盘IO指尽量不使用文件系统作为缓存、减少读写文件次数等。程序优化永远要优化慢的部分，换语言是无法“优化”的。

3.http状态码有那些？分别代表是什么意思？
100-199 用于指定客户端应相应的某些动作。
200-299 用于表示请求成功。
300-399 用于已经移动的文件并且常被包含在定位头信息中指定新的地址信息。
400-499 用于指出客户端的错误。400 1、语义有误，当前请求无法被服务器理解。401 当前请求需要用户验证 403 服务器已经理解请求，但是拒绝执行它。
500-599 用于支持服务器错误。 503 – 服务不可用

4.一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？（流程说的越详细越好）

查找浏览器缓存
DNS解析、查找该域名对应的IP地址、重定向（301）、发出第二个GET请求
进行HTTP协议会话
客户端发送报头(请求报头)
文档开始下载
文档树建立，根据标记请求所需指定MIME类型的文件
文件显示
浏览器这边做的工作大致分为以下几步：
加载：根据请求的URL进行域名解析，向服务器发起请求，接收文件（HTML、JS、CSS、图象等）。
解析：对加载到的资源（HTML、JS、CSS等）进行语法解析，建议相应的内部数据结构（比如HTML的DOM树，JS的（对象）属性表，CSS的样式规则等等）

5.你常用的开发工具是什么，为什么？

Sublime,Atom,Nodepad++;

6.说说最近最流行的一些东西吧？常去哪些网站？

Node.js、MVVM、React-native,Angular,Weex等
CSDN,Segmentfault,博客园,掘金,Stackoverflow,伯乐在线等

7.介绍下你的项目（如果有的话）？并说一下在做这个项目中运用的技术以及遇到的难题是如何解决的

vue.cli的webpack项目前端最新面试题，附答案 | 奔三

1、scss是什么？在vue.cli中的安装使用步骤是？有哪几大特性？答：css的预编译。使用步骤：第一步：用npm 下三个loader（sass-loader、css-loader、node-sass）第二步：在build目录找到webpack.base.

1、scss是什么？在vue.cli中的安装使用步骤是？有哪几大特性？

答：css的预编译。

使用步骤：

第一步：用npm 下三个loader（sass-loader、css-loader、node-sass）

第二步：在build目录找到webpack.base.config.js，在那个extends属性中加一个拓展.scss

第三步：还是在同一个文件，配置一个module属性

第四步：然后在组件的style标签加上lang属性，例如：lang=”scss”

有哪几大特性:

1、可以用变量，例如（$变量名称=值）；

2、可以用混合器，例如（）

3、可以嵌套

2、vue-loader是什么？使用它的用途有哪些？

答：解析.vue文件的一个加载器，跟template/js/style转换成js模块。

用途：js可以写es6、style样式可以scss或less、template可以加jade等

3、请说出vue.cli项目中src目录每个文件夹和文件的用法？

答：assets文件夹是放静态资源；

components是放组件；

router是定义路由相关的配置;

view视图；

app.vue是一个应用主组件；

main.js是入口文件

4、vue.cli中怎样使用自定义的组件？有遇到过哪些问题吗？

答：第一步：在components目录新建你的组件文件（smithButton.vue），script一定要export default {

第二步：在需要用的页面（组件）中导入：import smithButton from ‘../components/smithButton.vue’

第三步：注入到vue的子组件的components属性上面,components:{smithButton}

第四步：在template视图view中使用，<smith-button> </smith-button>
问题有：smithButton命名，使用的时候则smith-button。

前端js的ES6面试题汇总，附答案 | 奔三路学习网

1、把以下代码使用两种方法，来依次输出0到9？ var funcs = [] for (var i = 0; i 10; i++) { funcs.push(function() { console.log(i) }) } funcs.forEach(function(func) { …

1、把以下代码使用两种方法，来依次输出0到9？

 var funcs = []    for (var i = 0; i < 10; i++) {        funcs.push(function() { console.log(i) })    }    funcs.forEach(function(func) {        func()    })

答：分别使用es5的闭包和es6的let

    // ES5告诉我们可以利用闭包解决这个问题    var funcs = []    for (var i = 0; i < 10; i++) {        func.push((function(value) {            return function() {                console.log(value)            }        }(i)))    }    // es6    for (let i = 0; i < 10; i++) {        func.push(function() {            console.log(i)        })    }

2、ES6的模板字符串有哪些新特性？

答：

第一个用途，基本的字符串格式化。将表达式嵌入字符串中进行拼接。用${}来界定。

    //es5     var name = 'lux'    console.log('hello' + name)    //es6    const name = 'lux'    console.log(`hello ${name}`) //hello lux

第二个用途，在ES5时我们通过反斜杠(\)来做多行字符串或者字符串一行行拼接。ES6反引号(``)直接搞定。

    // es5    var msg = "Hi \    man!    "    // es6    const template = `<div>        <span>hello world</span>    </div>`

对于字符串es6当然也提供了很多厉害的方法。说几个常用的。

    // 1.includes：判断是否包含然后直接返回布尔值    let str = 'hahay'    console.log(str.includes('y')) // true    // 2.repeat: 获取字符串重复n次    let s = 'he'    console.log(s.repeat(3)) // 'hehehe'    //如果你带入小数, Math.floor(num) 来处理

3、箭头有哪些新特点？

答：

不需要function关键字来创建函数
省略return关键字
继承当前上下文的 this 关键字

4、以下代码依次输出内容是？

答：

    setTimeout(function() {      console.log(1)    }, 0);    new Promise(function executor(resolve) {      console.log(2);      for( var i=0 ; i<10000 ; i++ ) {        i == 9999 && resolve();      }      console.log(3);    }).then(function() {      console.log(4);    });    console.log(5);

首先先碰到一个 setTimeout，于是会先设置一个定时，在定时结束后将传递这个函数放到任务队列里面，因此开始肯定不会输出 1 。然后是一个 Promise，里面的函数是直接执行的，因此应该直接输出 2 3 。然后，Promise 的 then 应当会放到当前 tick 的最后，但是还是在当前 tick 中。因此，应当先输出 5，然后再输出 4 。最后在到下一个 tick，就是 1 。 “2 3 5 4 1”

5、promise的原理？jquery的ajax返回的是promise对象吗？(百度面试)

答：jquery的ajax返回的是deferred对象，通过promise的resolve()方法将其转换为promise对象。

var jsPromise = Promise.resolve($.ajax('/whatever.json'));

6、promise 只有2个状态，成功和失败，怎么让一个函数无论成功和失败都能被调用？ Promise.all() 是干什么用的，怎么用？

答：promise.all()的使用：
Promise.all方法用于将多个Promise实例，包装成一个新的Promise实例。

Promise.all方法接受一个数组作为参数，数组里的元素都是Promise对象的实例，如果不是，就会先调用下面讲到的Promise.resolve方法，将参数转为Promise实例，再进一步处理。（Promise.all方法的参数可以不是数组，但必须具有Iterator接口，且返回的每个成员都是Promise实例。）

var p =Promise.all([p1,p2,p3]);

    1

p的状态由p1、p2、p3决定，分为两种情况。

    当该数组里的所有Promise实例都进入Fulfilled状态，Promise.all**返回的实例才会变成Fulfilled状态。并将Promise实例数组的所有返回值组成一个数组，传递给Promise.all返回实例的回调函数**。
    当该数组里的某个Promise实例都进入Rejected状态，Promise.all返回的实例会立即变成Rejected状态。并将第一个rejected的实例返回值传递给Promise.all返回实例的回调函数。

阅读全文

0 0