两年工作经验成功面试阿里P6总结（配答案）

﹏ヽ暗。殇╰゛Y 2024-04-19 11:25 55阅读 0赞

## 阿里部门未知（一面） ##

**说说Webpack的实现原理**

> 小提示：这个直接回答不知道，问题较大，我这里猜测一下是类似Babel和AST抽象语法树相关，有空去看下源码。

这个问题希望同学可以补充一下。

**首屏优化有哪些解决方案**

> 小提示：这个问题在回答懒加载的过程中，面试官追问懒加载的Webpack配置，我说了和代码切割相关。

关于懒加载，这里推荐一篇非常好的文章：[Webpack 大法之 Code Splitting][Webpack _ Code Splitting]。

**Node.js的加载机制（`require`和`module.exports`）**

> 小提示：这个问题其实是非常常见的问题，建议大家阅读一下源码，有些也可能会问一下比较简单的问题，例如 `module.exports`和 `exports`的区别，或者也可能问CommonJS引入和ES6引入的区别。

**你觉得你最擅长什么**

> 小提示：这个问题是个大坑阿，我这里直接回答我什么都不擅长，这样回答显然面试官是不会不满意的，建议大家在面试前好好想想自己到底擅长啥。

**React和Vue的区别**

> 小提示：这里React真的好久没用了，几乎忘记了，大致说了下单向数据流、双向数据绑定、数据监听方式、JSX以及Vue的单文件组件、函数式编程、Vue的指令之类的。

这个问题希望同时熟悉React和Vue的同学可以补充一下。

**React、Vue和JQuery在什么场景下怎么选型**

这个问题希望同学可以补充一下。

**Vue的响应式原理**  
**什么情况下会阻塞DOM渲染**

> 小提示：面试官这里应该想问DOM渲染的过程中可能有哪些情况会阻塞渲染。我当时回答不知道。

这个问题希望同学可以补充一下。

**有哪些异步函数**

> 小提示：回答了宏任务和微任务。

**讲讲MVVM，说说与MVC有什么区别**

> 小提示：这个问题我专门发了一篇掘金文章，但是很多人好像都不是很感兴趣的样子，但是面试官真的就问了这样一个问题。

这里推荐我之前写的掘金文章[基于Vue实现一个简易MVVM/MV\*设计模式的演变历史][Vue_MVVM_MV]，一开始重点讲解了MVC、MVP以及MVVM的演变过程和区别。

##    阿里CBU技术部（一面） ##

**说说z-index有什么需要注意的地方**

> 小提示：真的忘记的差不多了，就简单说了只能在同一层叠上下文中进行 `z-index`值比较、和绝对定位的关系， `z-index`值不需要设置过大，只需要理清楚层级关系即可。面试官追问了 `z-index`值和 `background`的覆盖关系，还追问了绝对定位元素以及后来居上的准则。面试官还问了z-index默认值是什么， `0`和 `auto`有没有区别？真的对于CSS可能平常就用的不多，所以这个问题答的不是很好。

可能面试官最想知道的是下面这张图：

![format_png][]

这里附上张鑫旭的文章[深入理解CSS中的层叠上下文和层叠顺序][CSS]。

这里由于回答了定位，面试官追问固定定位的元素是相对于什么进行定位？相对定位会脱离正常文档流么？绝对定位是相对于什么元素进行定位？

**熟悉CSS3动画么**

> 小提示：CSS3动画硬件加速？CSS3动画的性能问题（重绘和重流，是否需要脱离正常文档流）？这个我当时答不知道，确实平常用的很少，如果熟悉Vue过渡动画的同学可以讲讲过渡动画？

**有没有做过什么可视化的项目**

> 小提示：我的回答：地图算么？基于OpenLayers设计过地图的Vue组件库。

对于可视化希望同学可以补充一下。

**你觉得你最擅长的是什么**

> 小提示：这个问题简直就是给人挖坑。

**Flex实现两列布局**

这里简单实现一下（其实应该使用`flex-basis`属性）：

html:

javascropt:

.box {
      height: 200px;
      display: flex;
    }
    
    .box > div {
      height: 100%;
    }
    
    .box-left {
      width: 200px;
      background-color: blue;
    }
    
    .box-right {
      flex: 1; // 设置flex-grow属性为1，默认为0
      overflow: hidden;
      background-color: red;
    }

**ES6/ES7/ES8的特性  
说说DOM事件流**

> 小提示：面试官追问事件委托有什么优点（起码两个以上）、  
> target/currentTarget/relateTarget具体指向什么目标。

**你觉得你有做过推动流程或者改善流程的事件么，举例说明**

