来自offer杀手的前端面试攻略

踩在巨人的肩膀上...

楼主最近面试的公司不算是很多，但是我有一个几个人的小团体。个人感觉如果本篇文章的所有知识点你都掌握了，百度阿里腾讯网易京东，这五个公司，或许需要一部分运气和其他的条件，但是这篇文章能保证你基础知识的面试都没有问题，其他任何一线、二线或者是三线公司.....应该都是秒杀的。因为我和另外俩个兄弟都已经面试了。迄今为止，我们已经收到以下这些公司的offer，百度、有赞、携程、滴滴、蘑菇街、北森云、头条、360。（楼主双非院校的渣渣，能这样感觉已经还好了....）当然还有许多不算是真正互联网公司的offer、还有许多几百人规模的小的公司。大概就是这些吧。至于腾讯和阿里，我和另外俩个兄弟都是现阶段没有参加面试的。因为我们3月份这些都挂过了。当时太天真。就乱投乱面了，很多东西没有准备好。所以gg了，而且现在还不让再投简历了。所以就没去尝试，如果有其他小伙伴过了的话请给这篇文章加上一个你们自己的知识点，我会随时查看回复并且添加相应的部分。让我们打造一个最全面的前端面试攻略吧~

一、算法部分

前端算法部分还是很简单的，至今我也没问过什么比较难的算法问题。如果你算法不好就可以直接告诉面试官。不需要过多作假，面试官其实也很聪明的，如果你作弊很快就能发现的。

1、基本排序的方式

冒泡、快排、桶排、堆排序、归并排序、插入排序。

基本也就这些吧。最重要的还是快排和插入排序和堆排序。自己多写几次，有递归形式的再好好看一下使用循环形式达到结果的形式，基本也就没什么问题了。

2、二分搜索等。搜索方式或许是因为我太诚实了吧。。一般我就直接说我的算法不是很好。直接告诉他大多用过就是二分搜索了。其他的面试官也就不怎么问了，毕竟前端岗位。

3、二叉树遍历相关，例如前序遍历中序遍历后序遍历等，深度优先搜索和广度优先最好掌握。还有二叉树的反转。暂时能想到的就是这些吧。TopK问题也有问过。

个人感觉除了以上这些应该就没有什么了。有些面试官曾经直接就告诉我，他大概也就会这些吧。再多了也就不怎么了解了。

二、计算机网络部分

计算机网络部分知识点个人感觉不是特别多，基本面试官也只是简单问一下，以下这些你能说明白就没什么大问题了。

1.最重要的就是http协议。毕竟前端大多都和http协议搞事情。http协议大多包含了以下几种问题吧

http报文解构都包含什么(大致就是那个三部分，请求实体、请求头、请求行这些)

http协议常用的状态码

http头部关于缓存的字段

http和https的区别

http1.0 1.1 2 大致的区别

除此之外暂时想不到其他的了。缓存字段和200、404、304之类非常常用的状态码一定要记住。

2.tcp的三次握手和四次挥手。除此之外再就没什么了。

3.udp和tcp的比较等等

三、 html和css基础部分。

这个部分的知识点非常多非常多。一时半会也不可能将所有的都囊括在内，先列出非常重要的吧。

1.盒模型概念

2.position定位属性和相关的关系，例如relative占用文档流，而absolute和fixed却不占用，还有relative和absolute结合使用会有变化，一定要搞懂。

3.display相关属性，常用的block、inline、等等。都要弄明白。

4.IFC和BFC问题。

5.双飞翼布局。

6.垂直居中、水平居中的多种方式和方法，这俩个都有很多的方法，尽量每个都记下来4个方法以上。应该就没问题了。但是要注意能说明白每一个方式方法的限制。例如我们使用line-height的时候需要知道高度等等。而且还有要注意字体的居中和块级元素等居中是不一样的。

7.圣杯布局(别人考过，我基本没被问过。)

8.rem、em的使用。

9.less等预处理语言。

10.媒体查询。

11.vh和vw，当然这个考的实在太少。

12.h5的语义化部分。这个其实在面试上是比较重要的一个问题，例如楼主蘑菇街当时就有一个问题问我实现删除线怎么办。当然有html基础标签和css样式了。他就问哪种更好。当时楼主一脸蒙蔽的说html的方式更好。最后被问原因的时候说了一大堆不重要的，最后面试官告诉我是在语义化的方面考虑的。。。

13.h5 的web worker 还有websocket。这些不需要你真正使用过，但是要明白他们在什么场景下使用。就可以了。自己拿菜鸟教程上代码的实验一下就可以了。websocket内部还有一些关于协议的部分。要自己弄懂。

14.h5的语义化标签都有什么，大致看一下，记住一部分。还有新加的例如video这些东西。

15.css3的都很重要，包括transform、transition、animate这些都好好看一下。

16.css选择器的优先级，也就是class id 元素选择器这些的优先级计算。

17.css样式表引用的优先级部分。例如link引用或者行内都设置了字体颜色，问字体此时显示什么字体。

18.清除浮动。

19.canves 某些特别的公司部门可能需要，但是我至今没有被问过。

20.css实现响应式的方式。

除此之外暂时也想不到其他的了。如果再有想到会再次添加。

四、js部分

这个是重中之重了，如果你js掌握的非常非常好，面试官的问题你都回答上来了，那么html、css部分问题没答上也没有什么。毕竟js才是前端的重点。

1.js的作用域作用域链。

2.js的原型原型链，来一张巨经典的图片。能看懂或者你给面试官讲明白就ok了。还有instanceOf那些判断。

3.js的dom元素操作插入删除等等。

4.js的垃圾回收机制。(问的比较少)。

5.js中String或者Array或者Math内部常用的方法。这些在菜鸟教程上都可以看的。

