本来是想试试水，没想到五轮面试后真的面上了阿里前端岗

怼烎@ 2022-10-23 15:26 65阅读 0赞

# 背景 #

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

# 阿里四轮技术+一轮 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>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 还问技术相关的问题。

## 整体感受 ##

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

## 准备阶段 ##

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

**我把看过的面试题做了一个汇总整理，居然有280页PDF，无偿分享给大家，算是一个感恩回馈吧，有需要的朋友[【点击我】][Link 1]无偿获取。**

![cd76a398fde0d8dc5aa9a03954f566b9.png][]

![798a2848d0a31b9514c536f6143ab879.png][]

点击此处蓝色字体[280页《前端校招面试真题解析大全》][Link 1]查看详细内容。

掌握了以上内容，我们应该算是有一点知识广度了也能从容地应对前面的技术面了，当然，这不是短短几个月就能达成了，要时间的积累，那些一年就资深的牛人也是在大学甚至更早的时候就开始积累的，这一关逃不掉。

到此，“技术面” 这只老虎应该能打个半死，直接干倒是不可能的，以上的知识对于校招可能足够，但社招不一定用的上，哈哈。

然后就是社招的重点：业务面，怎么说呢，就是多思考多总结吧，深入思考，对每个问题一定要有深入的思考，不然就很难进入大公司了，深度上要有一个拔高才能在面试中获得好的成绩。

挑出你项目中的亮点，要被别人认可的亮点，这个比较难，各位只能自求多福了，也是我本人的短板，当时也是鸡蛋里挑骨头，这是我这次找工作遇到的最大拦路虎，业务太简单，你眼中的亮点面试官觉得不是……

## 面试阶段 ##

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

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

最后，拜佛烧香，求个好运。人和人的差异，在于认知和思考力的差异。假如你一时之间思维没有一个质的变化，不如求个好运。没有一个好的运气，上面的建议可能通通都不好使，毕竟社招面试内容本身就是不稳定的，有的重技术、有的重算法、有的重业务、有的重学历、有的重眼缘……

## 如何坚持学习？ ##

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

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

最后灵魂一问：

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

# 最后 #

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

[Link 1]: https://jq.qq.com/?_wv=1027&k=SBb7oFqq
[cd76a398fde0d8dc5aa9a03954f566b9.png]: /images/20221023/7894fa802dcf4b7d8d9cf3ac415a0adc.png
[798a2848d0a31b9514c536f6143ab879.png]: /images/20221023/898cfc7844fd439da430eb603ad5c593.png