2021千字大厂面经&个人成长经验分享：前端-轻识

（给前端大学加星标，提升前端技能.）

作者：洛禹 Keith
https://juejin.cn/post/6922290178836922381

背景

本人背景渣渣，较晚入行，在一家公司稳定了三年，从一个前端白纸到如今乱涂乱画，已成雏形。2020 年年末，我离职了，因为深刻意识到自己有多 "菜"，想专心花点时间提升自己。经过亿点时间的调整，我重装上阵。由于节前时间有限，只投了几家，当然都是找人内推的。

阿里四轮技术+一轮 hr

一面 (60min)

自我介绍主要围绕几个点：个人信息、最近的公司职责和涉及的业务、主要技术栈、我擅长的技术、项目介绍（STAR：项目背景、任务、你的工作内容、项目亮点、结果你实现了什么学到了什么）、最近在做什么、结语。
简历里写了两个技术栈，所以讲讲 vue 和 react 的区别和联系吧主要围绕几个点：两者的模板渲染、两者的虚拟 dom、diff 差异（vue2、vue3、react 16）、react fiber 能解决什么问题、vue2 的响应式原理和 vue3 的响应式原理；vue 关于 Proxy 与 Object.defineProperty 的区别；两者的批量更新，还有路由差异、常用的优化手段、怎么进行数据通信、讲点新鲜的内容：新发布的 vue3 有什么特性、最后总结，谈谈两者的如今的生态……
项目的性能优化主要围绕几个点：项目技术栈的性能优化，比如使用 react 可以讲避免重复渲染的一些手段，比如 electron 可以将如何更接近原生；针对浏览器做的优化（你需要了解浏览器相关原理，比如缓存/存储、代理、SSR 等，针对渲染引擎的工作内容想到的优化，比如解析 css 解析会影响 dom 渲染、合成优化减少回流重绘、web worker、Event Loop 等）；打包工具提供的优化，特指 webpack；针对具体的页面做的优化，比如首页该做什么，首页最新指标；最后讲讲应用场景、我的项目里用到了哪些方法，针对中等项目、大型项目的性能选择。PS：性能优化的内容如果认真讲，肯定两/三个小时下不来，因为性能优化没有终点，我面试时也只想到了上面的这些……
了解我们的产品吗？我提前 google 了团队的业务项目，之前也看过一些类似产品的文章，我结合自己的项目经验，说了一点理解，就几句话。
你想问什么？我问了本次的表现，了解了一些团队项目的工作内容、项目招人的背景、对于后续面试该做什么准备。一面没碰到手写题，都是很基础的问题，整体相对轻松。

二面 (60min)

晚上 9 点半的面试，面试官应该刚忙完，上来直接问业务，全程业务……权限页面的细节：

各个模块、按钮怎么设计权限；
分角色、分地域怎么设计？
要加个表头，还要控制展示的顺序，在各个浏览器表现一致，怎么设计？说出所有方案，想到什么自由发挥了……
聊到本地存储，问：localStorage 在各浏览器、移动端浏览器的 size 一致吗？

其他：

这一段是我简历的项目，略过……
继续聊阿里的产品，简单使用后，请提出几个可以优化的地方？
啥也没透露，让你预测下这款产品的接下来的方向，如果是你，你会着手哪个方向，并且凭啥让你来干，说下你擅长的……
正式讨论产品，大家都在做什么，团队协作的情况，公布接下来的迭代方向，针对的人群，目标……
照例闲聊，拜拜。

插曲：中间出现两次突然挂机，当时我的感觉就像过山车，从高空滑向低谷，整个心都是 ——某可爱漂亮的央视记者—— 的。

三面 (60min)

这一面是笔试，哈哈，我复习了很多手写题，结果是完全与三面的考题完美岔开，没有交集，emmm……，好在并不难……题一：

/**
 * 1.计算多个区间的交集
 *   区间用长度为2的数字数组表示，如[2, 5]表示区间2到5（包括2和5）；
 *   区间不限定方向，如[5, 2]等同于[2, 5]；
 *   实现`getIntersection 函数`
 *   可接收多个区间，并返回所有区间的交集（用区间表示），如空集用null表示
 * 示例：
 *   getIntersection([5, 2], [4, 9], [3, 6]); // [4, 5]
 *   getIntersection([1, 7], [8, 9]); // null
 */

