新手前端的面经总结（已拿网易offer）

红太狼 2022-12-26 08:29 135阅读 0赞

![format_png][]

*  作者：凤鸣于岐
 *  来源：https://zhuanlan.zhihu.com/p/36466421

4月19日，本人拿到了网易的口头offer。已经决定去网易-杭研院实习。精神紧绷了一个半月，现在可以好好放松了~ 接下来与大家分享一下本人找实习的经验。虽说是找实习，相关经验在秋招时也应该是适用的。

以下经验主要偏向技术岗，且更多地侧重于前端。

## 简历 ##

分享两个简历模板：

*  超级简历\[1\]
 *  程序猿简历通用模板（请自学Markdown语法）\[2\]

关于怎么写简历，知乎上有许多宝贵经验，我就强调以下几点：

*  实事求是，不怎么了解的东西别往简历上写。
 *  项目经历、学生工作、兴趣爱好等最好有详实的数据和论据支撑，如“该项目后期经过XX方面的性能优化，效率提升22.7%”、“举办XX活动，参加人数XX人，持续XX天”、“爱好唱歌，校园十佳歌手三等奖”。

而且一定要体现你起了哪些作用。

## 网申和内推 ##

简历写好后就进入这个阶段啦。建议大家关注以下几个微信公众号：

*  校招导师
 *  内推军
 *  互联伴

和这几个网站：

*  实习僧\[3\]
 *  牛客网\[4\]
 *  软院官网-招生就业\[5\]

注意，部分公众号和网站提供收费服务，我觉得毫无必要。不要在这方面浪费钱，网上免费的资源已经多到眼花缭乱，像我这样善良的主动分享经验的网友也挺多。

这个阶段我犯了一个大错误。内推找得太早，导致复习得还不够充分就接到了阿里和腾讯的电话，头几次电话面试缺乏经验发挥失常，浪费了这两家公司的内推机会。现在想起来都捶胸顿足……可以考虑在各大公司内推/网申截止日期前几天再投递。

邮箱最好用163、gmail等邮箱，但京东、美团、腾讯等公司建议使用QQ邮箱。每天都要注意有没有收到新邮件，注意要翻一翻垃圾邮件，可能被误识别。

除非有很明确的目标，我建议大多数同学还是海投。我自己就投了三十多家，叫得上名字的公司几乎都投了。笔试、面试也是很宝贵的经验，哪怕倒贴钱我也要多尝试，何况投简历、笔试和远程面试根本就不要钱呢？

## 笔试 ##

非技术岗的笔试喜欢考智力题，这点类似公务员考试。牛客网上可以刷题，或者买公务员考试的资料也行。至于具体的产品经理、策划等还考些别的什么，我不太了解。

大多数公司技术岗笔试的套路差不多，选择题+编程题，有时候还会有问答题。选择题的考点，除了根据你选择的岗位有所侧重，更多地还是考察基础知识。C/C++/Java基础、数据结构、操作系统、计算机网络一定要重点复习（用学校的教材即可），如果有多余时间，最好再看看编译原理。牛客网上也可以做对应的专项练习。

至于编程题……这也是我心中的痛啊……羡慕学ACM的同学，在这方面优势就很大了。LeetCode、LintCode都可以刷刷。书籍推荐《剑指offer》，图书馆有旧版的。LintCode的阶梯训练-书籍里也有《剑指offer》的全套练习题，九章算法上也可以搜每道题的题解。刷通了《剑指offer》，除去头条笔试以外的编程题，做出一半还是比较轻松的。大多数公司的编程题支持多门语言。你可以挑选自己喜欢的语言，熟悉相关的API，免得到时候要自己实现一些原本就有的函数。但最好还是练一练C/C++，面试的时候面试官不一定会你掌握的语言，但多少懂点C/C++。

如果是在牛客网笔试，“校招小管家”微信公众号会在笔试前提醒你。吐槽一下赛码网，没有牛客网好用。面试

面试有电话面试、视频面试、现场面试。电话面试更多地会考察你的知识点、谈谈你过去做过的项目，很少会问你复杂的算法题，即使问了也是让你讲讲思路。视频面试和现场面试就会让你写比较细致的代码了，到时候要仔细考虑边界情况和特别用例。不过我很少见到要求你一定要把代码跑起来的面试官。

面试会有自我介绍环节，稍微准备一下就好。我的自我介绍通常就半分钟。