6.ajax请求详细怎么实现，和其中的响应状态。

7.js的基础类型和引用类型

8.事件委托、事件冒泡、事件捕获。

9.addEventlistener和正常的onclick=()=> 的区别

10.js中new和object.creat区别

11.除了js中DOM的基础方法还有BOM中的方法。比如通过js直接取出相应的url的端口号，或者是协议名，或者url整体。

12.浏览器输入url之后最后网页渲染出来经过了什么

13.js跨域实现。我大概回答的有webpack和nginx等代理跨域。CORS和jsonp等。一般这些就可以了

14.浏览器的同源策略

15.浏览器的回流和重绘，就是reflow那些东西。

16.call、bind、apply区别。

17.js实现继承怎么实现。原理是？ 这个其实和上面的原型链原型是一起的。百度一下，多记住几种方式。

18.请求get和post的区别

19.js方法参数argument

20.深拷贝和浅拷贝，还可以引入序列化。还要明白序列化的缺点。

以下都是es6

21.promise，最好自己声明一个构造函数尝试去实现，这样面试官会觉得你学的很认真。如果实在自己写不出来上网查一下promise的实现原理或者源码应该就有。

22.闭包

23.let和const，最好全面一点解释，包括可以说一下变量提升引入一下var，和这些在什么场景下去使用。

24.generator

25.es6加上symbol的基础数据类型

26.set类型可以实现数组去重等。

27.箭头函数 重点，很多时候都会问 包括里面的简便写法和内部的this指针指向等等

28.解构赋值

29.es6新增加的正则符号。

30.或者直接问你es6有什么新加的东西，说得越多越好

以下就是亮点部分了，面试总要有一些亮点告诉面试官你基础很好。因为其实和面试官拽技术没必要的，人家真正搞开发的，真的拽技术能甩你8条大马路(当然真正的大大大佬请无视我这句话)，而且我是面向咱们很多还是在蒙圈的同学们写的。都是很基础的东西，毕竟不能说所有人都瞄准bat进发对吧？

1.js单线程和js具体怎么实现异步的。大概的技术名词有事件队列、执行栈、宏任务、微任务。具体的各位老铁们百度吧。。

2.webworke做分线程

3.vue-router原理实现。多看源码之类的

4.nginx负载均衡。redis共享数据等等等。

5.asm.js（这个我想很多人没听过都。。这个是我自己看的一个技术。比较有意思的。因为面试官总会问你最近在看什么比较新的技术这样的问题，专门准备的）。

因为我大多都是使用vue和node等的技术栈，所以vue也会问很多(看完vue官方文档，基本就没问题了)

1.vue的生命周期

2.双向数据绑定。这个最好也是自己实现一下 理解更深

3.vue父子组件传递参数

4.vue传递参数方法

5.vue自定义组件

6.vue自定义指令

7.vuex组成和原理

8.vue-router的原理，例如hashhistory和History interface这些东西要弄明白。其实看一下源码就好了，看不懂可以直接看解析的相关技术博客。

9.vue的seo问题

10.预渲染和ssr

11.生命周期内create和mounted的区别

12.监听watch等等

13.登录验证拦截

还有一些其他的问题。

1.跨域。

2.网络安全，大多就是csrf和xss看明白原理和解决方式就可以了。

3.数据结构的栈、队列、链表、等等这些基础的数据结构要明白是什么。

4.设计模式

5.数据库相关操作语句(这个问得比较少，但是基础的数据库语句还是要学的，还是菜鸟教程。看一下就行了)

6.linex基础指令，一般很少问。就算问也是问你知道什么指令

7.bootstrap实现栅格的原理

8.webpack相关配置。例如跨域之类的

大概也就是这些知识点吧。除此之外，你在面试阶段不需要写太多的项目经验，除非你非常厉害写了很多，参加了n多的导师的上线项目，当然很多普通的同学们也都不会有那么多机会去实践，但是都没有什么好怕的。之前滴滴的前端leader和我说，其实你们实习生的问题都很同一，项目经验很少，我们其实更要求的是你处理问题的方式，和你扎实的基础。不需要那么多其他的东西。而且可能很多人会挂在最后一面，其实很多时候不是你的技术问题。是你不敢去说。你会多少东西，就以你自己的见识和知识去尽力解决，就算你真的不知道，哪怕知道一点点，也尝试着去表达。我记得我有一个终面的leader就是说，这个问题本身也不是给你准备的，就是想看看你敢不敢表达，还有你的推理和类比能力怎么样。大概的套路基本是一面纯纯基础技术面试、二面也可能是纯基础技术面试，或者给你出很多情景题，让你用你的知识去解决，如果是这样的话基本不用怕的。因为公司的实习生的要求都比较低的，毕竟大家经验都不可能很多。否则还去实习干嘛。尽自己能力表现就行了，还有一点非常非常重要。和面试官打好关系，如果你觉得没问题，微信号必须要，维护好之后的关系，如果他在部门内部力挺你，你技术还不是很差，基本就稳了。我们这里是真的有一个实际例子的。和一面面试官聊得非常好，之后一面面试官力挺他，到三面就不到5分钟，基本就是聊天，什么都没问。直接发offer，具体公司我就不说了，BAT之一，而且是部门唯一一个实习生。据说那个实习生预选名单里面985的非常多，还有研究生也非常多。但就是选我们这里的人了。另外我得经验是，当你准备差不多不知道再准备什么，就去面试吧。在面试中找自己不会的，最快速度去总结，最好当天就弄懂，有的时候之后的面试官会问你之前面试有没有不会的问题，然后回去以后又是怎么解决的，反正面试官的套路非常非常深，非常非常的多。你就尽量表现的积极向上一点，找一个好的工作不是问题。