5年腾讯技术官告诉你前端校招面试该怎么准备？

柔光的暖阳◎ 2022-10-28 10:12 193阅读 0赞

## **前言** ##

我是团队的一个老校招面试官，这几年陆陆续续虐过不少校招学生，遇到过很优秀聊得很开心的，遇到过让我直皱眉头的，遇到过很懂套路的，也遇到过不善表达的。讲真，面试前我还常感到紧张，我怕一个好苗子因为我的笨问题没得到充分挖掘而错过。

于是我经常在想：**什么才是好问题，前端校招该考察些什么？**

现又是一年校招季，想和大家分享下我的心得。

声明：

1.  我一直都是一面面试官，所以我的思考见解是针对一面的，或者说技术面；
2.  每个面试官都有自己的面试风格，比如我们团队就有一位同样负责一面的，特别喜欢问图形算法。所以你看了我的文章，觉得准备好了，结果被面试官问懵逼了，别怪我哈，我可不负责。我跟大家聊些通用部分；
3.  比我更有经验的面试官比比皆是，本文只是我的个人拙见，不足之处望大家斧正。

## **核心思路** ##

校招面试和社招面试会有什么不同？我用一张图说明：

![ff0616af93e57c8a85c67fa2d3303fdf.png][]

**校招面试应侧重潜力考察**。在前端这条路上，学习能力看你能否走得快，学习欲望看你能否走得远。

那校招时前端知识就不重要了？

也很重要。只是说实话，当你工作后学校学到的知识可能都用不上了，因为工作场景跟你自学场景关注点不同。举个例子，你在学校做前端开发，一般是单打独斗，但工作之后你就经常要跟别人合作开发，此时统一代码规范、代码要怎么组织才能减少耦合适合多人协作，就要列入考虑中。又比如，你自己做前端可能会想着怎么用新技术怎么做更酷炫，而工作业务中则关注怎么处理兼容性，怎么监控并减少脚本错误保持项目稳定等等。更别提你在学校中怎么学到如海量用户场景的开发经验？

所以对于校招生，相比不完善的前端知识积累，我们更关注潜力。前端基础是你获得面试机会的资本，而从前端知识掌握情况折射出来的潜力特质，才是你脱颖而出的亮点。

怎么考察这些虚的能力？下文将做展开。

而作为校招生的你，要思考的是怎么把自己的学习能力和学习欲望证明出来，这比简历上你写了多少行React代码有分量的多。特别是面试大公司。

## **面试流程** ##

这个就百花齐放了，我自己在不断面试中总结出一套面试流程：

![00f9556ec6bbfdeea50a89357078a6ae.png][]

基本上这样一套下来，面试者的整体水平也就很清楚了。不同公司团队的一面流程不同，但上面几点都是很通用的考察点。

一般我们会面试超过一个小时，这样才能做到全面了解，也是一种负责。如果实在太差，提前结束。

接下来我会重点说说前端基础和项目经历，我会考察些什么。

## **前端基础** ##

大家常说前端开发易学难精，因为前端开发涉及的知识项实在很多，下面这张经典的图应该不少人看过：

![26341fa7c30fada3651e8fa619b6fca5.png][]

我觉得前端开发的**六项基础知识：HTML、CSS、JavaScript、移动Web开发、调试、HTTP网络知识**是校招学生的必备知识，面试时我会一一问到。如果你在这些前端基础上都表现不好，那你就只能在学习能力上特别突出才行了。

> **HTML**

前端编程语言基础。我会考察：

1.  常用的meta头；
2.  通过你对标签语义化的理解来判断你能否写出更规范的HTML代码；
3.  HTML5新增的能力；
4.  HTML的渲染解析知识，比如为什么CSS放前面JS放后面，怎么理解并行加载串行执行（很有趣的一块知识，这里不做展开）；
5.  ……

> **CSS**

前端编程语言基础。像CSS Expression这种古董不做考察，IE6、IE7这种被时代抛弃的浏览器考察怎么兼容它们有啥意义。我会考察：

1.  怎样写出更好的CSS，如层级不宜过深，如何时用ID和何时用class，如怎么拆分组织CSS代码等；
2.  盒模型；
3.  非常常用的CSS3知识，比如CSS3动画，比如弹性布局；
4.  ……

> **JavaScript**

