2020前端面试经验总结

最新推荐文章于 2024-08-13 21:39:51 发布

小哥白尼~

最新推荐文章于 2024-08-13 21:39:51 发布

阅读量866

点赞数 2

本文链接：https://blog.csdn.net/dzw1991/article/details/105039889

版权

看过很多篇面试经验的分享，大多都是关于面试考察问题的总结。比起问题总结，我更想结合自己的面试经验谈谈我对面试的理解。

总共面了大大小小20家公司，总结下从面试的准备阶段到面试结束中遇到的问题，希望能帮到正在或准备找工作的同学。

用一句话概括找工作的感受：重在基础（技术知识及原理），丰富项目（项目经验及细节），理解全面（技术及产品），积累是前提（工作中积累和总结），会说很重要（表达到位）。

面经可以作为公司面试范围的参考，但不代表全部，因为每个人的情况都不一样，所以考察的内容也不完全相同。有的人简历上有写node，就会问到node；有的人简历上写到redux，就会被问到redux。如果你这些方面确实没看过，可以如实回答。因此不能把面经当作唯一参考，只复习面经出现的问题，还是应该根据自己简历上的内容再进行扩充学习和准备。

有的同学不知道该怎么准备，下面就结合面试的基本流程讲讲每阶段怎么准备，同学可根据这几方面充分准备。

目录

简历
基础知识(一面)
JS篇
CSS(3) & HTML(5) 篇
Vue篇
React篇
网络篇
工程化
算法篇

项目经验(二面)
领导面(三面)
HR面(四面)
聊天
谈薪

其他补充
大公司与小公司面试区别
其他推荐的面试经验总结

总结 + 反思

简历

简历是公司的敲门砖，只有通过第一步的简历筛选，才能到下一步，所以首先应该把简历写好，不要出现错别字或者语句不通的地方。如果有条件，可以让有经验的朋友帮你看看简历，力求把简历改到最好。

网上有太多教你如何写简历的文章，百度搜索如何写简历，结果的前几页每篇多多少少都有不一样的地方。有的人推荐你把技术点罗列出来，有的人则不推荐，看到最后你可能都困惑了。

从我的角度来看，这些要根据你自己的实际情况区分。比如技术点的罗列：如果你的项目经验能充分体现你所涉及的所有技术点，你可以不写；但如果不能充分体现出来，罗列出来就很有必要。这些问题你有必要自行斟酌取舍。

但是归根结底，简历的核心应该是你的能力体现，是展示你能力的地方，所以要能把核心表达出来。

下面推荐三篇我认为比较好的介绍如何写简历的文章。

https://blog.csdn.net/lhjuejiang/article/details/80936199

https://github.com/nzbin/resume-boilerplate

https://juejin.im/post/5c3fd2a06fb9a04a0b2272ad

基础知识(一面)

基础知识通常会在一面中考察，包含从html(5)、css(3)、js到node、webpack、vue、react所有可能考察的知识点。但通常不会考察的太深入，是对知识广度的了解(但不代表你只需知道是什么)。

基础知识不仅要知道是什么，更要明白怎么用，为什么这么用（深入理解最好）。死记硬背能应付一时，但遇到需要深入谈谈的面试官，死记硬背真的作用不大。所以每一个知识点最好能做到理解透彻，讲的明白。

有的面试官可能对某个知识点稍作变形，比如问你数组的slice方法，然后让你自己实现，所以不能只会用。

更重要的一点，对基础知识的理解深度，影响到你的职级评定(当然这个评定也会根据工作年限)。举个例子，同样一个知识点，如果你知道是什么：初级水平；如果能知道怎么用：中级水平；如果知道原理并能自己实现：高级水平；再进一步，如果知道背后牵扯到其他的哪些知识点并能对这个知识点有自己的见解：专家水平。

这个可能有点夸张，不一定就能达到专家，但是你应该明白我的意思，对一个问题的理解深度，决定你的水平，影响你的级别。

比如我在面试中就遇到面试官给我了一道基本的变量声明以及函数调用的题，虽然简单，但是要求是把从创建到结果输出过程中尽可能的所有包含的知识点说出来。所以同学们在准备阶段有必要把每个知识点都搞清楚，讲的明白。