题二：

/**
 * 2.DOM 的体积过大会影响页面性能，假如你想在用户关闭页面时统计（计算并反馈给服务器）
 当前页面中元素节点的数量总和、元素节点的最大嵌套深度以及最大子元素个数，请用 JS 配合
 原生 DOM API 实现该需求（不用考虑陈旧浏览器以及在现代浏览器中的兼容性，可以使用任意
 浏览器的最新特性；不用考虑 shadow DOM）。比如在如下页面中运行后：
 */
<html>
  <head>head>
  <body>
    <div>
      <span>fspan>
      <span>ospan>
      <span>ospan>
    div>
  body>
html>
// 会输出：

{
  totalElementsCount: 7,
  maxDOMTreeDepth: 4,
  maxChildrenCount: 3
}

题三：

// 3.请使用原生代码实现一个Events模块，可以实现自定义事件的订阅、触发、移除功能
/*
const fn1 = (... args)=>console.log('I want sleep1', ... args)
const fn2 = (... args)=>console.log('I want sleep2', ... args)
const event = new Events();
event.on('sleep', fn1, 1, 2, 3);
event.on('sleep', fn2, 1, 2, 3);
event.fire('sleep', 4, 5, 6);
// I want sleep1 1 2 3 4 5 6
// I want sleep2 1 2 3 4 5 6
event.off('sleep', fn1);
event.once('sleep', ()=>console.log('I want sleep));
event.fire('sleep');
*/

业务四面 (35 min)

周末，人在梦游，刚下航母，就激灵灵接到电话，人还是糊的……

跨端的原理？我讲了几个例子：taro、uni-app，顺便提了 flutter、react native、小程序等的架构，具体怎么设计的。
动态表单能够运用在什么场景？我举了 7、8 个例子。
移动端适配相关的问题，应用场景。
我公司的业务讨论，是否了解过竞品等等，这里略过。

hr 五面 (60 min)

对于你项目的竞品有了解吗？说一下
你的项目与竞品相比，好在哪里，有什么优势？
下班后都在做什么，问的都是过往经历，问的太详细了，让人不舒服。
如果与同事发生了意见的不一致，你会如何解决呢
现在针对我们的业务，急需增加一个新的模块位置，你会怎么设计？数据怎么展示……

没错，hr 还问技术相关的问题。

整体感受

总体面下来没有让人紧张的感觉，中规中矩，从刚开始较高的心理预期到后面慢慢回落……由于我的水平有限，最终没有争取到多高的薪水。

快手二面挂

一面（60min）

自我介绍
react 与 vue 的技术栈对比，说下区别
B 端遇到的最复杂的数据结构是什么
快速实现 [1, 2, ...100]，所有你能想到的解
数据展示的优化、数据截取和处理
实际场景中，哪些地方应用到了堆、链表、多叉树结构
es6 及 es6+ 的能力集，你最常用的，这其中最有用的，都解决了什么问题。
GC 相关问题：es6+ ，eventloop 中涉及 GC 的部分。
数组 flat 展开的各种解法，数组 map 应用
讲下 V8 sort 的大概思路
Promise 并发限制
手写 Promise.all
省市区拼接查字段，要求 O(n) 内解出
中台的理解
讨论了下业务
个人发展方向

一面的问题循序渐进，前面为后面铺垫。

二面（60min）

项目的复盘优化
说下业务上最复杂的点
node 限流算法
最有效的性能优化方法
你提到性能指标，能说说都是怎么计算的吗？比如 LCP，FID
算法题：数组全排列^[1]
中台业务讨论
离职原因

大早上面试，状态不佳，全排列算是基础了，脑子里有解题思路，但死活没写对，面完后狠狠又手写了几遍。

猎豹移动三轮技术面+一轮 hr 面

技术一面 (60min)