面试的时候一定要放松，语速尽可能平缓。遇到不会的知识点请大方地说你不会（或者像我这样说：“这个知识点我不了解，以下是我的一些猜测……”或者“您能给一些提示吗？”）。硬着头皮回答只是在浪费双方的时间。

面试通常有好几轮，一般是若干轮技术面加上最后一轮的HR面。阿里的HR面很玄学，其他公司还好。但我至今也想不通为啥链家的HR面把我刷掉了……

去大公司面试就像追女孩子，如果面完试很久都没回你消息，你也别多问，免得两边都不愉快。如果是小公司可以冒险尝试一下，因为小公司的流程不那么正规，有周旋的余地。

以下是我有印象的各大公司的前端面试题。括号内为答案和吐槽。

## 阿里 ##

阿里内推和网申都开始得比较早，但如前文所说，大家可以不急着投，等准备充分了再去试试运气。可以在网站的个人中心里查看自己的面试进度。希望大家不会看到“已回绝”三个字。简历面，电话（太紧张+没睡醒的缘故，我在这里挂了） 简述 Vue 的生存周期（创建，挂载，更新，销毁）

*  你用过 Bootstrap 写过库吗？
 *  让你用 Bootstrap 设计一个系统，怎么设计？

（这问题我现在都不知道怎么答）

*  Express 和 Koa 框架的区别、优缺点（参见知乎）
 *  Node.js 的优缺点（擅长I/O密集、不擅长计算密集……）

## 腾讯 ##

腾讯和阿里都喜欢电话突然袭击，这一点很不友好…… 腾讯的面试进度可以在微信公众号里查看。

### 一面，电话 ###

*  ES6 里 let 和 var 的区别（前者块作用域，后者函数作用域；
 *  let深入理解---let存在变量提升吗？
 *  系统优化方案？
 *  简述一下 CDN 加速服务？
 *  简述事件委托机制（事件捕获、冒泡，父元素监听）
 *  HTTP 里的304状态码了解吗？

（面试-状态码）

*  简述 ES2017 里的 async 和 await （你不知道的JS）
 *  谈谈你印象最深的一个项目（照实说）

### 二面，电话（挂了） ###

*  你觉得要怎样成为一名优秀的前端工程师？

（快速学习、善于沟通）

*  HTTP 、 HTTPS 、 HTTP2 的区别？

（关于HTTP你该知道的）

*  简述一下用户访问网站的过程（缓存，DNS查询，建立链接，请求，响应，收到页面，解析DOM树，显示内容，首屏加载完成，可交互）
 *  你有什么要问我的吗？

（见后文小结里的HR相关文章）

笔试后北京一面。体验极差！不能一次面完嘛！复试还是改电话吧……

*  问项目（照实说）
 *  列举数组的用法（建议分类列举，栈、队列、映射、删除等）
 *  数组去重（直接倒进集合再倒出来）
 *  跨域（图像ping， JSONP ， CORS ， webSocket 等）
 *  本地存储（ cookie ， localStorage ， sessionStorage 等）
 *  HTTP ， TCP ， UDP ， IP （参看计算机网络教材）
 *  进程通信，有名和匿名管道（有名管道和无名管道）
 *  你有什么要问我的吗？

（见后文小结里的HR相关文章）

一面过了后公众号显示进入复试状态，但二面一直没消息。成备胎了？

## 头条 ##

头条面试问的算法题比起笔试题简单多了。面试前会有小姐姐和你约时间。

一般是在牛客网上视频面试，会让你在在线编译器里写代码。顺利的话一次三面。头条回绝人倒是干脆，面完试十五分钟内就会给你打电话。像我这样被挂起来的倒是挺少见……

### 一面，视频 ###

*  简述 CSRF （跨站请求伪造）的攻击和防御措施（CSDN博客-CSRF）
 *  在线写代码，给定一个数组和一个正整数N，求一个和小于N的最长连续子数组（我两层for循环暴力解了，在面试官引导下做出了一定的优化）
 *  在线写代码， CSS 的单行和多行截断？

（ overflow ， text-overflow ）

*  Vue 的双向绑定原理（事件监听， getter 和 setter ）
 *  别的记不清了……当时网不好

### 二面，视频（三面还没给我消息，估计凉了） ###