下面是一个博主总结的基础知识点（包含css，js，js高频手写题，vue题，以及http、浏览器题目），我觉得总结的很好，也是面试中常会出现的问题。大家有必要每个点过一遍，但是一些解答不是很充分，在此基础上补充了自己面试中遇到的基础问题以及对应的比较好的问题解答。

某博主面试总结: https://www.cnblogs.com/chenwenhao/p/11267238.html#_label6

JS篇

继承: https://www.cnblogs.com/ranyonsue/p/11201730.html

原型链: https://www.jianshu.com/p/7119f0ab67c0

this指向: https://blog.csdn.net/YongxiaWu/article/details/90208556

设计模式: https://www.cnblogs.com/imwtr/p/9451129.html#o2

call, apply, bind, new实现: https://www.jianshu.com/p/097f995178e1

防抖截流实现: https://www.cnblogs.com/momo798/p/9177767.html; https://www.jianshu.com/p/c8b86b09daf0

let, var, const 区别: https://www.lizenghai.com/archives/38199.html

event loop: https://juejin.im/post/59e85eebf265da430d571f89#comment; https://juejin.im/post/5b498d245188251b193d4059; https://juejin.im/post/5c3d8956e51d4511dc72c200

promise使用及实现: https://segmentfault.com/a/1190000016550260

promise并行执行和顺序执行: https://www.jianshu.com/p/dbda3053da20

闭包: https://zhuanlan.zhihu.com/p/22486908

垃圾回收和内存泄漏: https://juejin.im/post/5cb33660e51d456e811d2687

数组方法: https://www.cnblogs.com/jiuxia/p/11509616.html; https://www.runoob.com/jsref/jsref-obj-array.html

数组乱序, 数组扁平化: https://www.cnblogs.com/guolao/p/10173537.html; https://www.cnblogs.com/wind-lanyan/p/9044130.html

事件委托: https://www.cnblogs.com/liugang-vip/p/5616484.html

事件监听: https://zhuanlan.zhihu.com/p/73091706

事件模型: https://blog.csdn.net/qq_36356218/article/details/88342639

axios: https://www.jianshu.com/p/73f6362889c8; https://cloud.tencent.com/developer/article/1483445

typescript: https://www.tslang.cn/docs/home.html

CSS(3) & HTML(5) 篇

flex布局: http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

垂直居中: https://www.jianshu.com/p/907f99004c3e; https://www.cnblogs.com/AdamCenWeb/p/10769655.html

清楚浮动: https://www.jianshu.com/p/4d0bc8776122

bfc: https://www.jianshu.com/p/0d713b32cd0d

三栏布局: https://www.cnblogs.com/webtaotao/p/11031723.html; https://www.jianshu.com/p/7d7cf4f051ee

两栏布局: https://blog.csdn.net/weixin_40122996/article/details/82120331

动画(考察频率很高): https://www.cnblogs.com/www-123456/p/10837619.html; https://segmentfault.com/a/1190000017505968?utm_source=tag-newest; https://www.jianshu.com/p/ec150b884a3b; https://www.jianshu.com/p/780340d8945b

盒模型: https://www.cnblogs.com/axinmir/p/10565433.html; https://www.jianshu.com/p/824eed8ce119

HTML5新特性: https://www.jianshu.com/p/37c0b1eb4145; https://www.php.cn/html/html5-draganddrop.html

Vue篇

vue数据双向绑定原理: https://www.cnblogs.com/libin-1/p/6893712.html; https://github.com/DMQ/mvvm#_2; https://segmentfault.com/a/1190000014616977?utm_source=channel-hottest; https://www.cnblogs.com/wangjiachen666/p/9883916.html

vue computed原理: https://my.oschina.net/u/3060934/blog/3070487

vue编译器结构图: https://www.processon.com/view/link/5cb4b6dce4b02a2858ed34a3

生命周期: https://www.jianshu.com/p/ff8f9bbc7551

vue组件通信: https://segmentfault.com/a/1190000019208626

mmvm模式、mvc模式理解: http://www.ruanyifeng.com/blog/2015/02/mvcmvp_mvvm.html

vue dom diff: https://www.cnblogs.com/wind-lanyan/p/9061684.html