前端最重要编程语言。这一块相信大家很轻松可以找到很多面试题，或者必背JS知识列表。这一块我会考察 **原生JavaScript知识**，它是一切框架插件的基础。我依然会问

1.  事件模型
2.  闭包
3.  原型链

等前端基础知识，不过我会从单点逐渐深入不断拓展或者结合具体案例，看你是否真正的理解掌握。如果表现不错我有时还会问浏览器的解析渲染原理，作为一个加分项吧（DOM树、渲染树、重排重绘、分层渲染、为什么DOM操作过多会影响性能等）。

> **移动Web开发**

我说现在移动Web开发是前端开发领域的热点，应该没人反驳吧？现如今移动应用层出不穷，移动Web开发知识变得越发重要。如果你不懂移动Web开发知识，真的是落后于时代。我会考察：

1.  移动Web开发和PC Web开发有何不同？此题考察你对移动Web开发的整体理解，同时看你能否有组织有条理地思考问题；
2.  怎么实现响应式布局？考察你是否了解常见的布局方案；
3.  移动端的手势和事件；
4.  怎么提高移动端页面的渲染性能？针对移动端网络，考察你是否能从减少HTTP请求出发提出解决方案，是否了解GPU渲染（偏进阶）等；
5.  ……

> **调试**

开发中总免不了有bug，页面运行环境总比想象中复杂，此时能否通过调试找到问题原因自主解决，非常重要。我会考察：

1.  是否会使用基本的抓包工具、调试控制台；
2.  怎么从茫茫网络内容中找到有用信息；
3.  移动端如何调试；
4.  ……

> **HTTP**

如果你连抓包知识都不会你谈何调试？如果你连304的含义都不知道，你都想不通代码修改后为什么页面还是老样子？前端开发本来就要跟网络打交道。这一块我会考察：

1.  常见HTTP状态码；
2.  不同请求类型的区别；
3.  有什么缓存方案以及怎么实现；
4.  ……

上面就是前端六项基础知识。实际面试的时候我也会问一些综合问题，比如：

1.  用户从输入url到最终页面展示，这个过程中发生了什么？
2.  老板反馈页面打开白屏，而你手机上是正常的，怎么办？
3.  我页面上有个动画一卡一卡的性能不行，怎么优化？
4.  ……

这些基本上就是我考察前端基础知识会问的问题。

可能有人会：咦咦咦，XSS、CSRF这些web安全相关的呢？面试社招生我会问，但是校招学生又有几个真的有遇到这样的场景，考察除了考背诵又有多大意义？

有人会：咦咦咦，怎么不说跨域呢？同理，跨域在业务项目中前端和cgi域名分离或跨业务调用会用到，但是没必要要求在校学生都要遇到过这样的场景吧？

咦咦咦，那React、Vue这些总该问了吧，我这些都掌握得非常6呢？确实，我发现近两年有些面试者React这些掌握得很好，说起来一套一套的，但他们原生JavaScript真的掌握扎实了吗？我一直坚信，只要原生JavaScript知识掌握扎实，学习一个框架是很快的，而且不管以后流行框架怎么变化，你都心里不虚。所以React、Vue这些是加分的，不是必备的。

![9daf279b27ae9761ecec88a72dd18fcf.png][]

## **项目经历** ##

我常在面试前花20分钟，打开面试者简历上写的Github、博客去看看。所以你如果只是意思一下写在简历上而实际上都没怎么打理，那你还不如不写。我会根据面试者Github、博客的内容做些针对性的提问。前面环节你可以说你刚好不懂某块知识，但你自己写的你总该掌握吧？我总可以问深入了吧？

面试时我也会根据简历上的项目经历，询问面试者具体的项目细节。你是不是只会按图索骥简单用用框架？你是不是打了一箱酱油然后在项目中顺便挂个名？这些我会不断考察出来，如果是，扣分。然后我会对你项目中用到的**技术栈**做深入考察，你自己做项目用到的知识，你总该掌握了吧？我总可以问深入了吧？

项目经历除了考察知识，我也会考察**通用素质**。所以我常问一些开放问题：哪个项目是你觉得最满意的，为什么？你有没有遇到过某个大难题，最后是怎么解决？这时候你就应该把握机会把你比较突出的能力表现出来，比如坚持不懈攻克难题、比如……算了，说多了你就学会套路了。

