上星期，参加了腾讯前端校招三次面试，一次电话，两次现场面试。问到的知识广度很全面，深度让人也有点无奈，大部分很多东西平时确实没有深究，深究可能也只是看看别人的博客，没有自己敲代码来实现，问到就会有些模糊，答得不是很好。特别是第三面，让腾讯大佬问得哑口无言，当时真的是欲哭无泪。休整了两天，准备将前端面试的知识点整理一下，分享给大家，后面还有很多互联网公司，希望大家也能够找到一份好工作。

如果您喜欢这篇文章，可以点个赞，本文会很长，建议您收藏下来，方便日后回顾

我这里会将所有的知识点都列出来，并附上完整的答案，但是有些问题答案太多，一句两句说不清，我会将我觉得不错的答案链接放上来，以便大家按需取用

-----------底部有更新---------------9.26---------------------放上了三面的问题-------------

下面的知识点主要从基础知识（HTML+CSS）,JavaScript(包括node，angular)，前端综合知识（HTTP，缓存，性能优化，性能监控，跨域等）展开

基础知识

1.html5有哪些新特性、移除了那些元素？（这是一个很经典的问题，基本上都会问到，当然后面会展开部分知识点）
新特性
（1）语意化更好的内容元素，比如 article、footer、header、nav、section，
表单控件，calendar、date、time、email、url、search;
（2）一些功能标签，如绘画 canvas，用于媒介播放的 video 和 audio 元素;
（3）本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失;
sessionStorage 的数据在浏览器关闭后自动删除;
（4）新的技术，如webworker, websocket, Geolocation;
移除的元素：
（1）纯表现的元素：basefont，big，center，font, s，strike，tt，u;
（2）对可用性产生负面影响的元素：frame，frameset，noframes；

2. cookies，session,sessionStroage和localStorage的区别
首先要分清的是，cookies，sessionStroage和localStorage是在客户端，session是在服务器端。服务器端的session机制， session 对象数据保存在服务器上。实现上，服务器和浏览器之间仅需传递session id即可，服务器根据session id找到对应用户的session对象。会话数据仅在一段时间内有效，这个时间就是server端设置的session有效期。服务器session存储数据安全一些，一般存放用户信息，浏览器只适合存储一般数据
其次，是cookies，sessionStroage和localStorage三者的区别
（1）cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。
（2）存储大小限制也不同，cookie数据不能超过4k，同时因为每次Http请求都会携带cookie（这里可能还会追问，cookie是在http报文什么地方，答:cookie是携带在http请求头上的），所以cookie只适合保存很小的数据，比如会话标识sessionStroage和localstroage虽然也有大小限制，但是比cookie大很多，可以达到5M；
（3）数据有效期也不同，cookie在设置的有效期（服务端设置）内有效，不管窗口或者浏览器是否关闭，sessionStroage仅在当前浏览器窗口关闭前有效（也就是说只要这个浏览器窗口没有关闭，即使刷新页面或进入同源另一页面，数据仍然存在。关闭窗口后，sessionStorage即被销毁）；localStroage始终有效，窗口或者浏览器关闭也一直保存；
（4） Web storage 支持事件通知机制，可以将数据更新的通知发送给监听者。如下：

window.addEventListener("storage", function (e) {
        alert(e.newValue);
    });

Web Storage带来的好处：
减少网络流量：一旦数据保存在本地后，就可以避免再向服务器请求数据，因此减少不必要的数据请求，减少数据在浏览器和服务器间不必要地来回传递。
快速显示数据：性能好，从本地读数据比通过网络从服务器获得数据快得多，本地数据可以即时获得。再加上网页本身也可以有缓存，因此整个页面和数据都在本地的话，可以立即显示。
临时存储：很多时候数据只需要在用户浏览一组页面期间使用，关闭窗口后数据就可以丢弃了，这种情况使用sessionStorage非常方便。

3.meta标签有哪些？点这里

4.布局方面参考这一篇

5.BFC概念及使用BFC概念及使用

6.flexbox 阮一峰

7.CSS如何实现居中CSS实现居中的7种方法

JavaScript

1.数据类型判断
尤其是Object.prototype.toString，是个神器更多点这里

