前端面试题 & 面试官心得-技术圈

前言

去年这个时候，团队扩张，花了很多精力招人。感谢给力的HR小姐姐，几个月时间里筛了数百份简历给我，每天都要面试很多场。我通常负责技术面，只考核候选人的技术水平，不问期望薪资也不画饼。面得多了，也积累了一点面试经验，撰文分享一下，如何考核一个候选人的技术实力，以及自己对技术面试的一些思考。

一场技术面试通常30分钟左右。前端的知识有点杂，通常得跳跃性地问几个方面的面试题，才能给出全面的评价。技术面试的答案和得分点，应该有明确的标准，回答到什么程度都得有个评价标准。候选人较多的时候，多个面试官并发面试，更得有统一的标准，给候选人更客观公平的评价。

近年行业内卷，大厂很喜欢面试造火箭，上班拧螺丝，目的是考核一个候选人的能力上限。我们是没什么名气的小厂，招人以实用为主，尽量不问算法题。但大部分面试题还是以原理为主，了解原理的人，遇到问题至少知道怎么用搜索引擎找到方案，工作能力会更靠谱一些。

受限于篇幅，本文不列出完整的面试题库，加粗的为重点问题，其他的不一定会问。有时候还会看面试者做过什么项目，针对他熟悉的知识点问些更有深度的。总体的思路都是按照下面的几个部分，分别挑几道题来提问。

电话约面试的提问

很多简历写得天花乱坠，精通各种技术，掌握多门语言，开发各种牛逼的项目。实际注了多少水，单从简历上是看不出来的。在电话约面试之前，提几个简单的问题，可以筛选掉一些明显不合适的候选人，避免浪费双方时间面试。电话里的问题，表达要简答清晰，答案要明确固定，通常我会问这些：

1.放在HTML里的哪一部分JavaScripts会在页面加载的时候被执行？

A、文件头部位置；B、文件尾；C、<head>标签部分；D、<body>标签部分

（正确答案D）

2.队列和栈的区别是什么？

答案：栈先进后出，队列先进先出

3.Http永久重定向的状态码是什么？

答案：301

4.二叉树的三种遍历方式是什么？

答案：前序遍历，中序遍历，后序遍历

并不是所有的候选人都需要在电话中提问这几个问题。涉及到简历怎么写的问题，本篇就不展开讨论了。

web原理及性能优化

终于把候选人约过来了。自我介绍后，先第一个问题：一个网页从输入网址到打开，中间经历了哪些步骤？

（有的面试官也会换一种说法：如果网页打不开，如何调试找出问题？）

接着问一个更深入的问题：在上述的加载过程中，有哪些可以做性能优化的地方？

这两个问题涵盖的知识点非常全面，我习惯在面试最开始的时候提问，可以快速判断一个候选人大概的技术层次，方便后面做针对性的提问。

作为所有前端面试中的必问题，网上有大量的文章，此处就不赘述。必须回答的得分点有：URL解析，DNS，TCP（三次握手），HTTP请求响应过程，HTML、CSS、JS的加载顺序，DOM树、CSS树、渲染树，重绘和回流等。每个加载的流程都对应有性能优化的思路，如：DNS寻址原理和预解析；TCP连接有慢启动、拥塞控制所以要复用连接；HTTP2/3优化请求效率；资源压缩、合并、减少请求等减少请求数据量；CDN、http缓存、前端缓存等；减少回流等渲染性能优化；worker、WebAssembly等脚本性能优化；服务端渲染、预加载、懒加载、骨架屏优化用户体验等等。

性能优化的点非常多，不要求答全，我会更看重面试中在之前的项目中实践过哪些优化方案，而不是只停留在理论基础。比如经常有人回答雪碧图、小图编码为Base64，我就会反问，这么做在性能上有什么缺点，有什么更好的替代方案？（答案可以参考之前的博客《http2性能优化》）。如果能回答上来，是很大的加分项。

网络协议

讲一下http缓存的优先级？

POST和GET的区别？

常见的http状态码？

常用的跨域方案有哪些？

常用Content-Type及应用？

如何删除一个cookie？

讲下一个https协议建立连接的过程？

