自学转行前端3年经验，终入职阿里！

﹏ヽ暗。殇╰゛Y 2022-10-23 11:19 181阅读 0赞

![format_png][]

作者：洛禹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）。比如在如下页面中运行后：
     */
    <html>
      <head></head>
      <body>
        <div>
          <span>f</span>
          <span>o</span>
          <span>o</span>
        </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：这是我面试的目的之一，当时几个面试进度属猎豹最快了。别人眼中的我，在前端方面具体是怎样的感官 ？我一直很好奇。不是每个人都有一个对自己清晰的认识的，既然自己想不出来，那就通过面试吧）。

有什么问题想问？我随便问了几个问题过渡，然后抛出最重要的一个，厚着脸皮让大佬指出我的问题（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
 *  随便问环节，我问了考闭包的那道题，我没有做对。

这一面我准备了很多东西，结果又完美 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);
    复制代码

*  基础题：简单实现一个 LRU
 *  随便问环节

### 三面业务 leader（60min） ###

*  算法题：`从数组 [1, 5, 8, 10, 12] 中找到两个数和为 9，返回 [1, 8] 这样的结果。`
 *  算法题：`从数组 [1, 5, 8, 10, 12] 中找到三个数和为 19，返回 [1, 8， 10] 这样的结果。`
 *  算法题 leetcode 300：`给定一个无序的整数数组，找到其中最长上升子序列的长度。`
 *  针对我的项目提问，大概 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。最后，能看到这里的小伙伴顺手点个赞吧。

最后

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

![format_png 1][]

![format_png 2][]

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

![format_png 3][]

[format_png]: /images/20221023/2b83efac715b476cba5b0cca6d922845.png
[format_png 1]: /images/20221023/d8637e52f5314e2da388ab875f55c3af.png
[format_png 2]: /images/20221023/cbf0168f087442a29a611193e4cea519.png
[format_png 3]: /images/20221023/9dd2ea990c3b4d86be9146a68a90f8fb.png