> 小提示：这个如果做过什么规范或者开发工具之类的，应该比较好回答。

**小结**  
总体来说这次面试面得很细，有些知识点已经忘记，建议大家面试前把一些感觉不是很熟悉的原生知识点回忆起来，尤其是在开发中都不怎么会使用一些CSS样式设计的童鞋（现在很多都是组件库的设计方案，样式早已经封装掉了）。

##    阿里企业智能事业部（一面） ##

**Event Loop  
Webpack的loader和plugins的区别**

> 小提示：当时直接回答不知道，确实Webpack我只会用，还没了解过内部的实现原理和构成。这个后续无论如何都要好好理解一下原理。

这个问题希望同学可以补充一下。

**HTTP状态码206是干什么的**

> 小提示：工作中没有遇到过需要上传下载大型文件，所以这个问题当时老老实实回答不知道。具体应该和断点续传相关，可能也需要回答一些 `range`的头部信息等。

**React高阶组件的作用有哪些**

> 小提示：好久没用过React了，大致只知道Racct是单向数据流的，利用高阶组件可以实现类似于Vue的双向数据绑定。

这个问题希望同学可以补充一下。

**React和Vue的区别  
Service Worker有哪些作用**

> 小提示：当时怕说错，老老实实回答不知道。后来查了一下应该和缓存以及HTTP请求拦截相关。

这个问题希望同学可以补充一下。

**跨域  
文件上传的二进制具体是怎么处理的**

> 小提示：只知道上传的头信息是 `application/x-www-form-urlencoded`，也可以对上传的文件的数据进行拦截处理，例如对上传文件的信息进行加密处理。

这个问题希望同学可以补充一下。

**Vue响应式原理  
首屏加载性能优化  
小结**

其实这一次面试自己感觉面试的不是很好（尽管面试官问的确实比我上面列出的问题多），因为有好几个问题自己确实不清楚。这里再次建议大家不知道就是回答不知道，这样不会对面试官造成一些负面印象。这一次面试能够通过运气占了很大一部分。

##    阿里企业智能事业部（二面） ##

**computed的实现原理  
Vue的整个实现原理**

> 小提示：当时面试官问的蛮好玩的，他问从开始写一个.vue文件开始到DOM渲染到页面上，Vue做了哪些工作。然后我当时没理解面试官是要问vue-loader？DOM树的渲染过程？来来回回试探性的问了面试官几次，才理解原来面试官想知道Vue源码的整个实现过程。

大家如果想了解Vue源码实现的整个粗略过程，可以看下之前写的文章[基于Vue实现一个简易MVVM/Vue的运行机制简述][Vue_MVVM_Vue]。  
**通讯**

> 小提示：由于这边涉及到一些海康的设备（上下位机通信），面试官问我如何知道上位机软件给下位机设备发送了5次信息。这个其实大部分Web前端开发在工作上很难遇到类似的问题，辛亏我以前毕业设计中做过上下位机的TCP通讯。后来我从Leader面那里了解到二面面试官应该是做iot物联网开发这一块的。

请求帧数据结构如下：

帧头	帧序号	帧负载	帧校验	帧尾
    2 Byte	1 Byte	N Byte	1 Byte	1 Byte

这里帧头使用2字节识别，校验可以采用CRC校验，帧序号用来识别发送了几次信息。

**Chrome插件如何屏蔽广告**

> 小提示：这个问题当时回答不知道，其实后面想想最简单的办法是先找出广告元素的一些通用特性，然后在Chrome插件中通过注入脚本的形式将这些广告元素隐藏掉。

这里不知道有没有更好的其他方式，例如不知道Service Work对请求拦截处理是否可以有效屏蔽广告等，这个问题希望同学可以补充一下。

**如何判断两个变量相等**

> 小提示：这里需要分基本类型和引用类型，面试官在这里具体想问的是 `Object.is`的实现原理。这是面试官问我的第一个问题，当时直接回答不知道，内心都觉得接下来要凉凉了。

**Watch的运行原理  
Vue的数据为什么频繁变化但只会更新一次**

> 小提示：这里问的是Vue源码对于视图更新的优化。我这里的回答是乱糟糟的，希望有同学能够给出一个精准并且简短的回答。

Vue 异步执行 DOM 更新。只要观察到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据改变。如果同一个 watcher 被多次触发，只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作上非常重要。然后，在下一个的事件循环“tick”中，Vue 刷新队列并执行实际 (已去重的) 工作。Vue 在内部尝试对异步队列使用原生的 `Promise.then` 和 `MessageChannel`，如果执行环境不支持，会采用 setTimeout(fn, 0) 代替。