var a = "iamstring.";
var b = 222;
var c= [1,2,3];
var d = new Date();
var e = function(){alert(111);};
var f = function(){this.name="22";};
alert(Object.prototype.toString.call(a) === ‘[object String]’) -------> true;
alert(Object.prototype.toString.call(b) === ‘[object Number]’) -------> true;
alert(Object.prototype.toString.call(c) === ‘[object Array]’) -------> true;
alert(Object.prototype.toString.call(d) === ‘[object Date]’) -------> true;
alert(Object.prototype.toString.call(e) === ‘[object Function]’) -------> true;
alert(Object.prototype.toString.call(f) === ‘[object Function]’) -------> true;

2.XHR具体底层原理(要求手写ajax)

function ajax(){
    var xmlhttp;
    if(window.XMLHttpRequest){
        xmlhttp = new XMLHttpRequest();
    }else{
        // code for IE6, IE5
        xmlhttp = ActiveXObject("Microsoft.XMLHTTP");
    }

    //判定执行状态
    xmlhttp.onreadystatechange = function(){
        /*
        readyState
            0: 请求未初始化
            1: 服务器连接已建立
            2: 请求已接收
            3: 请求处理中
            4: 请求已完成，且响应已就绪
        status
            200:请求成功
            404:未找到
            500:服务器内部错误
        */
        if (xmlhttp.readyState==4 && xmlhttp.status==200){
            document.getElementById("myDiv").innerHTML=xmlhttp.responseText;//获得字符串形式的响应数据
        }
      }
    xmlhttp.open("Get","url",true);

    //设置头信息
    xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

    //将信息发送到服务器
    xmlhttp.send();    

}

3.Js事件机制？IE和谷歌，火狐有何区别？
下面这段代码是兼容各个浏览器，特别注意的是移除事件时传参必须和绑定时保持一致，尤其是回调函数不能使用匿名函数

var EventUtil ={
    addHandler: function(element, type, handler){
        if(element.addEventListener){//标准浏览器webkit，ff
            element.addEventListener(type, handler, false);
        }
        else if(element.attachEvent){//ie
            element.attachEvent('on' + type,handler);
        }else{
            element['on' + type] = handler;
        }
    },
    removeHandler: function(){
        if(element.removeEventListener){
            element.removeEventListener(type, handler, false);
        }else if(element.detachEvent){
            element.detachEvent('on' + type, handler);
        }else{
            element['on' + type] = null;
        }
    }
}

最好能找到javascript高级程序设计这本书，里面有一章专门讲事件
我也来说说js的事件机制

4.什么是闭包?堆栈溢出有什么区别？内存泄漏? 那些操作会造成内存泄漏？怎么样防止内存泄漏？
闭包：就是能够读取其他函数内部变量的函数。
堆栈溢出：就是不顾堆栈中分配的局部数据块大小，向该数据块写入了过多的数据，导致数据越界，结果覆盖了别的数据。经常会在递归中发生。
内存泄露是指：用动态存储分配函数内存空间，在使用完毕后未释放，导致一直占据该内存单元。直到程序结束。指任何对象在您不再拥有或需要它之后仍然存在。
造成内存泄漏：
setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏。
闭包、控制台日志、循环（在两个对象彼此引用且彼此保留时，就会产生一个循环）
防止内存泄露：
(1)不要动态绑定事件；
(2)不要在动态添加，或者会被动态移除的dom上绑事件，用事件冒泡在父容器监听事件；
(3)如果要违反上面的原则，必须提供destroy方法，保证移除dom后事件也被移除，这点可以参考Backbone的源代码，做的比较好；
(4)单例化，少创建dom，少绑事件。
学习Javascript闭包

5.js继承
这一块是js的重点，要求能够手写
JS实现继承的几种方式
想把js整个原型，继承这一块搞清楚的，可以看看这一系列文章
深入理解javascript原型和闭包

6.es6中let和const
const定义的变量不可以修改，而且必须初始化。
（1）let的优点是严格了变量声明，不会允许你在同一作用域下重复声明，同时也加入了块级作用域的概念，比如
if(*){这使用let就是一个作用域}和for(){let a = };每一次循环体中声明的a是相互独立的分属于不同的作用域;
（2）const除了let的作用还多了：改变值或者指针的时候const会报错。