input type 都有哪些类型，还记得其他 attrs 呢
css 的伪类和伪元素有哪些？有什么区别？
在一个未知宽度的父元素内如何创建一个等边正方形
异步加载 js 会阻塞什么
数组所有方法都有哪些？findIndex 的参数说明
vue 和 react 的异同
如何优化 vue 框架，注意是优化框架
vue 和 react 的 jsx 使用
id key 真的能使列表比对更高效吗？举个反例？
webpack 优化的手段
tree-shaking 怎么配置，如何避免 tree-shaking？
electron 和小程序遇到什么坑？
说下微信自动化测试
es2015 到 es2020 的新特性，你最常用什么，给你收益最大的。
weakMap 和 Map 的区别，weakMap 原理，为什么能被 GC？
如何干扰 GC ？
webpack import 动态加载原理
知道 webpack 中的 devTool 吗？
如何进行错误定位和数据上报，线上异常的处理
为什么有时候配置了 webpack caching，chunk 还是更新了？
讲讲浏览器和 node 的 eventloop
微任务后面还有哪些？requestAnimationFrame 是怎么调用的？requestAnimationFrame 帧内总是有任务吗？分情况说下。
帧数怎么计算？
了解网络安全吗？
如何避免数据被 iframe 截获
说下状态码
说下 304，什么情况会 304？协商缓存的头部字段？
你学习的渠道
工程化实践的看法

第一个问题没进入状态，我心里想怎么问这么简单的问题，我宕机了一会……后面就顺利了，面试官全程冷淡，也不闲聊。无趣，后来问了下，是猎豹的前端架构师，嗯，大佬就该有大佬的气场，面试体验棒棒的~~

业务二面 (60min)

大致内容：业务交流，工程化实践交流、猎豹前端在做什么，资源有哪些，他们的业务是偏 C 端的，未来的方向、发展等等……这一面很轻松，想到什么说什么，当然逻辑性肯定要有的。

业务三面 (70min)

这一面的面试官是猎豹移动的技术负责人。

项目是如何收集问题的，用户量如何？
性能问题如何排查，你们项目的指标，具体数据、截图发给我看看……
模块化是怎么实施的？
目录结构讲下
一些功能是自研还是使用第三方工具，叫什么名字，怎么使用？
疯狂问测试相关的内容，单元测试和组件测试是怎么做的、代码覆盖率多少，如何权衡测试原则，系统测试相关的内容，一些细节上的问题怎么处理，等等，要说出个 1、2、3 来？
项目亮点/难点，怎么解决？
复盘，整个项目总结，让你重新设计这套系统你会怎么做？
工程化实践和深入的一个点
团队氛围，有什么好的点可以说下，有什么不好的点也说下……
中台具体集成了什么功能？你都做了什么？
你是如何进行技术突破的，又是如何学习的？
对未来的规划
有什么问题想问？我随便问了几个问题过渡，然后抛出最重要的一个，厚着脸皮让大佬指出我的问题（PS：这是我面试的目的之一，当时几个面试进度属猎豹最快了。别人眼中的我，在前端方面具体是怎样的感官？我一直很好奇。不是每个人都有一个对自己清晰的认识的，既然自己想不出来，那就通过面试吧）。

这次面试暴露的点：项目的总结、全局的把控、自我复盘都是有所欠缺的。另外不要给自己挖坑，有时候知道一些概念但不知道具体的实操和原理，还是别说了。当时，关于测试方面的问题，考官一直假装不懂，老是问：真的吗？这个我没做过，你给我讲讲吧？我原本没错的内容也被误导了，emmmm……

hr 四面（30min）

常规问题，没有阿里那么严格。

讲讲前任公司
离职原因
加班的看法
猎豹的福利
有没有其他 offer
balabala……

字节跳动三面挂

技术一面（60min）

刚开始就问我的项目，问的很详细。
webpack 提高构建速度的方式
loader 输入什么产出什么？
webpack 原理
webpack 动态加载的原理
webpack 热更新
如何写一个 webpack plugin
AST 的应用
如何解析一个 html 文本，还是考 AST
babel 原理，怎么写 babel 插件
如何设计一个沙盒 sandbox ？
小程序的 API 做了什么处理，能够做到全局变量的隐藏，如果是你，怎么设计？
基础题考闭包的，我讲对了思路，结果没做对。
实现颜色转换 'rgb(255, 255, 255)' -> '#FFFFFF' 的多种思路。
提供一个数字 n，生成一组 0~n-1 的整数，打乱顺序组成数组，打乱几次，如何能够看起来平衡，说出你能想到的所有方法。
leetcode 239^[2]
随便问环节，我问了考闭包的那道题，我没有做对。

这一面我准备了很多东西，结果又完美 miss。