团队协作能力也是项目经历中可以体现出来的，面试官可能在你的陈述过程对你默默做出评价：这个人看来不太合群，趁早把他淘汰好了。

## **其他小点** ##

上面就是我对校招面试流程和该考察什么问题的理解，也是我几年面试经验的沉淀吧。这一小节我回答些大家可能有的疑惑：

> **前端校招要不要考察算法？**

印象中很多公司团队都有问算法问题，比如怎么实现快排，我们团队别的面试官有时也会问。个人觉得考算法还不如考察前端基础知识，算法在前端领域用的真没有其他开发领域多，我做了几年业务开发也真没用到复杂算法。校招时问算法，更多是在考核你大学专业知识的掌握程度，你的学习能力如何。所以我基本不问，考前端基础知识同样可以看出学习能力。除非你的前端基础真的比较差，我才会考察算法。

有人可能会说，以后做复杂系统做高性能框架这些都要求算法水平高啊。是的，我承认，但这不是前端校招生现在必须掌握的能力。他们只要学习能力强，还怕以后没法把算法知识补上来？

> **前端校招要不要考察设计模式？**

公司一位同事写了一本《JavaScript设计模式与开发实践》，豆瓣9.1，挺不错的书。学好设计模式，对你写出结构更清晰，维护更方便的项目代码是很有帮助的。校招时可以考察，不过直接问你会哪些设计模式就有点过了，因为有时候我们实际已经用了某个设计模式的思路组织代码，我们只是不知道它的名称，那不就中招了？考术语是很偷懒的做法，更好的做法是给出一个实际场景问题，看对方能否用设计模式的思路解决。

> **校招学生应该偏技术深度还是技术广度？**

当年我参加百度校招，百度的一个总监说：“在学校应该以知识广度为主，工作后应该选择某个技术方向深挖，当你某一天到了瓶颈，那你又是时候广度发展了。”深以为然。

所以我会更喜欢具有广度知识的学生。举个例子，上面提到的一个综合问题：用户从输入url到最终页面展示，这个过程中发生了什么？有些学生计算机网络课程学的不错，能从HTTP请求组包、网络模型、DNS解析、建立连接这些方面跟我讲深里面的细节，这是深度知识，也是不错的。不过我更喜欢听到这样的答案：

用户输入url，到浏览器缓存机制检查，到HTTP请求包结构，到DNS解析，到连接建立，到服务器端处理（如动态页面处理、静态页面返回，CDN相关知识），到浏览器收到HTML内容怎么解析，到怎么并行加载串行执行CSS、JS，到怎么构造渲染树渲染页面，到怎么根据请求头把内容缓存到浏览器端。如果此时你还能补充HTTPS、同构直出、Service Worker之类，那就更好。

这就是知识的广度，将知识组织成一个整体的架构。即使你回答的时候对一些细节讲不清楚，我也觉得比只知道单点并讲深的同学得分高。

> **关于套路**

照我所知，有些大学计算机社团有着优良的传统：师兄师姐总结出完善的前端面试知识常问问题必备知识。然后师弟师妹就可以按图索骥，背背背或学学学。

我是做了一段时间的一面面试官才看到这样的清单，当时都呆了。于是后来我开始反套路了。如果一个校招面试者对我问的前端基础知识回答溜得飞起不打一个停顿，我就会开始根据一个知识点，深入一层问问，或者再深入一层，压力面，问到对方回答不出。此时到底是真正掌握这个知识还是单纯靠背，就能看出来了。或者直接就从场景切入，而不是直接问请介绍前端缓存这样的问题。

当然了，套路不是不好。我觉得，能真正掌握知识 > 靠背诵掌握知识 > 连基础知识都回答不好。你连这些知识都懒得记，那我也懒得放你过。

## **结束语** ##

啰嗦了这么多，我写这篇文章到底是想干嘛？

难道是为了蹭热点？那是，马上就到金三银四招聘季嘛。

是为了告诉大家面试官怎么出题，让大家学会一些对付面试官的套路？呵呵，那我要和你说，我们已经有意识地反套路了，如果你说你懂得某一个知识，却被发现只是非常基础的掠过，给我们感觉是更差的。

写这篇文章还是想让大家趁还有些时间，对照着整理自己的知识体系，查漏补缺，有针对性的学习前端知识。

写这篇文章还是想让大家体会下面试官视角，对面试怎么进行有个心理准备，减少因为紧张之类的因素导致没有正常发挥。