vuex: https://blog.csdn.net/qq_36407748/article/details/102778062; http://www.uml.org.cn/ajax/201812071.asp

vue-router: https://www.jianshu.com/p/4295aec31302; https://www.cnblogs.com/gaosirs/p/10606266.html; https://www.cnblogs.com/keepfool/p/5690366.html

React篇

dom-diff: https://blog.csdn.net/one_girl/article/details/81086289

列表key属性: https://segmentfault.com/a/1190000020907327?utm_source=tag-newest

jsx原理(createElement): https://www.jianshu.com/p/6f3473d395c0

react-router原理: https://www.jianshu.com/p/d991a4a55ae1

redux原理: https://segmentfault.com/a/1190000019849834?utm_source=tag-newest

生命周期: https://www.jianshu.com/p/b331d0e4b398

react setState: https://www.jianshu.com/p/89a04c132270

react组件通信: https://blog.csdn.net/qq_25134721/article/details/86705083

性能优化: https://www.sohu.com/a/252022209_609503

网络篇

HTTP1, HTTP2, HTTPS: https://www.jianshu.com/p/dc64f8063abf; https://www.jianshu.com/p/11c2614ef3f2

浏览从输入网址到回车发生了什么: https://www.cnblogs.com/aiqiqi/p/11479185.html

前端跨域: http://www.imooc.com/article/291931#comment; https://juejin.im/post/5c23993de51d457b8c1f4ee1

浏览器缓存: https://www.jianshu.com/p/54cc04190252

cookie, session, token, localstorage, sessionstorage: https://blog.csdn.net/cadi2011/article/details/88350383;https://cloud.tencent.com/developer/article/1432573; https://www.jianshu.com/p/7a24216cf187

xss和csrf攻击: https://github.com/dwqs/blog/issues/68

状态码: https://blog.csdn.net/qq_35689573/article/details/82120851

TCP连接(三次握手, 四次挥手): https://www.cnblogs.com/welan/p/9925119.html

工程化

工程化这方面由于自身经验有限，所以只罗列了自己面试中被问到的一些问题，不代表全部。

webpack loader & plugin: https://www.codercto.com/a/30917.html

性能优化: https://mp.weixin.qq.com/s?__biz=MzUxMTcwOTM4Mg==&mid=2247483962&idx=1&sn=f9337ad983c6303811eb43d07d9f23d5&chksm=f96edb93ce195285943211e645cc683989826abdaaa8ab0b073a20761369ed04843c835c50b7#rd

nodeJs: https://www.jianshu.com/p/3416a0bf309c

错误监控: http://fex.baidu.com/blog/2014/05/build-performance-monitor-in-7-days/; https://cdc.tencent.com/2018/09/13/frontend-exception-monitor-research/

算法篇

作为前端虽然对算法要求不高，但是刷的多了，慢慢对前端有新的认识：越是厉害的前端对算法、数据结构、系统的要求越高，所以掌握好算法是有必要的。

前端面试基本上前两轮都会问算法，但不一定就是leetcode上的算法题，有可能考察一些具体问题的实现，比如我被问到类似https://www.cnblogs.com/weiyf/p/5996671.html这个问题（但是是居中显示）、数组转树https://www.cnblogs.com/mengfangui/p/10494601.html等这类问题。这类题我觉得还是比较容易的，只要平常代码写的多。

除此类问题外，就会考到leetcode上的算法题。每个人遇到的情况都不同，就算是同样面试头条，有的人问的就比较简单，有的人问的就比较难，还有人可能不问。所以面试不仅是靠准备，也有一部分运气成分，但前提是你得准备好(不要心存侥幸!!!万一问到了呢)。

一开始刷算法确实很累，10道题没几道能一下想出来的。但是不要紧，刷多了就有感觉了，要坚持下来。每天可以用简单题先”热脑“，找点感觉，如果能解出来，就会有信心了，然后尝试中等难度和高难度。不推荐开始就刷难题，做不出来的话会备受打击。

算法不求全部刷完（如果时间充足就多刷，平均是100道左右）重点是总结规律。easy，medium，hard都要刷（hard可以少刷，但不能不刷）。要把每种数据结构都刷到（不要心存侥幸!!!我就被问到双链表，之前没有刷，结果尴尬了），重要题型要重复刷，尝试多种解法，总结各类题型规律。