另外，关于`waiting`变量，这是很重要的一个标志位，它保证`flushSchedulerQueue`回调（$nextTick中执行）允许被置入`callbacks`一次。

因为Vue的事件机制是通过事件队列来调度执行，会等主进程执行空闲后进行调度，所以先会去等待所有的同步代码执行完成之后再去一次更新。这样的性能优势很明显，比如：

现在有这样的一种情况，`mounted`的时候`test`的值会被循环执行++1000次。 每次++时，都会根据响应式触发`setter->Dep->Watcher->update->run`。 如果这时候没有异步更新视图，那么每次++都会直接操作DOM更新视图，这是非常消耗性能的。 所以Vue实现了一个queue队列，在下一个tick（或者是当前tick的微任务阶段）统一执行queue中Watcher的run。同时，拥有相同id的Watcher不会被重复加入到该queue中去，所以不会执行1000次Watcher的run。最终更新视图只会直接将test对的DOM的0变成1000。 保证更新视图操作DOM的动作是在当前栈执行完以后下一个tick（或者是当前tick的微任务阶段）的时候调用，大大优化了性能。

执行顺序`update -> queueWatcher -> 维护观察者队列（重复id的Watcher处理） -> waiting标志位处理（保证需要更新DOM或者Watcher视图更新的方法flushSchedulerQueue只会被推入异步执行的$nextTick回调数组一次） -> 处理$nextTick（在为微任务或者宏任务中异步更新DOM）->`

*  Vue是异步更新Dom的，Dom的更新放在下一个宏任务或者当前宏任务的末尾（微任务）中进行执行

由于VUE的数据驱动视图更新是异步的，即修改数据的当下，视图不会立刻更新，而是等同一事件循环中的所有数据变化完成之后，再统一进行视图更新。在同一事件循环中的数据变化后，DOM完成更新，立即执行`nextTick(callback)`内的回调。

vue和react一样，对dom的修改都是异步的。它会在队列里记录你对dom的操作并进行diff操作，后一个操作会覆盖前一个，然后更新dom。

**Event Loop  
除了Flex还可以用什么进行布局**

> 小提示：我猜这里面试官想问的是Grid，当时说不知道。

**绝对定位、固定定位和z-index**

> 小提示：感谢CBU技术部的面试官。

**绝对定位**

*  一旦给元素加上`absolute`或`float`就相当于给元素加上了`display:block`
 *  `absolute`元素覆盖正常文档流内元素（不用设z-index，自然覆盖）
 *  可以减少重绘和回流的开销（如`absolute+ top:-9999em`，或`absolute + visibility:hidden`，将动画效果放到`absolute`元素中）

**属性介绍**

*  `static`，默认值。位置设置为static的元素，它始终会处于文档流给予的位置。
 *  `inherit`，规定应该从父元素继承 position 属性的值。但是任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 “inherit”。
 *  `fixed`，生成绝对定位的元素。默认情况下，可定位于相对于浏览器窗口的指定坐标。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。不论窗口滚动与否，元素都会留在那个位置。但当祖先元素具有`transform`属性且不为none时，就会相对于祖先元素指定坐标，而不是浏览器窗口。
 *  `absolute`，生成绝对定位的元素，相对于距该元素最近的已定位的祖先元素进行定位。此元素的位置可通过 “left”、”top”、”right” 以及 “bottom” 属性来规定。
 *  `relative`，生成相对定位的元素，相对于该元素在文档中的初始位置进行定位。通过 “left”、”top”、”right” 以及 “bottom” 属性来设置此元素相对于自身位置的偏移。

浮动、绝对定位和固定定位会脱离文档流，相对定位不会脱离文档流，绝对定位相对于该元素最近的已定位的祖先元素，如果没有一个祖先元素设置定位，那么参照物是body层。  
绝对定位相对于包含块的起始位置：

*  如果祖先元素是块级元素，包含块则设置为该元素的内边距边界。
 *  如果祖先元素是行内元素，包含块则设置为该祖先元素的内容边界。

问答题：

*  定位的元素的起始位置为父包含块的内边距（不会在border里，除非使用负值，会在padding里）
 *  定位的元素的margin还是能起作用的
 *  background属性是会显示在border里的
 *  z-index是有层叠层级的，需要考虑同一个层叠上下文的层叠优先级
 *  z-index是负值不会覆盖包含块的背景色（但是如果有内容，会被包含块的内容覆盖）
 *  z-index的值影响的元素是定位元素以及flex盒子
 *  上面一个定位元素，下面一个正常流的元素，定位元素会覆盖在正常流元素之上，除非给z-index是负值
 *  页面根元素html天生具有层叠上下文，称之为“根层叠上下文”