*  在线写代码，给定一个二叉树，求根节点到叶子节点的路径上所有节点值之和（DFS，先序遍历，递归）
 *  在线写代码，给定两个有序数组，合并为一个有序数组，不许使用 js 的 concat 和 sort 方法（两个指针）
 *  在线写代码，两栏布局，左边定宽右边自适应，等高（ flex ， grid ， float ， position ，方法很多随便说几个）
 *  简述自定义事件实现方法（参看红宝书）
 *  简述 getter 和 setter 写法（参看红宝书）
 *  TCP 三次握手和四次挥手，拥塞控制（参看计算机网络教材）
 *  你有什么要问我的吗？

（见后文小结里的HR相关文章）

## 链家 ##

我也不知道我为啥挂了……

当时面试地点在凯伦饭店。环境舒适，面试官也挺温和。技术面难度不大，但问得比较细。我印象不深，一二面合起 来写吧。

### 技术面 ###

*  跨域方式（ JSONP ,  webSocket 等，但原理要搞懂）
 *  Web 本地存储（ Cookie ， localStorage ， sessionStorage 等）
 *  Cookie 相关的头字段和格式（ Set-Cookie：

name1=value1, expires='...',expires='...' ）

document.cookie 的格式，写一个封装后的函数（格式同上，函数就是花式处理字符串）

*  session 原理（基于 Cookie ，或查询字符串，或 ETag ）
 *  手写代码，不产生新数组，删除数组里的重复元素（排序， splice() ）
 *  项目细节（问了我一堆后端，还好当年项目搭档的源码我还有印象）
 *  你有什么要问我的吗？

（见后文小结里的HR相关文章）

二面面试官对我的评价：动手能力强，能解决问题，但所学知识杂而不精，不过学生都这样。

### HR面 ###

基本是天南海北地侃大山，家庭住址、经济条件、寝室关系、参加过的竞赛、做过的项目、职业规划等都会关联到……我可能在这个环节说错话了。言多必失，不要太实诚，也不 要撒谎。

## 网易 ##

网易的面试体验挺不错。它的微信公众号会给你叫号，前台小姐姐也会提醒你，每一面结束后都可以找前台小姐姐查询面试结果。而且食堂超级好吃！还可以边吃饭边吸猫！面试地点在杭州研究院一楼大厅。环境舒适，就是座位有点不够用。

### 一面 ###

*  6道基本技术问题，居中、闭包、块级元素和行内元素等（答案略）
 *  某个项目的页面布局方式，缓存的设计和优化方式（本地存储和协议相关的）
 *  ajax 的原生写法（创建 XHR 对象， open() ， setRequestHeader() ， send() ， onreadystatechange ）
 *  vue-router 的原理（ hash ， HTML5 新增的 pushState ）
 *  关于 ajax ,我再强调以下方面。

//open()接受3个参数：请求类型、 URL 和是否异步的布尔值
    //GET方式通常这样发：
    xhr.open("get", "example.php?name1=value1&name2=value2", true)
    
    //可以设定请求头，包括自定义请求头，比方说这样：
    xhr.setRequestHeader("MyHeader", "MyValue")；
    
    //可以这样取得一个包含所有头部信息的长字符串：
    var myHeader = xhr.getResponseHeader("MyHeader");
    var allHeaders = xhr.getAllResponseHeaders();
    
    //POST方式有这几个地方要改：
    //请求头要重设，数据会以key1=value1&key2=value2的方式发送到服务器
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    //获取表单
    var form = document.getElementById("user-info");
    //序列化表单，发送的内容传入send()
    xhr.send(serialize(form));
    
    //也可以这样传值：
    var data = new FormData(form);
    //再传一点别的
    data.append("name", "Nicholas")
    xhr.send(data);

*  别的不记得了……

### 二面 ###

*  面试官：“你觉得你擅长CSS还是JS？”
 *  我：“JS。”
 *  面试官：“好，那我问你一道CSS的问题。”
 *  我：“？？？”
 *  CSS 三栏布局，左右定宽，中间自适应（ flex ， grid 等）
 *  解释构造函数、对象、原型链之间的关系（看红宝书）
 *  手写代码，实现原型式继承（看红宝书）
 *  手写代码，实现借用构造函数（看红宝书）
 *  Vue 双向绑定原理（事件监听， getter 和 setter ）
 *  Virtual DOM 和 diff 算法（ DOM 树，分层比较， key ， DocumentFragment ）
 *  jQuery 链式调用的原理（知乎-jQuery链式调用）
 *  最近碰到的技术难题，不一定是前端（我答了B站的爬虫与反爬虫）
 *  关于反爬虫，请求头中的这两个字段要修改。Host ：
 *  发出请求的页面所在的域。