二面技术 leader（60min）

业务，业务，还是业务，项目复盘有没有更好的解决方案。
如何处理一个重大事故 bug
监控体系
虚拟 dom 有什么好的地方？框架为什么要设计虚拟 dom？
webpack 的缺点，让你设计一个新的构建打包工具，你会怎么设计？
在线文档编辑，如何处理两人的冲突，如何展示，考虑各种场景
excel 文档冲突高级处理，文章冲突呢？是上个问题的深化。
基础题，直接写出答案：

let x = [1, 2, 3];
let y = x;
let z = [4, 5, 6];
y[0] = 10;
y = z;
z[1] = 20;
x[2] = z = 30;
console.log(x, y, z);
复制代码

基础题：leetcode 300^[3]
随便问环节

三面业务 leader（60min）

算法题：从数组 [1, 5, 8, 10, 12] 中找到两个数和为 9，返回 [1, 8] 这样的结果。
算法题：从数组 [1, 5, 8, 10, 12] 中找到三个数和为 19，返回 [1, 8， 10] 这样的结果。
算法题 leetcode 300^[4]：给定一个无序的整数数组，找到其中最长上升子序列的长度。
针对我的项目提问，大概 40 分钟吧，脑子乱。
没有随便问环节，我差不多有预感了。

是的，我的字节面止步于此了，这一面算法没有难倒我，基本上看到题目我就能想出解法。三面挂的原因是我简历上的项目太简单了，你想要真实，我给你真实，可惜你看不上这些真实（这次面试我的简历没有准备好是一大原因，各位，我就是你们的前车之鉴啊！）………

个人经验分享

这个应该是各个面经的保留节目了，我也在此留下笔记。主要分两个方面来讲，一个是前端技术的学习，另一个是面试当中需要注意的点。

准备阶段

本来想先介绍简历怎么写，不过这方面资料太多了，如果你的简历不过关，请找些面经或者内推群给予协助，让别人指导下，然后，说下重点：在这里首先要感谢一位同学，我在前文中反复提到的，神三元，谢谢你分享你学习时的感受、谢谢你整理的系列文章。毫不夸张的说，三元发布的所有文章，我都反复学习了至少十遍吧，甚至更多，顺便在学习的过程中找出了不少文章中的笔误。要说的是，人是健忘的，所以如果你对一些内容忘记了，请继续反复学习，前面的过程是痛苦的，后面复习的时候就很简单了，我们简单回忆就能找回失去的，毕竟咱们这么多年教育对这肯定深有体会。到了这里，你的基础应该有一点了，基本常见的手写题（看这里）已经难不倒你了，基于此，我又花了点时间刷了 Leetcode，还是一样的套路，不会就多刷吧，那些奇淫技巧很难靠灵光一现。另外我额外又整理了几万字的笔记（放心，这里没有链接……），笔迹的内容包括但不限于：

看源码，整理 Vue 与 React 框架的所有横向对比，包括渲染原理、虚拟 dom、diff、patch、fiber、批量更新，手写响应式，框架用到的模式、设计思想，性能优化，相关生态技术等等。
webpack 原理、热更新原理、动态加载原理、常见 plugins、loader、常见优化，怎么打包、怎么分 chunk，怎么写一个 plugins，生命周期，微内核源码等内容，以及 rollup、gulp 的使用、应用场景。（我记得有一面一个考官对我说，你对整个研发流程都很清楚，但都并不深入，比如一个 webpack 打包分包的依据怎么判定……emmmm，我倒是会，你也不问我啊！）
跨端框架的研究，工程化的梳理，使用的技术栈的坑，移动端的一些实践，面试时额外准备的项目复盘，竞品调查，对方产品的资料，测试系列，还有很多如微前端、中台、serverless、可视化、Wasm 等就不举例了。
除此之外，我也看了很多面经、以及技术文章。

