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

时间 2019-11-05

标签腾讯前端三面继续技术征文栏目腾讯繁體版

原文原文链接

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

若是您喜欢这篇文章，能够点个赞，本文会很长，建议您收藏下来，方便往后回顾css

我这里会将全部的知识点都列出来，并附上完整的答案，可是有些问题答案太多，一句两句说不清，我会将我以为不错的答案连接放上来，以便你们按需取用html

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

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

基础知识

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；java

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 支持事件通知机制，能够将数据更新的通知发送给监听者。以下：node

window.addEventListener("storage", function (e) {
        alert(e.newValue);
    });复制代码

Web Storage带来的好处：
减小网络流量：一旦数据保存在本地后，就能够避免再向服务器请求数据，所以减小没必要要的数据请求，减小数据在浏览器和服务器间没必要要地来回传递。
快速显示数据：性能好，从本地读数据比经过网络从服务器得到数据快得多，本地数据能够即时得到。再加上网页自己也能够有缓存，所以整个页面和数据都在本地的话，能够当即显示。
临时存储：不少时候数据只须要在用户浏览一组页面期间使用，关闭窗口后数据就能够丢弃了，这种状况使用sessionStorage很是方便。git

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

4.布局方面参考这一篇es6

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等比较

若是您喜欢这篇文章，能够点个赞，本文会很长，建议您收藏下来，方便往后回顾

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