7.自己实现一个Promise
手把手教你实现一个完整的 Promise
promise异步编程的原理

8.express和koa区别
这个要对node的框架比较熟悉，下面是大牛的解答
Express和koa各有啥优缺点
 Node.js框架之express与koa对比分析

9.angular双向绑定实现
构建自己的AngularJS，第一部分：Scope和Digest

10.正则匹配
JS正则表达式完整教程

11. js中this的指向，如何改变，call和apply和bind的区别
在JavaScript中this可以是全局对象、当前对象或者任意对象，这完全取决于函数的调用方式，this 绑定的对象即函数执行的上下文环境
情况1：如果一个函数中有this，但是它没有被上一级的对象所调用，那么this指向的就是window(非严格模式，在严格版中的默认的this不再是window，而是undefined)
情况2：如果一个函数中有this，这个函数有被上一级的对象所调用，那么this指向的就是上一级的对象。
情况3：如果一个函数中有this，这个函数中包含多个对象，尽管这个函数是被最外层的对象所调用，this指向的也只是它上一级的对象

// 作为对象方法调用
var test = {
    a : 5,
    b : 6,
    sum : function () {
        return this.a + this.b;     // 此处this = test
    }
}
alert(test.sum());     // 11

// 作为函数调用
a = 4;
b = 3;
function sum(){
    return this.a + this.b;         // 此处this = window
}
alert(sum());      // 7

var o = {
    a:10,
    b:{
        a:12,
        fn:function(){
            console.log(this.a); //12
        }
    }
}
o.b.fn();

var o = {
    a:10,
    b:{
        // a:12,
        fn:function(){
            console.log(this.a); //undefined
        }
    }
}
o.b.fn();

var o = {
    a:10,
    b:{
        a:12,
        fn:function(){
            console.log(this.a); //undefined
            console.log(this); //window
        }
    }
}
var j = o.b.fn;
j();

对于构造函数，this会指向new出来的实例

function Fn(){
    this.user = "萌爷";
}
var a = new Fn();
console.log(a.user); //萌爷

如果返回值是一个对象，那么this指向的就是那个返回的对象，如果返回值不是一个对象那么this还是指向函数的实例。

function fn()  
{  
    this.user = '萌爷';  
    return 1;
}
var a = new fn;  
console.log(a.user); //萌爷

function fn()  
{  
    this.user = '萌爷';  
    return function(){};
}
var a = new fn;  
console.log(a.user); //undefined

如何改变

new操作符会改变函数this的指向问题
首先new关键字会创建一个空的对象，然后会自动调用一个函数apply方法，将this指向这个空对象，这样的话函数内部的this就会被这个空的对象替代。
apply或call，bind
bind与apply、call最大的区别就是：bind不会立即调用，其他两个会立即调用，如果多次调用bind，那么多出来的次数都是无效的
都是用来改变函数的this对象的指向的，第一个参数都是this要指向的对象，都可以利用后续参数传参。
将上述一个例子改造一下
```
var a = {
 user:"萌爷",
 fn:function(){
     console.log(this.user); //萌爷
 }
}
var b = a.fn;
var c = b.bind(a);
c();
```
前端综合知识
1跨域
同源策略是由Netscape提出的著名安全策略，是浏览器最核心、基本的安全功能,它限制了一个源(origin)中加载文本或者脚本与来自其他源(origin)中资源的交互方式
，所谓的同源就是指协议、域名、端口相同。
简单说来，只有当协议，域名，端口相同的时候才算是同一个域名，否则均认为需要做跨域的处理。

解决方法

JSONP( Script 标签)（不支持Post）
CORS（Access-Control-Allow-Origin）（存在兼容问题，仅支持 IE 10 以上）
跨域资源共享 CORS 详解
Server Proxy(当你需要有跨域的请求操作时发送请求给后端，让后端帮你代为请求，然后最后将获取的结果发送给你)
location.hash+iframe(数据直接暴露在了 url 中且数据容量和类型都有限)
window.name
postMessage
document.domain(主域相同而子域不同)
参考这篇文章关于跨域，你想知道的全在这里

2.HTTP综合知识
（1）状态码
HTTP 响应中包含一个状态码，用来表示服务器对客户端响应的结果。