**小结**

这一次面试官问我的第一个问题`Object.is`就没答上来，不过面试官显然没有因为开头答的不好就否定面试者。大家如果在面试时第一个问题就答不上来，不要慌，要保持良好的心态，把接下来能答的问题好好答上来。可能很多同学会疑问，好像还有好几个问题感觉没答上来，但是可能只要有一个问题答的非常出彩，仍然可以弥补那些没答上来的问题（这里面试官当时说Vue源码的实现过程我说的比较清楚，还没有一个面试者答的比我更清楚的）。

##    阿里企业智能事业部（Leader面） ##

三面是Leader现场面，我当时特别担心有赞二面的情况发生，冷不丁又给你来一道算法题，这些真是我最不擅长的点。因为有点心虚我就问了下在阿里的师兄（师兄可能也做招聘工作，当时还怪我没有找他内推...），他说现场面其实最主要的是好好准备简历上的内容，面试官一般都会根据简历进行问答，还说他当时面试阿里时会让他画一些框架层次图（这个我当时没在意，结果面试官确实让我根据其中某个项目画一个框架层次图）。Leader面的时候在场的有两个面试官和一个HR。

**Leader（一）面试**

先是进来一个气场很足的Leader，看起来很权威，但是问问题还蛮随意的，就简单的让我介绍一下自己做的项目，然后翻看了我做的一些东西。感觉他好像有点心不在焉，翻看的很随意，我在回答问题的时候用余光关注了一下大佬的表情，感觉他在我**项目经历**那一块停留了非常长的时间。

**Leader（二）面试**

我正回答着自己的项目经历，Leader二和HR进来了，等我回答完Leader一就让Leader二开始面我。Leader二就问了我其中的两个项目。问我的第一个项目是自己做的公司内部的工具，他问这个平台有什么可以衡量的数据表明公司内部人员的使用情况。我回答当时因为领导觉得没必要做，就没有做数据统计这一块，告诉了他数据库里的一些真实数据情况。然后他问PV、UV应该怎么统计（我当时还厚脸皮的问他PV和UV是什么）？如果访问的页面出不来PV怎么统计？页面有没有做什么行为监测？页面访问量过大怎么处理？我大致讲了一些我的思路。

接着问我第二个项目（Low Code相关），我就回答了这个项目的技术体系，从以前做了什么到现在做到什么程度，到未来需要做成什么样，统统仔细的说了一遍。Leader二就问我未来做成什么样能不能思考一下怎么做，给了我5分钟的时间（这期间他一直反复的在翻阅我的简历）。然后我就假装思考了5分钟左右，其实脑子里一片空白，当时对于未来要做成什么样还只是个构思。然后Leader二还是很体贴的，他说你可以在墙上画一画（墙上可以写字），我就大致画了画，Leader二问我能不能画一画这个项目的框架层次图，我就简单的画了画...最后Leader二直接说你们做的太Low了，这个（Low Code）在我们这里已经是两年前的技术了...（这个我还是要解释下，我所在的部门从开始用Vue到目前只有短短的两年时间，在这两年时间里技术体系还是飞速的在沉淀和发展，我离开之前已经构思并实现了部分Vue技术栈的Low Code解决方案，如果这方面感兴趣的同学也可以找我沟通）。

Leader二还蛮好玩的，他说Low Code如果真的做出来了，都没前端什么事情了，那你干嘛去？顺着这个问题他还问我未来的前端应该怎么发展？未来前端有哪些可以挖掘的点？我回答了一些Graphql、可视化等，我还说了一个特别搞笑的回答，我说从以往的发展来看，前端应该抢占后端的资源，把后端限制我们的事情让前端也能做，让前端更加解放。Leader二当场就进行了反驳，说是要有价值才做，而不是为了能做而做，吓得我不轻...然后Leader二还详细的跟我解释了未来发展这个问题他希望得到什么回答，当时还是觉得Leader二蛮亲切的。

##    HR面试 ##

Leader二问完以后HR就接着问我了以下几个问题：

*  为什么要离开现在的公司
 *  以前公司的岗位制度是什么样
 *  你是校招进去的么
 *  你现在的岗位等级情况
 *  你的绩效情况
 *  你领导对你的评价是怎么样的
 *  领导是不是经常找你沟通

然后Leader一顺着HR问了一个小问题：

*  你未来对于你的职业有什么规划

最后问我还有什么想问的，我当时已经被三个人问的有点迷迷糊糊了，然后想了想说没有。

**小结**

