前言
最近下定决心辞职，于是便走上了打破自己舒适圈这条路，道路很曲折，也很艰难，很多时候想放弃，但是最终还是咬咬牙坚持了下来，就目前的战果来看，还算得到了应该有的回报。面了大概11家，覆盖小 中 大厂三个维度，拿到了6个offer，其中两个一面过了二面没有去。两个挂在了一面，所以总结一下，因为我自己面试之前也是经常看一些大佬的面经，比如 三元 呆呆 蔡徐坤 的总结，所以自己也想做一点贡献回馈社区。因为是第一次写文章，可能还是有很多问题，希望多多包涵，以后会经常贡献自己一份力量～
11家包括 网易 阿里 两个创业公司 兑吧 大搜车 大华 海康 大型电商公司 涂鸦智能 谊品生鲜 网易和兑吧挂在了一面，阿里目前还在走流程，等三面，大搜车和谊品生鲜一面过了 二面没去，其他的offer都拿到了。目前来看涂鸦智能给的base最高，而且技术氛围和前景我还是比较满意的，所以接了涂鸦的offer，不出意外应该是去涂鸦了～
总结
在面试了不同类型的公司后，明显可以感觉到大厂特别是阿里对于项目经验更加看重，一些基础的问题基本上不会问太多，主要是深挖你简历中的亮点，所以对于想去阿里的老哥们，项目一定要丰富，要提前准备好平时项目中的难点和解决方案以及解决之后对项目有什么改进，遵守STAR法则，把自己想说的提前手写一边或者列个大纲在脑海里过至少一边，比如我总结了三个 虚拟列表 动态表单 二次封装的table 不过很多人基本上遇到的问题是平时项目平淡无奇 没有什么特别难的东西，一般遇到了也是直接上github找轮子 然后快速解决。说实话我之前也是，不过面试是面试，所以可以稍微“丰富”一下自己的经历，比如你看到了一些比较好的解决方案，觉得很优秀，并且很贴合你的项目或者确实能解决之前你的痛点的地方，可以多看几遍，一定要理解，然后自己写几个demo，下次面试就可以说自己用这个方案解决了xxx。。。。前提是一定要理解啊，要考虑到别人深挖的情况，比如虚拟列表 可能别人会问你这个可是窗口的高度是根据item的固定高度来计算的，如果每个item高度都不固定该怎么办。。 或者如果让你去兼容万恶的ie该怎么做。。为什么要用transform来进行y轴的平移，有什么好处等等，这些都是要提前想到的，最好的方法是准备两套方案，模拟你们团队解决问题的过程，比如我会说，拿到这个需求的时候我们准备了两套方案，第一套是比较蠢的监听页面可视高度，以及scrollTop 然后计算滚动是否到底部，然后动态拼接数据到后面。但是会遇到问题是用户体验并不好，因为并没有解决如果数据量超过了几万的时候页面卡顿，因为在拼接的过程中涉及到dom的操作，所以页面一直在回流。然后引出第二套方案，是参考了better-scroll的源码实现，自己实现了一套方案，然后开始说第二套方案巴拉巴拉。。。具体可以看这篇文章juejin.cn/post/684490…
而相反像中小厂，更多问的是基础，所以逃不过的，如果你想存在侥幸心理的话，万万不可，虽然只是一场面试，但是因为人的心理原因，面试挂了会对人造成打击，会让你怀疑。。。对就是会怀疑自己是不是太垃圾，我在面完兑吧之后就是这样的心理，感觉被虐的很惨。所以像网络协议 js css html基础 es6 v8垃圾回收 webpack 浏览器相关 一定要至少反复看几遍，最好是边看边记笔记，在自己记忆比较模糊的时候用手写代替阅读，记笔记的好处不用我多说，一个是加深记忆，二是自己在快要面试的时候也可以知道自己哪些是容易忘记的 就去看笔记好了。接下来推荐一些我面试的时候经常看的几篇文章。
好文推荐，建议把下面的几个都收藏
2万字 | 前端基础拾遗90问 建议阅读n+1遍
HTTP灵魂之问 建议多看几遍，重点提取跨域 状态码 cookie http1.0 http1.x http2.0之间的区别和特点
TCP协议灵魂之问 建议提取重点 TCP UDP的区别，UDP应用场景 特点 TCP三次握手四次挥手
浏览器灵魂之问 建议提取 全是重点 对 全是重点，建议多读几遍
三元的基本上都是精品好文，不过需要自己找一下重点，因为面试准备时间有限，你不可能把所有的都记得清清楚楚，所以要针对性的阅读。
霖呆呆的近期面试128题汇总 基本上都是会问到的题目，我就不一个一个造轮子 去重复了。
遇到的问题
1、浏览器缓存 说说强缓存和协商缓存的区别和原理（必问）
2、浏览器url输入到页面呈现的过程
3、浏览器本地存储 cookie storage indexDB的区别（必问）
4、cookie相关 用途 前端读写cookie 以及针对cookie的攻击 xss csrf（必问）
5、es6用过哪些 并且针对你用过的单独提问 比如set map promise 箭头函数 let const async的实现以及特点解决了promise哪些痛点 class类的实现以及跟es3 es5用原型继承+构造函数继承有什么区别和关系，你可以说说原型继承+构造函数继承吗。（必问）
6、单点登录做过吗？有什么方案可以解决 换种说法，登录了天猫 淘宝也能自己登录 是怎么实现的？
7、跨域有哪些方式，问这个的时候记得发散一下，每个都说一下原理和实现，比如JSONP的原理 CORS的重点api 反向代理nginx是怎么实现跨域的 说这三个就更够了 其他的poseMessage只用提一下就好 (必问)
8、防抖 节流实现 原理以及用途（必问）
9、TCP UDP区别 UDP用途 场景 特点 TCP三次握手四次挥手（三次握手四次挥手一定要说详细点，比如客户端发起链接发送一个SYN包给服务端，服务端接收到SYN包后发送ACK包告诉我已经接收到开启请求...... 这样尽量用一个包的形式 FIN ACK SYN的形式，以及2MSL的时间...2MSL是4分钟等 这样尽量具体的形式 不要说什么客户端发起请求，服务器接受请求 然后告诉客户端xxx 这样非常模糊，没有具体的传了什么 显得很抽象） （必问）
10、http1.0 1.x 2.0的区别和各自的特点...这个可以发散一下思维，比如别人问你2.0你可以说出特点1234 然后补充1.0 1.x的内容 （必问）
11、https协议 对称加密非对称加密的过程 ca证书....这个只被问过一次 不过还是要了解整个过程 相比http只是在安全上做了更多的工作等等
12、v8的垃圾回收，新生代 老生代空间。这个别人在问基本类型和引用类型的时候可以在说存储空间 栈堆概念的时候引出来
13、前端性能优化...这个能说的太多了，http方面 webpack打包方面 浏览器缓存方面 cnd静态文件方面 使用代理服务器方面等等 建议说全一点 (必问)
14、首屏白屏优化 js底部 css头部 避免阻塞 ssr配置首页+spa其他页面等等 计算首屏白屏的方式 fp之类的 (必问)
15、浏览器回流重绘（必问）
16、flex弹性盒子 flex container flex item 以及各自可以设置的属性。 延伸出来的圣杯布局 两栏 三栏布局 自适应 rem+flex 实现移动端适配 （必问）
17、水平垂直居中 (必问)
18、css3动画用过哪些属性
19、webpack plugin loader 工程化 webpack的一些优化 包括4.x之后的Tree-Shaking 多线程打包相关的 (必问)
20、原型对象 原型链 （必问）
21、oop 函数式编程...函数编程问的比较少，oop面向对象编程的优点还是要了解的
22、js事件循环机制 eventloop流程 (必问)
23、闭包 闭包的优点和缺点 （必问）
24、js作用域 (必问)
25、前端模块化 commonjs amd cmd es6moudle之间的区别 （必问）
26、this的指向 延伸出apply/call/bind 最好能手写 (必问)
27、BFC的特点以及用途 （必问）
28、vdom有哪些优点，vdom一定比手动操作dom快吗？为什么
29、diff算法 二叉树相关
30、react 16.x引入新的调度机制fiber以及具体是怎么实现的...这个算是我的杀手锏，因为我面试之前花了一段时间看了16.8的源码，大概知道fiber调度的整个流程，rootfiber fiberroot updateQueue deadline requestIds等相关概念，以及使用新的fiber带来的优点，包括因为引入了fiber 不建议使用的三个生命周期以及引入的两个新的生命周期等。所以如果你是主攻react 要在fiber上下足功夫 这样不仅可以在深度上带来亮点，也可以显得你不仅仅是局限在用而已。
31、hooks用过吗？usecallback useMemo memo之类的概念，useCallback是否要大规模使用，一定会带来好处吗？ 如果你用过hook一定要对usecallback下足功夫，目前问过我hook的基本上都在useCallback上深挖了一下。
32、为什么不建议在条件判断中使用hook 原因是什么？
33、react怎么实现双向绑定？
34、react setState内部实现以及同步异步相关
35、react单向数据流好处，react相比vue的有哪些优点？又有哪些缺点？你怎么看待react和vue两个框架？...这个基本上是给你挖坑，回答的时候要谨慎，不要带有强烈的主观意识，对vue抨击之类的，或者说vue低端，因为两个框架都有各自的优点，react只是相比来说 社区发展以及推崇的理念不同而已 要记住尤大的话，争论哪个框架牛逼没有意义，框架牛逼不代表你牛逼不代表你的项目就牛逼，还是要看个人实力以及你对框架的理解的。
36、如果让你实现一个弹窗组件怎么实现？...各个方面考察你组件开发能力
37、路由懒加载相关
38、history hash 两个路由的区别，以及history实现的原理是什么？ (必问)
39、路由传参方式有哪些？
40、node相关 ...这个就看你个人对node的掌握程度了，我不太行 node了解的不多，不过就目前的形式，node在资深和高级前端中还是一个加分项
可能不是很完备，不过只是挑了一些频率高的讲出来了，因为我觉得很多人总结的已经很好了，我也不想重复的造轮子，更多的我是想分享一下我的心路历程～
心路历程
我觉得我的情况应该跟大多数人一样，最开始在一个小公司里面混吃等死，可能一年两年三年甚至更久，然后习惯了那种天天上班敲无聊的业务代码，摸摸鱼，下班回家打游戏看剧 生活也是美滋滋没有什么压力，拿着不多不少的工资。我很理解这种舒适的感觉，不过还是危机感把，多看看脉脉（虽然里面很多吹牛皮的），仔细想象自己当初的梦想，无论是进阿里 字节还是当一个leader，我反正是真的生生的让自己从一个游戏迷坚持了一个多月 台式机电脑都没开过，回家就是打开笔记本或者ipad开始看题目，记笔记，看大佬的文章 总结 反复看，再总结。 如果厌倦了就告诉自己 向钱看齐。。。虽然很俗，但是真的很有用。。。等坚持了一个星期左右，就习惯了这种感觉，其中可能会有很多诱惑，比如朋友同事叫你出去玩儿啊，或者打游戏啊什么，反正自己心里有个谱就行，哪个比较重要。
如果是准备面试，最好至少花一个月的时间去准备，这个时间就很好，不短不长，时间也比较充分（前提是不涉及到刷leetcode），因为每个人记忆点是需要反复刺激的，所以不要看过一遍就觉得自己会了，学会配合笔记，然后每隔一周再回去看笔记或者文章加深记忆，这样在面试的时候才会回答流利。像我现在对那些基础的东西都是想都不用想直接回答出来，因为已经形成了一个记忆网络了。而且切记不要在好不容易准备了之后 却不去面试 然后放弃了 又跑去玩儿，这样一点用没有，所以成年人要对自己做的决定负责，尽量不要找借口 或者放弃，既然决定了还是要果断一点～
关于面试被挂，很正常，因为当你一切都准备好了出去面试总会遇到跟你不对味的面试官，失败了很宝贵，总结一下在哪个方面准备的不充分，或者表达的有问题。如果你要冲击大厂，尽量先找几个练练手，一来失败了又收获，二来成功了 给你信心，并且也有offer保底了。
关于个人亮点 因为我在上家公司是前端的小小的leader，带的人不多，不过也有一些自己的经验，在管理上面，比如cross code review 小的teach talk 代码规范，工作分配，同事相处，技术引进，依赖升级，比如react15.x升级16.8.x，组件抽离等等，如果你也是小公司的小前端从一个人干起，最好总结一下这些管理或者为团队做的贡献，虽然不是一个大的team，但是至少让别人觉得你是有管理上面的经验的，并且告诉别人，这个只是你的附属优点，他们可以不用，但是我需要告诉你们我有这方面的能力。 同时你也要表现出你对开源社区以及开源思想的追随， 比如希望给社区做贡献，给react vue提rp，或者主动解决部分issue之类的想法。还有就是关于学习的深度和广度，我个人是先追求深度，因为浅尝而止对个人没有什么太大的帮助，比如你一直在用react 至少在react的原理以及源码上下足了功夫，了解其内部实现以及未来的fb团队在对react团队有哪些可能改进的方向之后，再去看别的比如vue或者ag。或者在某个方向，比如可视化或者大屏之类的，先深度再广度。其实这些都是让面试官或者hr知道，你是有很大的学习能力以及自驱能力，让你在众多的竞争者中有更多的亮点
关于算法，有一个题目问的比较多，n个整数组成的数组，取出最大的5个，怎么取，最优解是什么，这个题我被问了几次都没回答上，因为我算法确实没来得及下足功夫，这个是topK的思路，具体可以搜下。如果你要准备算法，那就要再花一个月去刷leetcode，至少在每个数据结构的经典题上刷足。 算法我就不说了，我自己本身就不太行，只会个二叉树，链表，动态规划之类的比较esay的题目。。。
结语
因为第一次写文章，没有列提纲 只是思路到哪里就写到哪里，有不好的地方欢迎指出来👏。 有建议或者意见可以在下面告诉我，我会及时回复以及改正。以后请多多关照～
对了跳槽真的很爽，所以如果你缺少驱动力，想想，我跳槽后总包翻了快一倍。。。如果你也想或者觉得现在这个家公司不满意，马上开始准备吧！！
本文使用 mdnice 排版
