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]；
 *   实现`getInterp 函数`
 *   可接收多个区间，并返回所有区间的交集（用区间表示），如空集用null表示
 * 示例：
 *   getInterp([5, 2], [4, 9], [3, 6]); // [4, 5]
 *   getInterp([1, 7], [8, 9]); // null
 */

题二：

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

  
  
    

      f
      o
      o
    
  

// 会输出：

{
  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 分钟吧，脑子乱。

• 没有随便问环节，我差不多有预感了。

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

个人经验分享

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

准备阶段

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

• 看源码，整理 Vue 与 React 框架的所有横向对比，包括渲染原理、虚拟 dom、diff、patch、fiber、批量更新，手写响应式，框架用到的模式、设计思想，性能优化，相关生态技术等等。

• webpack 原理、热更新原理、动态加载原理、常见 plugins、loader、常见优化，怎么打包、怎么分 chunk，怎么写一个 plugins，生命周期，微内核源码等内容，以及 rollup、gulp 的使用、应用场景。（我记得有一面一个考官对我说，你对整个研发流程都很清楚，但都并不深入，比如一个 webpack 打包分包的依据怎么判定……emmmm，我倒是会，你也不问我啊！）

• 跨端框架的研究，工程化的梳理，使用的技术栈的坑，移动端的一些实践，面试时额外准备的项目复盘，竞品调查，对方产品的资料，测试系列，还有很多如微前端、中台、serverless、可视化、Wasm 等就不举例了。

• 除此之外，我也看了很多面经、以及技术文章。

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

• 业务方面的思考和准备^[7]，你可以去这里看看，见微知著，多发散，一定会有启发

• 这是我关注的业务大佬：58 沈剑\_架构师之路^[8]、冴羽、爱笑的架构师

• 书籍方面：《金字塔原理》，有时间可以抽空看看，不保证有用。

面试阶段

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

• 回答问题前思考一下，虽然不保证有用，但还是要好好履行的。

• 多面几次，指的不同公司，只要你不嫌累。

• 在面试某一家公司时，根据前面的面试，尝试推测后续考官会问到的业务的大致范围，或者问内推同学，提前做准备。一般会问：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

声明：文章著作权归作者所有，如有侵权，请联系小编删除。

- EOF -

推荐阅读  点击标题可跳转

手撕前端面试代码题

2 年前端 7～9 月面试经历总结

32个原生 JS 知识点|面试高频

觉得本文对你有帮助？请分享给更多人

推荐关注「前端开发博客」，提升前端技能

每天推荐前端相关的教程，项目和经验等。

如果觉得这篇文章还不错，来个【分享、点赞、在看】三连吧，让更多的人也看到~