leetcode: http://leetcode-cn.com/

经典排序算法: https://www.cnblogs.com/onepixel/articles/7674659.html

算法总结: [https://github.com/CyC2018/CS-Notes/blob/master/notes/Leetcode%20%E9%A2%98%E8%A7%A3%20-%20%E7%9B%AE%E5%BD%95.md](https://github.com/CyC2018/CS-Notes/blob/master/notes/Leetcode 题解 - 目录.md)

算法总结2: https://github.com/Alex660/Algorithms-and-data-structures/blob/master/algo/%E9%93%BE%E8%A1%A8_linkedList.md

链表题总结: https://segmentfault.com/a/1190000019331129

动态规划讲解: https://zhuanlan.zhihu.com/p/107479278

二叉树: https://www.jianshu.com/p/d1133ef8bc0e

项目经验(二面)

项目经验很重要，也是作为面试考察以及职级评定的标准，对一个问题能否有自己的理解，并给出具体的实现方案是决定你是否能通过面试的重要一环。

一般都会或多或少问你一些技术上的问题，但相较于一面的广度来说更倾向于深度。比如mvvm模式是如何实现的，setState原理，可能会让你写代码来实现，但一般都是说出思路即可。当然如果你能把代码流畅的写出来，对你的评分肯定不会低。所以这也是我说的理解程度影响你的评级。

其次，会问的问题包含但不限于

项目开发流程
技术架构
说说做的的比较好的项目(突出你的贡献的地方)
你担任的角色(多见于三面)
项目中的收获
项目亮点
项目中遇到的难点
简历中的某一个点干什么的，怎么实现的(比如用了css，具体某个属性和值要能说出来)，如果让你自己做你会怎么做 (根据你简历问)
组件设计与实现思路
兼容性问题
底层原理
性能优化
工程化
前端学习规划(多见于三面)
算法(有的面试官会问)

技术架构: https://baijiahao.baidu.com/s?id=1644157510252074127&wfr=spider&for=pc

项目亮点: https://www.jianshu.com/p/c0dbe77cf2db

项目中遇到的难点: https://segmentfault.com/q/1010000020123595/a-1020000020124141

项目经验的文章: https://juejin.im/post/5b55f79a5188251aa30c69ed

领导面(三面)

对于所面试的部门和产品要有充分的了解，涉及的问题包含但不限于

职业规划
产品理解
项目理解
技术广度
学习方式
稳定性
工作方式等

具体来说就是对于你现在以及未来的考察，根据你对技术的广度与深度的认知以及项目的理解（包含项目开发，多人协作，工作方式等）结合学习规划、稳定性等问题，对你现在以及未来潜力进行评估，判断你是否适合所面试团队并能为团队带来贡献。

这些问题要提前想清楚，不要回答的模棱两可，最后可能把自己坑了。

这一面很少考察算法以及技术和项目，可以和面试官充分交流，了解所在团队工作习惯、学习氛围、所要做的项目等。毕竟之后你要来所面试的团队，有必要提前了解清楚，避免之后不适应。

HR面(四面)

聊天

和hr聊天我认为也是需要技巧的，有的该说，有的不该说。如果非常期待进这家公司，就要表现出诚意，之前我在和一家HR聊天的时候，当问及还有其他offer没，我说了一堆在面的公司，现在想想，觉得不是很好，如果非常想进一家公司，至少得表现出在等着这家公司的答复，让别人感受到你真的想进。

其次，有的问题，比如问你绩效、离职原因之类的，最好能快速回答，如果想了半天，或者含含糊糊，别人有可能认为你不诚实，最后有可能把你拒掉。这些问题要提前准备好，最好给你朋友说说，如果别人认可你说的，至少说明你的理由能说得过去。所以，在HR面之前这些问题都要提前想清楚。

谈薪

这也是面试考察的很重要一点，是否能对自己有正确的判断。要根据自己的实际情况（包括面试情况以及工作年限）以及市场相应职位薪资来要。一般来说是涨幅10%-30%，但也不是绝对，你可以要50%、60%，甚至double，但要结合市场行情以及自身情况（包括面试情况以及工作年限）。

举个例子，如果感觉面试的很好，可以尝试按市场高点的价位来要（50%, 60%）；如果差了点，适当降低10%-20%（30%，40%）；如果再差，就再降点。**切记薪资不能乱要!!!**有一家还挺大的公司要的太高了(60%，当时面试的自我感觉不是特别好，但看了别人说的，要高点会被砍，所以就直接报了这个价)，结果直接被拒了:(。

当然每个公司情况都不一样，有的公司最高能double，有的可能最高才50%，所以这些问题都需要提前了解清楚，可以问问有了解的朋友，或在相关平台咨询。

总结的话：不要看别人要多少你就要多少，要根据自己实际情况，每个人的自身水平和面试情况都是不一样，别人说的也不一定准，可以参考。在面试后自我评估基础上，增加幅度或减少幅度，但切记不要乱要!!!，对方很可能不和你谈，直接把你拒了(因为不止你一个人投这个岗位，还有很多人和你竞争，别人性价比你高，除非你很自信你的优势比别人高很多)。如果在和想去的公司hr谈之前能有别的offer最好，这样就可以用这个offer来argue。

其他补充

大公司与小公司面试区别

从我面的小公司和大公司来看，大公司套路少，流程基本一致，一面基础知识，二面项目经验，三面领导面，四面hr面。

而小公司一般对项目细节抓的深，上来一面就可能开始问你项目经验，包括用到的什么技术，怎么实现的，具体原理是什么，兼容性问题有哪些，设计模式在开发中怎么用的，某个模块或页面设计思路及实现方案。对具体实践，技术实现的要求比较高。

所以面试大公司和小公司都要分别做好相应的准备。

其他推荐的面试经验总结

JS问题总结: https://github.com/mqyqingfeng/Blog

基础考察点: https://juejin.im/post/5c6ad9fde51d453c356e37d1; https://juejin.im/post/5e5a759c6fb9a07ca301def9; https://juejin.im/post/5d387f696fb9a07eeb13ea60#heading-3; https://juejin.im/post/5ba34e54e51d450e5162789b

前端面试总结: https://cloud.tencent.com/developer/article/1467728

前端知识点总结: https://yuchengkai.cn/

前端知识点总结: https://github.com/Advanced-Frontend/Daily-Interview-Question/blob/master/datum/summary.md

这个博主写的三篇文章都值得前端的同学们反复阅读，不仅仅是为了面试，也是对自己职业的规划与反思: http://jartto.wang/2018/03/29/audition-of-f2e/; http://jartto.wang/2018/04/29/audition-of-f2e-2/; http://jartto.wang/2018/04/29/audition-of-f2e-3/

项目经验: https://blog.csdn.net/FL63Zv9Zou86950w/article/details/100012513

总结 + 反思

从刚开始第一家面试被虐得体无完肤到后来面试都说出答案和自己的理解，其中经历了痛苦、煎熬、不相信自己、快要放弃到最后有所顿悟、收到多个offer，所以只要坚持下去，前方总会有希望。

总结来说，面试面试 = 基础知识 + 项目经验 + 技术理解, 产品理解 + 表达技巧 + 运气，我们控制不了运气，就得在其他方面多下功夫，每一部分都要能充分的准备，深入的准备。当然表达技巧这个要长期锻炼才能提升，不过我们可以对每一部分都提前进行讲述练习，并进行一定量扩充。
目前来看，面试对知识点考察的越来越细，有的需要你能写框架的某个实现原理(源码的了解程度)，所以每一个考察点都要深入的学习和理解，只死记硬背是没有办法应付全部面试的。未来可能面试就要能手写框架了。

虽然我们面试一方面是为了找一份不错的工作，或者能够升职加薪，但是从另一方面来说也是对我们自身的考察。而我看来，面试成功的前提不仅仅在于面试前的学习，更重要的是平时工作中对于每一个知识点、每一次项目开发、每一个遇到的难点的积累、实践与总结，仅仅靠面试前的突击是无法走的更远的。

想要走的更远，就必须抓住每一次机会，不能放过遇到的问题。在每一次项目中提升自己，突破自己，并且要记得总结反思，希望所有的技术同学能共勉。

以上就是我对于面试的看法，如果有其他问题，欢迎大家留言。