主要考核http协议，其他不做要求。跨域可能会问到jsonp有什么限制，CORS简单请求和复杂请求的差别；http状态码问完301和302的差别，可能会再问307是干嘛用的。如果面试者了解其他的网络协议（webSocket、webRTC之类的）并能讲出原理，会是一个加分项。

JavaScript

JS里有哪些数据类型？

什么是闭包？

JS里有哪些继承方式？

JS的异步编程的方案有哪些？

防抖和节流的区别？

为什么会有精度计算问题？

什么是事件委托？

考核JS的熟悉程度。闭包可能会问执行上下文的概念；继承会问原型链相关的问题；异步会问Promise和async、await实现原理的区别，再问宏任务、微任务、event loop等。

Vue/React/小程序

虚拟Dom是什么？Vue/React通过哪些方案来优化虚拟Dom更新真实dom的性能？

Vue/React/小程序有哪些生命周期？嵌套组件中，生命周期的触发顺序是怎样的？

跨组件通信的方案有哪些？

服务端渲染有什么优势和劣势？

Vue的watch和computed有什么区别？分别应该在什么时候使用？

Vue为什么 v-for 和 v-if 不建议⽤在⼀起？

vue-router hash 模式和 history 模式有什么区别？

vue.set是用来做什么的？为什么vue 3.0不需要了？

vue.nextTick是用来做什么的？

什么是高阶组件？

React hook是用来干嘛的？

React Fiber 是什么？

近年来流行的框架，看面试者熟悉哪个就针对性地提问，考察面试者是否真正掌握原理。去年Vue3是必问的，可以顺便了解一下面试者对热门技术的态度。我们的要求是至少掌握Vue/React中的一个。如果对前端框架有深入了解，对架构、工程化、同构有自己的理解，可以再加分。

CSS

有哪些清除浮动的方法？

有哪些垂直居中的方法？

CSS选择器的优先级？

CSS一般问得很少。常用的没什么难度，生僻全靠搜索引擎。安排几个简单的CSS题目，一般在面试者过度紧张时，用来调节情绪，缓解尴尬的气氛。

网络安全

能答上XSS攻击和CSRF攻击的原理，并知道常见的防范方式即可。其他的安全防范问题很多，有所了解的话是加分项。

之所以安排这个题，倒不是说网络安全在工作中有多重要。我自己做网站十几年，遇到过许多的网络安全攻击，每次都让我学到了很多知识，技术得到成长。面试前端会问这个问题，主要是看面试会不会去关注网站的各个方面，而不是把责任都推给后台和运维的同事。

现场编程题

什么，不是说好的不内卷，面试不考算法题么？然而我还是准备了一些现场编程题，有时候会让面试者任选一题，在纸上手写代码。

本环节纯粹用于拖时间。有时候下轮面试官在开会之类的，需要等待较长时间，为避免让面试者太无聊，给个编程题打发时间。

实现一个大数计算的方法。
实现一个符合Promise A+规范的Promise库，只需实现then方法。
找出一个文本串中出现次数最多的文本段。如果出现概率一样多，取最长的文本；如果出现概率和长度一样，取得第一个文本。不考虑单个字母，以2位字符串作为最小的文本段单元。

以上三题参考腾讯不同部门的前端面试上机题，如果是大厂面试，肯定是必须做出来的。还有一些leetCode上找的算法题，此处就不列出来了。好在我们要求不高，做不出来也没关系，真的只是用来拖时间。

总结

从自我介绍开始，都一直在考核候选人的沟通能力、表达能力。问最近学习过哪些新技术，通过什么渠道学习，考核候选人的学习能力，以及对技术的态度。问之前公司的加班情况，遇到瓶颈时如何解决，了解候选人的抗压能力。技术虽然是硬实力，但在工作中，软实力更为重要。

面试也远远不止考核候选人能力这么简单。给面试者一个顺畅的流程，舒适的面试环境，礼貌、友善的交流，能塑造雇主品牌，在行业内留下一个好的口碑。要介绍一下技术团队和技术栈，让候选人知道进来以后大概会负责哪方面的工作。对于优秀的候选人，通过提问的深度和广度，展现自己的技术实力，也是吸引候选人的有效方式。面试是一个双向选择的过程，面试官也需要不断修炼和成长。

最后，特别感谢所有与我在面试中相遇的有缘人。不管最终有没有成为同事，感谢您抽空参加面试，在交流中互相学习，共同成长。