「跟我来面试」系列的第一篇文章是关于前端的，发出后看到有读者反馈说内容较少，问的问题比较基础。因为博主是后端的，前端方面并不是非常了解，所以我找到了同组的小伙伴，让他分享一下自己春招时的一些经历。
他和我是同一个实验室的，就叫他 x 吧，目前研一，两年制硕士，今年实习。x 的本科前半段迷茫在科班的基础理论学习和课程作业中，大一大二对前端一无所知，没想关心太多，只想保研就好。大二暑假参加一项学校项目，机缘巧合接触到了前端，发现软件工程还有很多值得探寻的地方。大三时他的保研形势已定，于是参加各种比赛，摸索自己的兴趣所在，终于在一系列比赛中尝到了前端的甜头，于是决定正式入坑，带着起初“前端能让页面好看”这般粗浅好笑的见识，打开新世界，一步步丰富自身。终于在这次春招中取得了一些小成果：
- 网易雷火三轮技术+HR，拿到 offer。
- 字节跳动教育业务三轮技术+HR，拿到 offer。
- 美团两轮技术，leader 给了口头 offer。
- 阿里淘系目前三面结束，被大 leader 全方位调教，拿到 offer
- 腾讯 PCG 到第四面，战线很长，后续没有继续面腾讯，淘系 offer 拿到后就推掉了这里。
说实话，你可能不知道花一个月时间拿到 4 个大厂 offer 是什么体验，我们一般都管这种人叫“offer 收割机”。
在这里分享下面经，附带他的简要回答和思考。对于基础问题，大家可以查漏补缺，建议收藏；对于场景或者高层思考型问题，大家参考即可，这些都是面试官根据自己部门或每个人的履历定制的。轮次越多，问题也就越偏向高层，需要大家更多的总结思考，找到平衡，甚至再生产。
点击文章底部**「阅读原文」，即可查看他的个人主页。以下是他的整理，篇幅较长，建议大家收藏**，方便复习 👇
网易雷火三轮技术+HR
一面
一面一般都是基础，在回答问题的基础上，最好能主动发散广度深度，面试官印象会很好。
- 介绍下自己并聊聊项目。
这个因人而异，要大方得体，讲出重点。主要围绕项目是什么，为何要做这个项目，解决了什么痛点，你在其中负责了什么工作，遇到并解决了什么问题，如何和不同模块合作，把控了多少架构。后两点需要一定思考和积累，把前面的讲清楚能满足一些面试官，但是大厂面试官常常会希望你说一些架构和整体方面的理解，是加分项。 - 如何用 await 和 async 写一个睡眠函数？
function sleep(time){
return new Promise(function(resolve,reject){
setTimeout(()=>resolve('over'),time);
});
}
async function run(time){
let result = await sleep(time);
console.log(result);
}
run(3000);复制代码
- 说说 inline 元素和 inline-block 元素的区别。
CSS 基础题，我从布局方面不换行和尺寸方面 inline 设置宽高无效，inline-block 可以来讲，还发散了一些 CSS 元素体系讲了讲。 - inline 元素的 margin 有用吗？
是一个很刁钻的切入口，大家常常忽略对 inline 元素的研究，还好我平时比较喜欢捣鼓 CSS，其实再默认水平方向的文档下，设定水平方向 margin 是有效的，垂直方向无效。 - 讲讲 html 如何添加事件监听，事件处理有哪些阶段？
添加事件监听很简单，document.addEventListener 就能直接来，事件阶段按时间顺序有捕获，目标，冒泡三段。 - 说出三个你知道的不常用的 html 标签。
一般都问那些常用的，结果面试官反其道行之，很佩服。当时只答出<iframe><strong><i><audio>，可以百度一下，其实有很多。
二面
因为我 React 技术栈比较多，所以这方面问题也多，大家按需食用。
- React 中函数组件和类组件的区别。
React16.9 之后，加入了钩子，给组件体系带来了很多新变化，函数组件也拥有了生命周期方面的特性，useEffect 钩子其实就是对几个生命周期的封装定制。 - React 是如何将 redux 包装到组件上的？
React 的 react-redux 库，通过给根组件包装一层<Provider>，并将 store 绑定上去，需要进行状态管理的组件通过 connect 包装生成容器组件，并将状态和事件映射到 props 上。redux 其实有很多细节，可以视情况引申。 - React 类组件能在 componentShouldUpdate 中比较属性是否改变来判断是否应该重新 render，那函数组件如何实现同样功能？
函数组件通过 React16.6 的包装函数 React.memo()得到一个优化后的组件。 - ES6 的 proxy 讲一下。
代理，拦截对象的各种类型操作如 get 和 set 等，常常在讲到 Vue3.0 时，用来和 Vue2.0 的 Object.defineProperty 对比，其实提到 proxy 面试官就希望你提到 Vue 方面的变化。 - Object.defineProperty 和 Proxy 对比，有什么优劣？
Proxy 对整个对象进行代理，并且返回新对象，是单一职责原则的良好实践，而 Object.defineProperty 不得不对对象每个属性进行重复的劫持操作，且无法劫持数组的原生方法如 push、pop 等，只能使用 hack 的方式改变原型链。相比之下，Proxy 就功能全面且不需要额外工作，内聚性良好。 - 如何实现文字溢出显示点点点？
.container{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
- 讲一下 OAuth2.0 认证的过程。
因为我的项目有用到 Google 的 API，所以被问到，阮一峰老师博客讲的很清楚：OAuth 2.0 的四种方式 - 讲一下登录之后，身份认证的过程。
使用 cookie 和 session，用户登陆后，后端 session 以键值对形式存储用户信息，将 sessionId 返回浏览器，浏览器只要在 cookie 种携带该 sessionId，即可让服务器确认用户信息。当然这个过程并不安全，如果能引申一些安全方面的见解，是加分项。
三面
- 项目中访问其他网站比如 Google Drive 需要登录认证吗，登陆一次后再次进入还要认证吗？
用的是第三方授权形式，所以当时得不断重新认证。和面试官进行了一些交流。 - 你的项目是前后端分离吗，架构描述一下。
不是，架构问题基于项目真实情况回答即可，不需要因为自己的项目有些不足就避而不谈，其实能够点出不足并进行思考，反而是不错的答案。 - React 中函数组件和类组件的区别。
又被问了，可能是考察我这方面扎不扎实，也可能就是碰巧。 - Hook 用过吗，有什么作用？
从代码重构和性能优化来讲钩子。可以看看官方文档。 - Ref 用过吗，一般是用来干什么的？
获得组件实例，React 虽然是数据驱动的，但是或多或少需要 dom 操作，这个时候通过 ref 实例即可得到组件的真实 dom。由此可见 React，Vue 早就不能称为 MVVM 了。 - 如何在父组件中获得子组件内部的 ref？
可以使用传递回调函数或者 React.forwardRef API 的方式转发 ref。 - 你对 React 中组件的状态管理有什么良好实践或见解？
状态提升到父组件便于统一管理，使用 redux 等等之类。 - 跨域问题如何解决？
这个网上资料铺天盖地，除了传统 jsonp，CORS 等回答之外，我还结合自己项目中的代理讲了讲。 - Restful 接口规范了解吗，状态码 200 代表什么，201 呢？
200 就是 GET 获取数据成功，当时没背状态码，201 这里答不出来，后来看了知道是用户新建或修改数据成功。 - 用过 webpack 吗？
这是我一直用的不多的点，只提了提 tree-shaking 相关原理，面试官没有继续为难。 - 用过什么类型的服务器，用来干什么？
学院服务器，各种云，都用过，用来做自己的项目，大概做了什么也提了一点。
HR 面
走到 HR 面一般稳住不浪就没什么问题了，千万不要头铁，和“腾讯 HR 说不想去深圳”之类的话，或者聊一些公司的负面消息，你真没兴趣或者就是牛逼哪都求着你就当我没说咯。在 HR 面，只要心平气和了解公司，分享一些个人爱好，聊聊人生就行了。
- 你的前端学习途径有哪些？
- 为何选择前端？
关于这个问题，我单独写过一段吐槽：HR 终极一问：为啥选择前端？答：混口饭吃。卒。 - 职业规划是什么？
- 你的兴趣有哪些？
字节跳动三轮技术+HR
字节非常注重基础和编码能力，几乎所有问题都希望你能写上几笔，平时需要注重基础能力的培养。
一面
- 介绍一下你自己和项目。
- TCP 和 UDP 有什么区别?
UDP 无连接，TCP 有连接。更多细节见这篇专栏 - TCP 建立连接和断开连接的过程。
网络基础，也是 web 入门的一步，三次握手和四次挥手，都是为了双方互相确认状态。 - GET 和 POST 请求有何不同。
经典问题，其实就是语义不同，本质上都是发送 http 请求报文。 - 前端缓存讲一下。
主要是 http1.1 的 cach-control 属性，分三个递进的情况：no-store、no-cache 和 max-age，然后配合 etag 确认后端资源是否更新了。有兴趣的还可以把 http1.0 的 expires 和 cach-control 对比。 - js 基本类型有哪些？
加上 Symbol 有六个。 - 盒子模型讲一下。
当时讲了很多 CSS 布局标准，最后面试官说其实只想听我说一下宽高，content-box 和 border-box 就行。 - 写代码，写一个闭包的应用。
大家发散思维可以有很多，我当时写了个很简单的单例函数。
function getInstanceFactory(instance){
return function getInstance(){
return instance;
}
}
let getInstance = getInstanceFactory({a:1});
const instance = getInstance();
console.log(instance.a);
- 写代码，判断一个变量是否为字符换或者数组。
用 instanceof,constructor 指向，Object.prototype.toString 都可以。 - 写代码，显示一个文档树的章节结构，附带小节标号。
深度遍历，当时写完还有一点小节标号没调好，面试撕代码总是难以一遍过啊。
二面
- 平时通过什么渠道学习前端，为什么选择前端？
- 好几道肉眼看代码写输出结果的代码题。
这种题往往乍一看没什么难度，实际上可出得很绕，平时没事多玩玩原生 js，不然容易被绕进去，比如 this 的指向、变量的作用域等等。 - 子元素宽度未知，如何居中子元素，写 CSS。
直接在面板上写了 tansform 的方式 - 有哪些跨域方法？
重复的问题就略过了。 - Promise 的 all 和 race 方法讲一下？
all 是要所有子 promise 都完成才 resolve，有一个失败就立刻 reject；race 是只要有一个 promise 返回结果，父 promise 马上也会用子 promise 的成功返回值或失败详情作为参数调用父 promise 绑定的相应句柄，当时甚至想写一个原生 js 实现的 race，不过面试官反而说不用。 - 写代码，写一个事件监听注册器。
阴沟里翻船，本以为顺利写完，结果出了好几个复制粘贴以及变量名写错的问题，看了半天，最后都没有调好。吃了这次教训，之后写代码更加谨慎了，提交前会先自己顺着逻辑理一遍。后面才知道牛客网的面板可以全屏，之前一直是缩小形式，写起来很容易遗漏。 - 讲讲你在写代码的过程中为什么出了 bug，整个思路是什么？
这是顺着前一题出的 bug，算是面试官给的一次机会，好好描述了下自己的思路和心理。
三面
- 介绍项目。不断追问，从技术使用到架构。
这种时候一定要撑住，从容思考，就算不会也要把思路讲出来。 - 哪个项目令你收获最大？讲讲收获。
- React 项目中你遇到过什么问题？如何解决的？
版本更新后的重构问题主要讲了讲。 - http 请求有哪些方法?
GET、POST、HEAD、PUT、DELETE、CONNECT、OPTIONS、TRACE、PATCH。当时之说出来五个 - 用过什么 ajax 请求的库？
只说了 antd 和 axios，后面和面试官交流了一些库封装问题。 - 写代码，js 算法题，老师给孩子分饼干，最多能满足多少孩子。写完之后问为什么要这样写。
HR 面
小姐姐很活泼爱笑，还懂技术，全程轻快交流。
- 描述一下大前端
和 HR 交流大前端感觉很独特，无法言喻。 - 你觉得前端就是界面吗？
- 为什么选择前端？
发现每个公司必问至少一次，出现频率最高的问题非他莫属。 - 平时怎么学习前端？
美团两轮技术
一面
- 介绍下自己和项目。
- 平时学习前端有什么方式？
- 写代码，写一下 js 中的各种继承方式。
主流三套方式：ES6 中 class 的 extends；原型链；通过 call 方法借用别的构造函数； - 默写 react 的生命周期函数。
但是默写了一下，mount 阶段 4 个，update 阶段 5 个，umount 阶段 1 个，异常情况有个 componentDidCatch。 - 描述一下 React 的数据流传递方式。
单向数据流，父组件到子组件单向，数据到视图单向。 - 描述一下 redux 的数据流。
最外层 Provider 上挂载一个 store，从上到下以瀑布流的形式传递，途经的每个组件都可以取得数据并添砖加瓦，但是不能直接修改，只能通过 dispatch。 - React 的 setState 之后如何进行更新和渲染的？
新旧版本 React 更新由同步变为异步，尽量把两种版本对比着讲，讲出为什么要进行异步更新，并且引入新的数据结构 Fiber。 - 描述一下 MVC 模式。
画了一下 M,V,C 三者之间的数据流向图。
二面：
本来二面是交叉面，不过直接跳到了主管面。
- 介绍下你的项目。也是被不断追问。
- Angularjs 如何进行前端渲染？
讲讲双向绑定，脏检查那套。 - 主流前端框架机制讲一下？
很大的话题，从 React 入手，讲了它的渲染机制和优化。 - 平时怎么学习前端？
阿里淘系三轮技术
一面（提前批）
- 介绍下自己的项目。
- AngularJS 和 React、Vue 有什么区别？结合开发经历描述。
这个纯看理解和个人发挥了，面试官估计仔细看了我的简历，三个框架都用过所以这么问。当时扯了很久关于框架的见解，在这种方面，千万不要背 MVC 或 MVVM 之类的概念 - 项目中遇到什么问题，如何解决的？
- Node.js 用过么，讲一讲
用的不多，就把 node 的事件循环讲了下，nextTick 和 setImmediate 跳出来讲了讲。 - 平时用哪些渠道进行学习？
二面
突击面试，不约时间，11 点来电就直接开始了。这种没有准备的情况下一定要冷静，可以先让面试官稍等片刻自己准备下设备，同时调整下状态。
- 近两年在前端领域有什么成果和贡献？
很有魄力的问题，突击面试外加上来就丢这个问题很有压迫感。讲了自己 release 的项目，实验室的项目，社区博客（开始学前端就在写 CSDN 博客，近期迁到掘金）分享，flutter 等等 - 请讲讲三大框架为何会产生？
很宽广同时又很精确的主观题，从前端技术史讲起，各大公司的立足点和开发诉求。 - 你对前端框架的发展方向有什么自己的见解？
很广泛，从动态化，兼容性入手，有时间想谈谈新编码下的 JIT 和 AOT。 - 玩过 IOT 一类的嵌入式开发吗？
玩过树莓派，以前在学校搞过小车竞赛。 - 解决过哪个技术问题最令你大呼过瘾？
技术上从 0 到 1 最痛快，比如在一张白纸的情况下完成 Google OAuth2.0 认证，调通接口。 - 你在技术方面最佩服或最感谢的人
身边的人。 - 你有什么想想我了解的？
问了很多问题，关于淘系现在的结构组成，阿里在 Flutter、BFF、Serverless 方面的生态建设，还问了下当天淘宝 IOS 出现的 S1 级事故。学到了很多。
三面
面试官是 P9 的前端团队大 leader，什么都会，什么都比你深，只能稳住别慌，尽力发挥。
- 讲一下你价值最大的一个项目。
讲了大三实习的项目 AngularJS+.Net Framework。 - 我看见你还用 Flutter，讲一讲 Flutter 的原理吧
底层有一个用于跨端的嵌入层，中层用 C++实现自绘引擎，封装成 dart ui 库，上层用 dart 开发，对象化组件化。 - Flutter 和 ReactNative 比，性能孰优孰劣
RN 首屏性能相对弱，组件重绘代价大，JSBridge 涉及进程切换，这个固有代价导致 RN 的渲染性能弱于 Flutter，所以 RN 才有了架构重建计划，将 JSBridge 替换为 JSI。 - 微信小程序的结构和原理又是什么样的？
回答的不好，印象中的小程序也是和 RN 类似的派系，但是底层实现 ui 的方式我犯迷糊了。 - 现在的 Flutter 肯定是直接不能用于大项目开发的，你觉得它的瓶颈在何处？
讲讲 Flutter 在状态管理方面的不足，提到了大厂在 Flutter 方面的定制。 - 你有什么要问我的?
赶紧问下之前小程序原理的问题，面试官说上层是用 html，js 那套 web 跑在浏览器内核（如 V8，JSCore 等），再往下层是用 webview，外加一些 native code 实现对 webview 做得不太好的组件的补充。 - 还问了一直关注的 severless 问题，面试官高屋建瓴，分两点进行教学：
基础设施方面，云原生的支持必须达到足够高的稳定性，满足扩容收缩等硬性要求才能将关键基础链路演化为 severless，目前还存在一定差距，不过一些非关键业务链路已经完成迁移。 - 人的方面，应用工程师得拥有该方面的维护技术和解决问题的能力。虽然还有很多细节不甚理解，但认真听完还是收获满满。
四面（交叉面，钉钉）
- 你收获最多的项目是什么？
大三外企实习项目，全栈开发，让我对架构和服务化甚至是敏捷开发的项目把控和工程实践有了不少的体验和理解。 - 项目中使用 websocket 开发，在和后端对接之前如何进行开发？
这个问题被问住了，因为项目比较小前端用完 mock 数据，甚至连 mock 服务器都没有就直接和后端对接，后端推送数据也是在前端直接查看，就老老实实和面试官交流了一阵。 - 关于网站性能优化问题，SPA 过大导致首屏时间太长怎么解决？
性能优化问题我一直没有特意去“背诵”，毕竟自己的项目都没到前端性能的瓶颈。谈了谈懒加载、打包策略。 - 如果老板和你说网站首屏加载时间太长，但不知道什么原因，你如何一步步定位并解决问题？
先要定位问题，打开控制台看 timeline，如果那些阶段占用过长时间就会有长条的瀑布图显示。结果面试官追问如果 timeline 看起来很正常怎么办？我只能回答可能出现页面报错，js 文件出错没能正确进行一些 dom 操作，导致元素没有正常显示。 - 如果某个 js 文件必须在 header 中被加载，而它又操作了 body 中才有的 dom 元素，怎么办？
可以在该 js 文件之前加一个适配的 js 文件，手动 append 一个可供该文件选择的 dom 元素，然后再页面 onload 之后删除适配该元素。
HR
- 目前的 offer 有哪些，想如何选择？
- 你做前端的目标是什么
- 在学校的学习成绩怎么样？
- 对工作地点有要求吗？
这个不能头铁乱讲，想稳拿 offer 就老实回答杭州。
腾讯 PCG 三轮技术
一面
几乎所有前端问题都问了一遍，刷新面试时长记录，记录几个我回答的不好或者印象深的。
- 从 URL 输入到页面展现到底发生什么？
经典问题，用于全面考验一个前端的网络基础，甚至能看出是否具有一定全栈能力，标准回答可以直接百度，然后可以结合一些自己的项目。 - 父元素和子元素宽高不知道的情况如何居中子元素？
这个问题其实和父元素高度知不知道无关，因为文档流中父元素默认包裹子元素，高度是由子元素撑开的。 - Webpack 用过吗，讲一讲。
- 如何用 ES5 实现 promise？
有各种版本的，思想就是 then 的链式调用先返回 promise，然后将具体回调推入队列等待延迟执行，延迟执行通过 setTimeOut 模拟。 - 前端性能优化有哪些方式？
掘金上有一篇文章：2018 前端性能优化清单
二面
几乎没问基础知识问题，一直考验对问题的解决能力，问了很多特定的场景题，也和面试官的团队负责内容相关。
- 平时怎么学习前端？
- 富文本编辑器怎么实现？
给标签设置 contenteditable 属性，然后使用浏览器支持的 document.execCommand 命令模式 API - 富文本编辑器会面临怎么样的攻击风险？如何避免？
就是变相问网络安全，把 XSS 和 CSRF 具体到场景里去作答。 - 如果要实现在离线情况下编辑且不丢失数据，怎么办？
先回答的是使用 localStorage，回答之后不断追问，还问了能否直接用对象存，后面扯到了引擎方面的问题。 - 如何实现一个可编辑的可以无限延伸的表格？
这里只能受虐了，尽力讲讲自己的想法，比如延时加载，滚动节流等等，但是仍然被不断追问直到没辙。 - CSS 基础好么，知道 DEN 么？
CSS 基础还可以，但是 DEN 真不知道。。。 - Webpack 用过么？里面的 tree-shaking 什么原理？
tree-shaking 是因为 import 静态引入的能力，得以对文件内容进行浅层比较，去掉未被使用的代码。 - 如何衡量一个软件的质量？如何保证产品的质量？
讲了一些软甲工程的思想，又讲了些敏捷中的测试驱动开发，科班的知识终于在这里用到一点。 - 写过测试么？有没有用过测试的框架？
程序员自己写的测试能叫测试吗（狗头）。 - 你觉得自己对比其他人的优势在哪里？
此问让人很慌，只能不害臊地稍微讲讲自己的优点。
三面
- 介绍自己的项目。
- 你的项目怎么实现后端推送？
websocket 那一套。 - 除了 websocket 外还有什么方法能实现后端推送？
只能回答轮询了。 - 开发过微信小程序么，你感觉小程序和传统 web 以及 Flutter,ReactNative 之间的关系是什么？
一个很广的话题，从 html 静态页面开始说起，讲讲前端发展历史和趋势。 - 看你框架用得很多，说说 React 和 Vue 的区别？
直接从原理上，React 是 setState 那一套自己实现的更新体系，Vue 是 nextTick，并且每个属性都被劫持（2.0）或代理（3.0），可以精确定位，触发 watcher。 - http2 知道么，讲讲它和 http1 的区别，有什么新特性。
多路复用、新的二进制编码、头压缩、服务端推送等。 - 你还有什么自己的项目或者开源贡献讲一讲？
自己写的 flutter 项目，博客以及在关注的新技术新方向都讲了一遍。这种问题就是考察技术热情和活跃程度。
End
本文应该是面试系列中最长的一篇了，面的多，问的也多，希望看到这里的读者可以不断总结，完善自身。也祝愿所有看到此文的人能得到帮助，收获理想的 offer。
最后，如果你觉得本篇文章对你有所帮助，或者想再看看其他面试者的经历，不如扫描文章底部二维码给个关注，或者点个「在看」支持一下，你们的支持是我前进的最大动力！
更多阅读：