写这篇文章也想跟其他校招面试官一起交流观点。我觉得没必要把这些当做秘密捂住，重要的不是问题，而是面试者能给出什么样的答案。

最后你可以祈祷：面试腾讯的时候不要遇到我。

**下面分享一份我无意中在GitHub上刷到的一份《前端校招面试题精编解析大全》，已经标星8.3K了，仔细看了下，解析还不错，秉着好东西就要分享的原则，同时也希望大家在今年的金三银四中找到满意的工作，下面分享给大家。**

![8aeaa0654707af4765be2d40079a43d5.png][]

### HTML ###

*  浏览器页面有哪三层构成，分别是什么，作用是什么?
 *  HTML5的优点与缺点？
 *  Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?
 *  HTML5有哪些新特性、移除了哪些元素？
 *  你做的网页在哪些浏览器测试过,这些浏览器的内核分别是什么?
 *  每个HTML文件里开头都有个很重要的东西，Doctype，知道这是干什么的吗？
 *  说说你对HTML5认识?（是什么,为什么）
 *  对WEB标准以及W3C的理解与认识?
 *  …

![c7c1f19592b94db3b38479b49e74936b.png][]

### CSS ###

*  解释一下CSS的盒子模型？
 *  请你说说CSS选择器的类型有哪些，并举几个例子说明其用法？
 *  请你说说CSS有什么特殊性?（优先级、计算特殊值）
 *  常见浏览器兼容性问题与解决方案？
 *  列出display的值并说明他们的作用？
 *  如何居中div, 如何居中一个浮动元素?
 *  请列举几种清除浮动的方法(至少两种)?
 *  block，inline和inlinke-block细节对比？
 *  什么叫优雅降级和渐进增强？
 *  说说浮动元素会引起的问题和你的解决办法
 *  你有哪些性能优化的方法？
 *  …

![095da229ed20be484cb335334ed1797f.png][]

### JavaScript ###

*  js的各种位置，比如clientHeight,scrollHeight,offsetHeight ,以及scrollTop, offsetTop,clientTop的区别？
 *  js拖拽功能的实现
 *  异步加载js的方法
 *  js的防抖与节流
 *  说一下闭包
 *  说说你对作用域链的理解
 *  JavaScript原型，原型链 ? 有什么特点？
 *  请解释什么是事件委托/事件代理
 *  Javascript如何实现继承？
 *  函数执行改变this
 *  babel编译原理
 *  函数柯里化
 *  说一下类的创建和继承
 *  说说前端中的事件流
 *  如何让事件先冒泡后捕获
 *  说一下图片的懒加载和预加载
 *  js的new操作符做了哪些事情
 *  改变函数内部this指针的指向函数（bind，apply，call的区别）
 *  Ajax解决浏览器缓存问题
 *  …

![4a5419a1c90ddbb21a2fdcf130577364.png][]

> **想学习前端web的朋友，和需要PDF文档的朋友都可以加入这边的技术交流裙，前面：1048，中间：337，最后：049，裙里从学生到大佬都有，资源免费分享，不见不散哦！**

### Vue ###

*  Vue中 key 值的作用
 *  Vue 组件中 data 为什么必须是函数？
 *  vuex的State特性是？
 *  介绍一下Vue的响应式系统
 *  computed与watch的区别
 *  介绍一下Vue的生命周期
 *  为什么组件的data必须是一个函数
 *  组件之间是怎么通信的
 *  Vue.cli中怎样使用自定义的组件？有遇到过哪些问题吗？
 *  Vue如何实现按需加载配合webpack设置
 *  简单描述每个周期具体适合哪些场景
 *  scss是什么？在Vue.cli中的安装使用步骤是？有哪几大特性？
 *  聊聊你对Vue.js的template编译的理解？
 *  Vue 路由跳转的几种方式
 *  Vue如何实现按需加载配合webpack设置?
 *  Vue的路由实现：hash模式和history模式
 *  Vue与Angular以及React的区别？
 *  Vue路由的钩子函数
 *  什么是Vue的计算属性？
 *  …

![0432b8e539325b94948089383d0bfa8c.png][]

### React ###

