原文地址：https://mp.weixin.qq.com/s/Xneq2FWi-xpJ_SUcq5WdSQ
17 年从上家公司离职之后就尝试过去阿里面试，结果还没进入状态就被凉凉了，在扇贝呆了 2 年多的时间，赶上正好租的房子要到期了，就想着再次尝试一下吧，结果还蛮顺利的拿到了 p6 的 offer，趁着目前在家里呆着哪里也不让去的功夫整理一下面试的过程，希望能帮到大家~

一面

  1. 自我介绍

此处就省略了，一般自我介绍的时间感觉不宜过长，简单说下就好~

  1. 从浅到深咨询一个项目

因为我在目前公司涉及小程序比较早，并且那个时候还没有比较成熟的线上监控方案，所以我们自己搞了一个线上错误监控系统，然后我就拿这个项目来说了，面试官会仔细的从设计思路，运行原理等等方面开始问，一直问到后端数据慢查询怎么解决，这个问题的时间大概占了面试时间的一半还多，然后得到的经验就是大家一定要自己实际去设计和实现一些项目，不能停留在眼高手低只看不落实的层面，如果这个项目不是我带头发起和亲身实现了里面的一些流程可能很容易就卡壳了，在做的过程中遇到的问题都是很宝贵的经验，当然也是成长的一部分~

  1. 简单介绍前端模块化，amd，cmd，commonjs es6 的 module

很尴尬，因为我们目前公司都是直接用esm，再加上自己确实没在前端项目中用过amd 和 cmd项目的类库，然后再加上异常的紧张(一面的时候紧张到说话都喘气，哈哈)，然后只聊到一个是同步加载，一个是异步加载，没说出来一个是前置依赖，一个是就近依赖，面试官也很耐斯，听到我有点紧张也没继续问了，说了一句安慰我的话-现在已经不怎么用了~，哈哈哈

  1. commonjs 和 es6 的 module 哪个支持异步

紧接着问了这个问题，emmm.. 当时差点没缓过来，冷静分析了一波，然后想到我们最近的项目中在做react组件的异步加载，想到了 es10 版本添加了异步 import() 方式去载入一个模块，所以答案毫无疑问是 esm 目前支持异步，其实返回来想想，如果用排除法这个也很简单，因为 commonjs 规范主要是给 node 层用的，node 层对于 module 的加载无非就是文件的读写，所以它根本没有必要去支持异步加载，读写 io 本身就很快~

  1. async await 和 promise 的关系

这个问题是当初我第一次面试阿里的时候回答的不好的一个问题，所以面试官专门提出来问了我一下，当然现在看这个问题就比较简单了，async await 是 promise 和 generator 函数组合的一个语法糖，这个没啥好说的~

  1. 口述代码，实现 promise.all 的 polyfill

可能还是担心我这块不是很熟悉，所以又问了一个相关的问题，这个比较简单，我直接写代码，当时是口述的，思路是一样的；

Promise.myAll = function(...args){
const result = [];
let isFail = false;
let errInfo;
let j = args.length;
for (let i = 0; i < args.length; i++){
// 如果有错误就停止循环
if(isFail) {
returnPromise.reject(errInfo);
         };
// 挨个运行promise
         args[i].then(res => {
// 处理结果
            result.push(res);
            j--;
if(j === 0){
returnPromise.resolve(result);
            }
         }).catch(err => {
// 设置停止循环的标志，存储错误信息
            isFail = true;
            errInfo = err;
         })
     }
}
// 以上都是未经运行未经测试的伪代码，可能有问题，大致思路就这样~
  1. flex 布局，固定高度，左边定宽，右边自适应？

这个比较简单，flex 布局给父元素设置 display:flex，左边的子元素 flex:none，给个 width:100px，右边的子元素 flex:1 就可以了，当然可能有别的方式，这个应该是最简单的~

  1. 如果子元素不能 100% 继承高度，怎么实现撑满？

这个问题我当时没反应过来面试官的意思，我问了一下是不是要纵轴方向的 flex 布局？后来面试官说 嗯。。也可以，这个过了。我就愣了，回来之后想了一下，不知道是不是说如果子元素无法 100% 的继承高度，那是不是可以结合定位的方式，比如父元素 relative，子元素 absolute，然后四个位置都是 0？不知道是不是这个意思无法考究了

  1. 对 ts 的理解

ts 用的不是很多，因为我们的项目大部分都是基于 h5 的，首先逻辑不是很复杂，因为每个 part 最多就三四个页面而且跟别的 part 基本没关系，业务决定并不是很适合 ts，所以也没在团队中怎么推广，但是有在后台项目，就是管理端用了 ts，所以简单说了一下 ts 和 js 的优缺点~

  1. ts 的泛型是什么作用

一下没反应过来怎么回答，因为本身 ts 用的不多，泛型用的更不多，但是后来我想了一下 java 中的泛型，再加上面试管的提示，我给的答案是泛型决定了一个类型在不同的场景下能够在每个场景下从始至终的保持类型一致，有点拗口，但是应该就是这么个意思~

  1. 假如监控系统别的组需要用，并且没满足他们的需求，你会怎么处理

瞬间没反应过来面试官想问啥，因此说了一大堆，比如说要看自己的团队是否有时间，要看这个需求是否合理，要看这个需求是一个定制化的需求还是一个比较通用的需求，等等各种情况下怎么处理都给了自己的方案，然后面试官打断我说我问的不是这个意思，是问你是你来做还是别的组来做？我说还是得分情况看事情和时间的安排，然后就过去了~

基本到这里一面就结束了，emmm，刚挂了电话，正好面试的部门有一个之前从扇贝离职去了的同事，面的还是很巧的同一个部门，大哥就跟我说恭喜一面过了。。哈哈，2 面开始就没那么紧张了