状态码一般由3位构成：

1xx : 表示请求已经接受了，继续处理。
2xx : 表示请求已经处理掉了。
3xx : 重定向。
4xx : 一般表示客户端有错误，请求无法实现。
5xx : 一般为服务器端的错误。

比如常见的状态码：

200 OK 客户端请求成功。
301 Moved Permanently 请求永久重定向。
302 Moved Temporarily 请求临时重定向。
304 Not Modified 文件未修改，可以直接使用缓存的文件。
400 Bad Request 由于客户端请求有语法错误，不能被服务器所理解。
401 Unauthorized 请求未经授权，无法访问。
403 Forbidden 服务器收到请求，但是拒绝提供服务。服务器通常会在响应正文中给出不提供服务的原因。
404 Not Found 请求的资源不存在，比如输入了错误的URL。
500 Internal Server Error 服务器发生不可预期的错误，导致无法完成客户端的请求。
503 Service Unavailable 服务器当前不能够处理客户端的请求，在一段时间之后，服务器可能会恢复正常。

（2）HTTP请求
看这一篇足以网络基础知识之 HTTP 协议

3.缓存机制
HTTP缓存机制详解

4.当我们在浏览器中输入 www.baidu.com/** 访问百度的时候浏览器做了哪些事情

首先 Chrome 搜索自身的 DNS 缓存。(如果 DNS 缓存中找到百度的 IP 地址，就跳过了接下来查找 IP 地址步骤，直接访问该 IP 地址。)
搜索操作系统自身的 DNS 缓存。(浏览器没有找到缓存或者缓存已经失效)
读取硬盘中的 host 文件，里面记录着域名到 IP 地址的映射关系，Mac 电脑中位于 /etc/hosts。(如果前1.2步骤都没有找到)
浏览器向宽带运营商服务器或者域名服务器发起一个 DNS 解析请求，这里服务器有两种方式解析请求，这在稍后会讲到，之后浏览器获得了百度首页的 IP 地址。
拿到 IP 地址后，浏览器就向该 IP 所在的服务器建立 TCP 连接(即三次握手)。
连接建立起来之后，浏览器就可以向服务器发起 HTTP 请求了。(这里比如访问百度首页，就向服务器发起 HTTP 中的 GET 请求)
服务器接受到这个请求后，根据路径参数，经过后台一些处理之后，把处理后的结果返回给浏览器，如果是百度首页，就可以把完整的 HTML 页面代码返回给浏览器。
浏览器拿到了百度首页的完整 HTML 页面代码，内核和 JS 引擎就会解析和渲染这个页面，里面的 JS，CSS，图片等静态资源也通过一个个 HTTP 请求进行加载。
浏览器根据拿到的资源对页面进行渲染，最终把完整的页面呈现给用户。
如果浏览器没有后续的请求，那么就会跟服务器端发起 TCP 断开(即四次挥手)。

从输入 URL 到页面加载完成的过程中都发生了什么事情？
5.性能优化
性能优化肯定是参考雅虎前端优化的35条军规

6.浏览器工作原理详解
这篇文章是以色列开发人员塔利·加希尔的研究成果浏览器工作原理详解，强力推荐，深度好文

到此为止，已经把大部分内容涵盖到了，想看基础点的可以点这里html+css，js基础

本篇文章主要是针对于理论多一些，对于面试时要求手写一些案例，或者是一些小算法，本篇文章只是略有涉及，希望能够在校招面试中能够帮到大家

有人在评论中询问了三面的问题，我在写文章有些问题没有放上来，主要是是自己没怎么实践过，我在下面会列出来，大家有好的答案也可以分享出来
1.node异常捕获 Node.js捕获异常的一些探索
2.前端性能监控
3.js继承+闭包，手写了组合继承
4.js实现双向绑定
5.为何不用koa，而用express，区别？
6.项目架构图
7.负载均衡
8.node与java等比较

如果您喜欢这篇文章，可以点个赞，本文会很长，建议您收藏下来，方便日后回顾

如有任何错误，欢迎指正！如有任何问题，欢迎跟我交流！掘金技术征文

腾讯校招前端三面,虐完继续撸|掘金技术征文

基础知识

JavaScript

前端综合知识