*  介绍一下react
 *  React单项数据流
 *  react生命周期函数和react组件的生命周期
 *  react和Vue的原理，区别，亮点，作用
 *  reactJs的组件交流
 *  有了解过react的虚拟DOM吗，虚拟DOM是怎么对比的呢
 *  项目里用到了react，为什么要选择react，react有哪些好处
 *  怎么获取真正的dom
 *  选择react的原因
 *  react的生命周期函数
 *  setState之后的流程
 *  react高阶组件知道吗？
 *  React的jsx，函数式编程
 *  react的组件是通过什么去判断是否刷新的
 *  如何配置React-Router
 *  路由的动态加载模块
 *  Redux中间件是什么东西，接受几个参数
 *  redux请求中间件如何处理并发

![9749ea39072fc4b7b27af6f3a4db5ab1.png][]

### 浏览器 ###

*  跨标签页通讯
 *  浏览器架构
 *  浏览器下事件循环(Event Loop)
 *  从输入 url 到展示的过程
 *  重绘与回流
 *  存储
 *  Web Worker
 *  V8垃圾回收机制
 *  内存泄露
 *  reflow(回流)和repaint(重绘)优化
 *  如何减少重绘和回流?
 *  一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？
 *  localStorage 与 sessionStorage 与cookie的区别总结
 *  …

![ea5b7660c67efee09904a7b17a48fc49.png][]

### 服务端与网络 ###

*  HTTPS和HTTP的区别
 *  HTTP版本
 *  从输入URL到页面呈现发生了什么？
 *  HTTP缓存
 *  缓存位置
 *  强缓存
 *  协商缓存
 *  缓存的资源在那里
 *  用户行为对浏览器缓存的影响
 *  缓存的优点
 *  不同刷新的请求执行过程
 *  …

![fc61f4efc44449b406d8a56d5f103d67.png][]

### 算法与数据结构 ###

*  二叉树层序遍历
 *  B树的特性，B树和B+树的区别
 *  尾递归
 *  如何写一个大数阶乘？递归的方法会出现什么问题？
 *  把多维数组变成一维数组的方法
 *  说一下冒泡快排的原理
 *  Heap排序方法的原理？复杂度？
 *  几种常见的排序算法，手写
 *  数组的去重，尽可能写出多个方法
 *  如果有一个大的数组，都是整型，怎么找出最大的前10个数

![09a5a6e1addc121711d53e3c113caeda.png][]

#### 想学习前端web的朋友，和需要PDF文档的朋友都可以加入这边的技术交流裙，前面：1048，中间：337，最后：049，裙里从学生到大佬都有，资源免费分享，不见不散哦！ ####

[ff0616af93e57c8a85c67fa2d3303fdf.png]: /images/20221024/50abc5be438f4c97a6d98616b2eac2a2.png
[00f9556ec6bbfdeea50a89357078a6ae.png]: /images/20221024/2608a3630bda4750b7d652629b66488e.png
[26341fa7c30fada3651e8fa619b6fca5.png]: /images/20221024/a74350c08e474f728894cee4d10030c1.png
[9daf279b27ae9761ecec88a72dd18fcf.png]: /images/20221024/7271008da4a3414788bd5a6b96157dc4.png
[8aeaa0654707af4765be2d40079a43d5.png]: /images/20221024/b1b5ea934fa143febc48a403636eac01.png
[c7c1f19592b94db3b38479b49e74936b.png]: /images/20221024/47d9269943484963ab4b5ceb957e5ad3.png
[095da229ed20be484cb335334ed1797f.png]: /images/20221024/0d3a8edda1644364898675d7e3e679b3.png
[4a5419a1c90ddbb21a2fdcf130577364.png]: /images/20221024/5acba42358e54f4fa8874be993db6f77.png
[0432b8e539325b94948089383d0bfa8c.png]: /images/20221024/e5349d07027444d0b3e4e0652a7a9fb1.png
[9749ea39072fc4b7b27af6f3a4db5ab1.png]: /images/20221024/533ae9aa924c442ba76a4a1b85197a6d.png
[ea5b7660c67efee09904a7b17a48fc49.png]: /images/20221024/9d0941e18f974c7db39a651a8de06194.png
[fc61f4efc44449b406d8a56d5f103d67.png]: /images/20221024/8460e0bdeb064de9bba96ba88ea5bbeb.png
[09a5a6e1addc121711d53e3c113caeda.png]: /images/20221024/1ffef569cf184e11a69248dfec1818d0.png