Referer ：

*  发出请求的页面的 URI 。

注意， HTTP 规范将这个头部字段拼写错了，而为保证与规范一致，也只能将错就错了（这个英文单词的正确拼法应该是  referrer ）。

### HR面 ###

HR小姐姐似乎对我们学校挺熟悉的，但好像不是校友…… 谈一谈过去做过的项目、面对的难题（和UI的沟通问题，顺便引出我后来自学了平面设计。

*  又提了提爬虫
 *  家在哪里（照实回答就行）
 *  未来职业规划（表示出你想在公司长久待下去，继续进步就行）
 *  具体的技术发展方向（我答的是“能支持上亿用户使用的前端架构”）
 *  为了往这个方向发展，你所做的努力（我答的是“在看《高性能网站建设》、自学后端，顺便提了一下‘东北Java第一人’姜国海老师”）
 *  预测一下前端未来的发展趋势（我答的是“自动化”）
 *  拿了哪家的offer？

（……还是照实回答吧）

实习时间（我建议把时间段说得宽松一些，到时候真的冲突再商量）

## 京东 ##

京东的面试小哥哥有点逗。因为是临时改成电话面试，过程不太正规，题目直接用手机的摄像头传给我…… 初面已过，复试原本显示待安排，后来估计是招满人直接给我挂了。

### 一面 ###

*  列举块级元素和行内元素（ div 等， span 等）
 *  absolute 依据的定位元素是？

（非 static 的祖先元素）

*  几道 js 基础题（多去牛客网刷题）
 *  Vue 里 v-if 和 v-show 的区别？

（文档）

*  parseInt() 和 array 的 map 方法的参数？

（看红宝书）

面试官对我的评价：基础还可以，做项目的能力是有的，但缺乏深度，要多关注一些细节

## 去哪儿网 ##

距离去哪儿网笔试快一个月了，我都以为我凉了，结果在北京面腾讯的当天下午连续接到三个电话……只有一轮技术面+一轮HR面，然后就给我发了口头offer，相当地干脆利落……

去哪儿网好像更注重考察你对框架、工具的应用，对于基础考得反而不多。而且还考了我 jQuery ,别的公司都不怎么考的……

### 一面 ###

*  webpack 用过吗？
 *  如何处理图片、 CSS 文件？

（各种 loader ）

*  使用 flex 布局写移动端布局（注意 flex-direction 要改）
 *  jQuery 的 delegate 原理（事件冒泡与捕获）
 *  不止这些，但别的忘了……

### HR面 ###

*  薪资
 *  可实习时间（我说了7~9月）
 *  职业发展规划（有节制地胡说八道）
 *  别的不记得了……因为整个过程速度太快，来不及记忆……

## 搜狐 ##

我投了三份简历给搜狐，结果三份全被刷了……但4月18日早上搜狐面试官突然加我微信好友！于是当天晚上十点视频面试。

### 一面 ###

*  HTML5 的语义化标签（ header ， footer ， main 等）
 *  position 的取值和含义（W3Cschool-position属性）
 *  z-index 的蜜汁用法（这是一个“拼爹”的属性）
 *  CORS 跨域文件共享的请求头（询问允许的方法和域）
 *  获取页面滚动高度（ window.pageYOffset ）
 *  函数节流和去抖，写滚动监听函数（函数节流和去抖）
 *  你有什么要问我的吗？

（见后文小结里的HR相关文章）

## 百度 ##

虽然百度这几年发展势头落后于AT，甚至快被京东赶上了，毕竟瘦死的骆驼比马大，面试还是相当有难度和水准的。本人很遗憾地挂在了二面。看来只能投奔网易的怀抱了~ 百度也是在牛客网上进行远程视频，流程和头条差不多。

### 一面 ###

*  询问你的项目经验、学习经历、主修语言（照实答）
 *  解释ES6的暂时性死区（ let 和 var 的区别）
 *  箭头函数、闭包、异步（老生常谈，参见上文）
 *  高阶函数（呃……我真不太清楚这是啥，听起来挺像闭包的）
 *  求N的阶乘末尾有多少个0，在线码代码或讲思路（求因数，统计2、5、10的个数）
 *  给一个小于一百万的数，求和它最接近的 Fibo 数（我的思路是简单地求数列然后求差，面试官说 Fibo 数超过34个以后就超过一百万，可以把34个数都求出来然后研究状态转换……）