二面

隔了好像就两天 2 面就来了，2 面因为是晚上 8 点多才开始的，所以面试官本来说准备聊半个小时，结果还是聊多了

  1. 设计一个通过拖拽，然后交换位置的组件，给思路就可以。

emmm，网上有很多，大体就是关于拖拽的一些 api，然后怎么携带数据这些，我就不展开了~

  1. 假如有 2 个团队，一个团队想用另一个团队的一个类库，并且还是想在用到的时候才加进来，怎么办？

emmm。。我先说答案，是用 webpack 中的 externals 去配置一个 cmd 的异步引入，这个是面试官的答案，但是我印象面试官开始的时候没提到说要用 webpack，我一直在想的就是怎么异步加依赖，我就说可以让他们发布到自己的私服 npm 上，然后另一个团队安装，用的时候用 import 做异步加载。。balabala 说了半天，直到最后面试官来了一句你知道 webpack 的 externals 吗？我才反应过来emmmm，好吧

  1. 设计一个组件你会考虑哪些问题？

不得不说这个是个好问题，组件天天写，但是确实没好好整理过，当时问完我的时候，我是有点懵逼的，我在想就是看需要啥样子的就怎么样的设计呗，主要就是考虑一下扩展性，其实这个我每次开发的时候都会注意到，但是一下子竟然不知道怎么说了，balabala 讲了一堆，看需求分析啊，确定输入输出啊，考虑扩展性啊，别人怎么用啊之类的，其实我觉得面试官想问的可能是如何设计一个通用的组件，可以参考这个

  1. 回到一个我简历上的项目，这个项目的核心是让运营和产品能够自己替换线上活动页或者落地页的图片资源和文案一类的内容，同时还有定点替换的功能，这个面试的时候还没完全实现，不过现在已经上线了一个简单版本了，用着还可以，等待后续再迭代，这个项目问了一下简单的思路，我还准备描述我们在 node 做的缓存，结果面试官说我了解了，emmm，可能太晚了吧，哈哈

二面就结束了，完了看下时间，超了半小时，主要卡在第 2 个题目上，从始至终都没去向 webpack，这个确实还是自己的思路一下被限制的太死了，再加上我们通过 webpack 的 externals 去做的配置很少，基本就是简单的 jquery 这样引入过，后来为了方便都直接走 npm 装依赖了，其实还是要看场景，有时候偷懒确实是问题~~

三面

隔了三天左右，三面的通知就下来了，三面是 p8 的大佬，从头到尾都没问基础知识相关的内容；

  1. 自我介绍

省略。。

  1. 主要做的是哪些业务？

简单聊了一下在公司做的业务。。。

  1. 为什么感觉你们的产品会比别人家的业务要好？

这个问题涉及到一些产品的核心业务的卖点，没多说，讲了一点点。。

  1. 看你在带一个项目，你一般都是怎么协调资源的？

讲了一大堆。。

后面的几个问题不记得了，基本上都是和业务相关的，还有和产品、运营如何沟通协作等等的问题。。

三面基本都是涉及到业务相关的，总结下来就是我觉得越到后面面试反而更注重业务多一些了，这些东西不是临时抱佛脚能 get 到的东西，如果你对所做的事情不做更多的理解，对业务不做一定的思考，可能在这个环节会凉凉，我之前也一直有说我们每个开发都要做一个有灵魂的开发，不要把自己真的就只定义为码农机器，我们要加入自己的思考，比如，对接到的需求要有自己的理解，怎么样帮助需求方更完美的去实现需求，哪些该做的没有，哪些需求是伪需求不合理，都应该是每个人要学会和掌握的，至少在熟悉的环节要理解透彻~

四面

大概也是三天左右，四面的通知也下来了，是一个 p9 的大佬，比我想象的要老一点哈哈，所以小伙伴们不用担心我们吃的是青春饭，加油奋斗吧~

  1. 什么是 h5?

是 html 历史上的一个版本，也是一个协议，规定 html5 支持哪些、不支持哪些特性；

  1. 举几个 h5 的新特性

很多，比如媒体啊，storage 相关的等等

  1. 我看你做过小程序，你觉得小程序，webview 和 h5 的关系？

开始有点懵，我在想这应该是完全不同的东西吧，后来简单说了一下小程序，webview 属于是容器一类，它们可以用来承载 html 的内容，但是小程序的又不同于标准的 webview，它承载的是自己独有类 html 语法等等。。。

4.你们的业务主要用的是哪些方式？

native + webview 还有小程序，浏览器端只有后台项目，不是很多

后面的问题都不记得了，反而感觉四面的问题比较简单，时间也不久，就二十来分钟，可能是因为晚上快下班了吧~

总结

三面和四面都是视频面的，我都是提前十分钟就在线等了，说话的时候面试官都能看到你的一言一行，还是注意点，把周围的环境也弄整齐一些，给面试官留个好印象~

经历了大概 2 周的时间，顺利面完，最后的 hr 是现场面的，也问了很多个人相关的问题，hr 面的内容还蛮多的，并且 hr 面会涉及到一些技术相关，当然不是基础内容~

最后就是体检，背调等等，顺利拿到 offer，也拿到自己想要的薪资，特地把能想到的面试内容都分享一下，加油吧，我面的是南京的岗位，有想跳槽到阿里，或者想交流面试经验的，想 get 一些私密经验的，emmm…，还有想技术交流的，都可以添加瓶子君

添加成功后，发送关键字交流，拉你进群哦~

xuehuayu.cn

写在最后

武汉加油，中国加油，所有这一切都会过去的~

最后的最后，大家记得出门戴口罩，勤洗手哟~