这次现场面其实我感觉自己面得不是很好，总感觉自己要挂了。总共面了将近1个半小时左右，尤其是Leader二的问题很多不是他想要的答案，但是最终居然过了。

##    阿里企业智能事业部（HR面） ##

企业智能事业部Leader面后又收到了HR面的面试通知，这一轮面试大致问了以下问题：

*  你为什么要离开现在的公司
 *  你们公司的岗位等级是怎么评定的，你现在是什么岗位等级
 *  谈谈你在公司的绩效情况
 *  你觉得你做的最有成就感的一件事
 *  你一般解决问题的方法有哪些
 *  你是因为什么契机选择做前端
 *  你有对你所在的公司做过什么流程或制度规范上的改进么
 *  你最近在看什么书，和工作相关么，你为什么要看这些书
 *  看到你之前还面试了其他两个部门都挂在了一面，你感觉是什么原因
 *  你期望的薪资待遇是多少

> 小提示：这里HR会问的其实不止这些问题，例如你为什么喜欢Web前端这个岗位、你未来的职业规划、你觉得你的优点和缺点有哪些、为什么选择阿里巴巴、对之前几个面试官做下评价、你用过阿里的哪些产品顺便谈谈这些产品的优缺点、你对于互联网是怎么理解的...

**小结**

对于HR面还是要好好准备的，尤其是有些问题还是很容易挖坑的，例如你为什么离开现在的公司（你当然不应该抱怨现在的公司有哪些不好的地方，更多的应该表明自己想要寻找更好的发展机会，自己的一些现实因素，比如对于我而言是现在应聘的公司离自己的家更近，又或者是自己工作到达了迷茫期，想跳出迷茫期等等），你觉得你做的最有成就感的一件事（你要是说个简单的，HR会觉得你工作能力不强），你一般解决问题的方法有哪些（HR当然也想考察你解决问题的能力，你要是说什么百度啊之类的HR当然会觉得你解决问题的能力不强），你期望的薪资待遇是多少（你要是不喜欢这家公司，可以期望高一些，你要是很喜欢这家公司面试过程很愉快上浮个30%左右，面试过程一般上浮个20%左右）。  
  
作者：子弈  
链接：[https://juejin.im/post/5d690c726fb9a06b155dd40d][https_juejin.im_post_5d690c726fb9a06b155dd40d]

![format_png 1][]

配上小编整理的前端面试题PDF

![format_png 2][]

配上小编整理的前端面试题PDF

**感谢您的朗读，金九银十，阿里，网易都要开凿了！拥有这些面试知识，为所心仪公司增加一份亲和力。加油！拿到officer,踏上正轨，祝您早日走上人生巅峰！**

原文：[https://zhuanlan.zhihu.com/c\_1152947740601491456][https_zhuanlan.zhihu.com_c_1152947740601491456]

[Webpack _ Code Splitting]: https://link.zhihu.com/?target=https%3A//link.juejin.im/%3Ftarget%3Dhttps%253A%252F%252Fzhuanlan.zhihu.com%252Fp%252F26710831
[Vue_MVVM_MV]: https://link.zhihu.com/?target=https%3A//juejin.im/post/5cd8a7c1f265da037a3d0992%23heading-0
[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9waWM0LnpoaW1nLmNvbS84MC92Mi00NDM1Y2M0YzIzN2JjMjU3MWY4NWFhNjViZDI3OGIzYl9oZC5qcGc?x-oss-process=image/format,png
[CSS]: https://link.zhihu.com/?target=https%3A//link.juejin.im/%3Ftarget%3Dhttps%253A%252F%252Fwww.zhangxinxu.com%252Fwordpress%252F2016%252F01%252Funderstand-css-stacking-context-order-z-index%252F
[Vue_MVVM_Vue]: https://link.zhihu.com/?target=https%3A//juejin.im/post/5cd8a7c1f265da037a3d0992%23heading-13
[https_juejin.im_post_5d690c726fb9a06b155dd40d]: https://link.zhihu.com/?target=https%3A//juejin.im/post/5d690c726fb9a06b155dd40d
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9waWMxLnpoaW1nLmNvbS84MC92Mi0xOTAwYzAyMGJjMmYyMGVkMGJjZDkxMTRhZDQwYzNlNF9oZC5qcGc?x-oss-process=image/format,png
[format_png 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9waWM0LnpoaW1nLmNvbS84MC92Mi0yZWUyMmZjZjY5Mzk5YTY3ZWY0MTU3YzA3NGY2NmZiM19oZC5qcGc?x-oss-process=image/format,png
[https_zhuanlan.zhihu.com_c_1152947740601491456]: https://zhuanlan.zhihu.com/c_1152947740601491456