一面面试官给我的评价：“基础扎实，逻辑还可以，但代码风格不太好（ES5和ES6混用，封装不好），未来发展方向不明确。可以进入第二轮面试。”

### 二面 ###

二面面试官说话不太清晰且声音太小，对面环境也比较嘈杂（好像也在面试？），这点不如头条。头条是在独立的小隔间里。

*  CSS布局（ Grid 和 flex 都考且考察细致）
 *  数组的随机排序（我蒙了个答案，好像还算对。
 *  打乱数组
 *  JSON 对象的深度克隆（遍历递归，或者序列化和反序列化）
 *  简述动画写法（ setTimeout ， requestAnimationFrame ， CSS3 ……）
 *  列举“传统”的异步（……这题啥意思？不会）
 *  Node 的多线程，高并发，安全（我都不会……问后端大佬吧）
 *  听说过 PWA 吗？

（没听说过，不会……）

*  解释 event loop （听过，不太会）
 *  服务端渲染，计算首屏和白屏时间（不太会……首屏白屏
 *  服务器如何强制更新后的文件替代客户端缓存的文件（不太会……好像和MD5有关？

）

还有很多不太记得了，反正我都不会…………

二面面试官给我的评价：“二面failed。学习能力不错，反应快，知识的广度有，但缺乏深度，不够系统。建议研读V8引擎源码，Node源码，花半年时间。”原来我已经进步到可以看源码的程度啦？虽然挂了，但听面试官这么说还有点开心~

小结

看到这里，相信读者也已经感觉到，许多面试题是有套路和重点难点的。我分享几篇总结这些套路的文章。

*  大厂前端面试考什么？\[6\]
 *  前端进阶系列\[7\]
 *  这可能不只是一篇面经\[8\]
 *  diff算法\[9\]
 *  最后一面-HR面\[10\]

都是前辈们留下的宝贵经验，值得好好吸收。

我的找实习的总结就写到这里，感谢大家阅读。祝愿大家能找到满意的实习。

推荐自己的另一篇文章~

*  凤鸣于岐：前端学习建议 | 书籍和资料推荐\[11\]

### Reference ###

\[1\]

超级简历: https://www.wondercv.com/

\[2\]

程序猿简历通用模板（请自学Markdown语法）: https://github.com/geekcompany/ResumeSample

\[3\]

实习僧: https://www.shixiseng.com/

\[4\]

牛客网: https://www.nowcoder.com/5779293

\[5\]

软院官网-招生就业: http://ssdut.dlut.edu.cn/bkspy/bksgl/zsjy/sxjy/jyzd.htm

\[6\]

大厂前端面试考什么？: http://hpoenixf.com/%E5%A4%A7%E5%8E%82%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E8%80%83%E4%BB%80%E4%B9%88.html

\[7\]

前端进阶系列: http://hpoenixf.com/%E5%89%8D%E7%AB%AF%E8%BF%9B%E9%98%B6%E7%B3%BB%E5%88%97-%E7%9B%AE%E5%BD%95.html

\[8\]

这可能不只是一篇面经: https://www.nowcoder.com/discuss/29890?type=2&order=0&pos=16&page=7

\[9\]

diff算法: http://www.infoq.com/cn/articles/react-dom-diff

\[10\]

最后一面-HR面: http://www.cnblogs.com/syfwhu/p/4431143.html

\[11\]

凤鸣于岐：前端学习建议 | 书籍和资料推荐: https://zhuanlan.zhihu.com/p/37625259

最后

*  欢迎加我微信(winty230)，拉你进技术群，长期交流学习...  
    
 *  欢迎关注「前端Q」,认真学前端，做个专业的技术人...

![format_png 1][]

![format_png 2][]

点个**在看**支持我吧

![format_png 3][]

[format_png]: /images/20221120/e560ee0ebdaf46e1a4b8a53cf77f02d5.png
[format_png 1]: /images/20221120/bba5e777856a473c97f3d4c36d446e27.png
[format_png 2]: /images/20221120/e8337482c3384e4c9cf131745e8ac219.png
[format_png 3]: /images/20221120/2d4dcdba1e1c40ffadd5a4a906a63900.png