掌握了以上内容，我们应该算是有一点知识广度了也能从容地应对前面的技术面了，当然，这不是短短几个月就能达成了，要时间的积累，那些一年就资深的牛人也是在大学甚至更早的时候就开始积累的，这一关逃不掉。到此，“技术面” 这只老虎应该能打个半死，直接干倒是不可能的，以上的知识对于校招可能足够，但社招不一定用的上，哈哈。然后就是社招的重点：业务面，怎么说呢，就是多思考多总结吧，深入思考，对每个问题一定要有深入的思考，不然就很难进入大公司了，深度上要有一个拔高才能在面试中获得好的成绩。挑出你项目中的亮点，要被别人认可的亮点，这个比较难，各位只能自求多福了，也是我本人的短板，当时也是鸡蛋里挑骨头，这是我这次找工作遇到的最大拦路虎，业务太简单，你眼中的亮点面试官觉得不是……当然我这里也可以提供一点方向给你：

业务方面的思考和准备[7]，你可以去这里看看，见微知著，多发散，一定会有启发
这是我关注的业务大佬：58 沈剑\_架构师之路、冴羽、爱笑的架构师
书籍方面：《金字塔原理》，有时间可以抽空看看，不保证有用。

面试阶段

很多面经都说回答问题时，思考一下再回答，为了组织语言，但有时候，你明明懂，在紧张的情况下反而会将关键信息跳过，答的让人不知所云。要做到：“想清楚，说明白，知道说什么，怎么说”，还是有一点难度的，关系到平常一点一滴的积累，这方面我上面已经提供了一点方向。剩下的就是面试阶段好好发挥了，没什么太好的办法，我这里建议：

回答问题前思考一下，虽然不保证有用，但还是要好好履行的。
多面几次，指的不同公司，只要你不嫌累。
在面试某一家公司时，根据前面的面试，尝试推测后续考官会问到的业务的大致范围，或者问内推同学，提前做准备。一般会问：1 你简历上的项目，2 对方部门知名的产品，3 招聘 jd 上的 title。
简单的复盘，保证别倒在同样的问题上。
增加知识的广度，可以引导向别的问题，考官也是乐意听的。
挑个面试的好时间，比如我本人，早上 10 点我的脑子无比灵光，说话都带着沉稳富有磁性……晚上 7 点后，就会莫名紧张，声音分贝提高几个点略微沙哑，这个真的因人而异。有时候沉稳不一定是好事，紧张反倒促使你偶有妙语和想法，当然也可能搞砸。
找几个方法迅速调整好你的精气神，在前面基础学习的时候也可以用上。
如果你够厉害，可以适当暗示和引导面试官问些你擅长的，千万不要被牵着鼻子走。
最后，拜佛烧香，求个好运。人和人的差异，在于认知和思考力的差异。假如你一时之间思维没有一个质的变化，不如求个好运。没有一个好的运气，上面的建议可能通通都不好使，毕竟社招面试内容本身就是不稳定的，有的重技术、有的重算法、有的重业务、有的重学历、有的重眼缘……

如何坚持学习？

这一块算是补的，我依然只给建议：

如果你玩游戏的话，请放弃游戏，或者戒掉一段时间，直到找到满意工作。
找到你的痛点。
分段学习，制定符合周期的计划。不要逼着自己，否则压力会让你崩溃的。
找点鸡汤，或者去找点你没有但渴望得到的东西。
业务方面，多看点书，多总结积累一些思考方式。

最后灵魂一问：

你的梦想是进大厂吗？你明白的，这需要一点小小的代价。
你是万中无一的奇才？如果不是，那么失败几次是正常的，大家都是普通人，也许只是不 match。

最后

文章到这就结束了，我的水平有限，我也不知道这篇面经能够拯救几个娃，相信很多人跟我一样都会有一个进大厂的梦吧。春招将至，希望大家都能在春招当中拿到自己满意的 offer。最后，能看到这里的小伙伴顺手点个赞吧。

参考资料

[1]

数组全排列: https://leetcode-cn.com/problems/permutations/submissions/

[2]

leetcode 239: https://leetcode-cn.com/problems/sliding-window-maximum/

[3]

leetcode 300: https://leetcode-cn.com/problems/longest-increasing-subsequence/

[4]

leetcode 300: https://leetcode-cn.com/problems/longest-increasing-subsequence/

[5]

@神三元: https://juejin.cn/user/430664257382462

[6]

手写题（看这里）: https://juejin.cn/post/6902060047388377095

[7]

业务方面的思考和准备: https://github.com/vianvio/FE-Companions/issues?page=1&q=is%3Aissue+is%3Aopen

[8]

58 沈剑_架构师之路: https://juejin.cn/user/2084329777810984