面试
面试有电话面试、视频面试、现场面试。电话面试更多地会考察你的知识点、谈谈你过去做过的项目，很少会问你复杂的算法题，即使问了也是让你讲讲思路。视频面试和现场面试就会让你写比较细致的代码了，到时候要仔细考虑边界情况和特别用例。不过我很少见到要求你一定要把代码跑起来的面试官。
面试会有自我介绍环节，稍微准备一下就好。我的自我介绍通常就半分钟。
面试的时候一定要放松，语速尽可能平缓。遇到不会的知识点请大方地说你不会(或者像我这样说：“这个知识点我不了解，以下是我的一些猜测……”或者“您能给一些提示吗？”)。硬着头皮回答只是在浪费双方的时间。
面试通常有好几轮，一般是若干轮技术面加上最后一轮的HR面。阿里的HR面很玄学，其他公司还好。但我至今也想不通为啥链家的HR面把我刷掉了……
去大公司面试就像追女孩子，如果面完试很久都没回你消息，你也别多问，免得两边都不愉快。如果是小公司可以冒险尝试一下，因为小公司的流程不那么正规，有周旋的余地。
以下是我有印象的各大公司的前端面试题。括号内为答案和吐槽。
阿里
阿里内推和网申都开始得比较早，但如前文所说，大家可以不急着投，等准备充分了再去试试运气。
可以在网站的个人中心里查看自己的面试进度。希望大家不会看到“已回绝”三个字。
简历面，电话(太紧张+没睡醒的缘故，我在这里挂了)
- 简述 Vue 的生存周期(创建，挂载，更新，销毁)
- 你用过 Bootstrap 写过库吗？让你用 Bootstrap 设计一个系统，怎么设计？(这问题我现在都不知道怎么答)
- Express 和 Koa 框架的区别、优缺点(参见知乎)
- Node.js 的优缺点(擅长I/O密集、不擅长计算密集……)
腾讯
腾讯和阿里都喜欢电话突然袭击，这一点很不友好……
腾讯的面试进度可以在微信公众号里查看。
一面，电话
- ES6 里 let 和 var 的区别(前者块作用域，后者函数作用域；感谢 @邱小白 的更正，关于变量提升的问题，可以参考此文：let深入理解---let存在变量提升吗？)
- 系统优化方案？简述一下 CDN 加速服务？(知乎-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月)
- 职业发展规划(有节制地胡说八道)
别的不记得了……因为整个过程速度太快，来不及记忆……
百度
虽然百度这几年发展势头落后于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源码，花半年时间。”原来我已经进步到可以看源码的程度啦？虽然挂了，但听面试官这么说还有点开心~
搜狐
我投了三份简历给搜狐，结果三份全被刷了……但4月18日早上搜狐面试官突然加我微信好友！于是当天晚上十点视频面试。
一面
- HTML5 的语义化标签( header ， footer ， main 等)
- position 的取值和含义(W3Cschool-position属性)
- z-index 的蜜汁用法(这是一个“拼爹”的属性)
- CORS 跨域文件共享的请求头(询问允许的方法和域)
- 获取页面滚动高度( window.pageYOffset )
- 函数节流和去抖，写滚动监听函数(函数节流和去抖)
- 你有什么要问我的吗？(见后文小结里的HR相关文章)
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
