小米前端面经(社招)

前言

近一段时间我投了不少大厂的前端岗位，但是由于刚刚参加工作一年多点，所以要么简历没过筛选，要么面试一两轮就挂了，之前面试过阿里的，两轮挂了，头条一面没过，于是这段时间来自己又总结之前的面试经验，为自己充电。
事情发生在一个月黑风高的夜晚，不对，说顺嘴了，抱歉！！事情发生在周五的一个傍晚，我正在参加公司的团建活动，大家聚餐比较热闹，吃完饭才发现有一个陌生号码。但是我拨回去却打不通了，当时我就觉得是某家公司的面试通知，想了想最近投过的公司，想到了小米，然后度娘了一下那个电话，虽然没搜到具体信息，但是百度的相关消息里有一条是号码******是小米的招聘电话吗，我一看，好吗前几位和我这个一模一样，然后心里就觉得是小米的概率会比较大。
无奈赶上了周天，我打了这个电话一直没人接，直到周一晚上才打通，一问果然是小米的面试邀请！(要是没打回去的话估计连面试的机会都没了。。。)，对，提前说一下，小米的社招一共是四轮面试，三轮技术面急＋一轮hr面。

面试经过

按照和hr小姐姐约好的时间，我提前半小时到达目的地，本以为会是清河的小米大厦，不过邮件上给的地址是在西二旗的小米四期。由于他们下午两点半上班，所以我在外面等一一会儿，然后一个挺帅气的小哥哥出来了，也就是一面的面试官。面试官找了一个比较清静的地方开始了第一轮技术面，话不多说，直接上干货。

一面

你对vue掌握多少？
vue双向绑定的实现原理说一下？数据劫持＋订阅发布模式，订阅发布模式如何实现？
vue中key的作用？vue有原地服用的原则，通过key决定是否对元素复用，如果不绑定key会引起什么问题？
vue父子组件间怎么进行通信？
平时怎么处理多个同级组件间的通信的？vuex用的比较多，event bus有了解，但是没用过。。。
vuex的组成？store，action，mutation，modules，分别讲一下各自的作用？
有写过vue异步组件吗？
有自己在npm上发布过依赖包吗？没有。。。。
webpack的作用是什么？开发环境和测试环境之间的配置文件有什么区别？
devtool有那些选项，分别有什么作用？我只说了sourse-map和eval-source-map
devServer的实现原理了解过吗？没有。。。
说一下event loop的过程？宏任务和微任务巴拉巴拉。。。
reqeustAnimationFrame有用过没，是如何使用的？就是递归调用呗。她是属于微任务还是宏任务？我说的微任务，下来度娘才知道是宏任务。
promise定义时传入的函数什么时候执行的？立即执行。
promise.all用过吗？如何实现当其中一个promise抛出错误的时候也能顺利执行promise.all的回调？我当时想的是不让错误进入到catch阶段，而是强行resolve一个提示错误的信号，但是具体怎么实现没太想好，后来查资料知道是通过在promise里设置try catch语句当异步操作出错时强行resolve一个信号，这样就不会跑到promise.catch里了。
css里的flex布局用过吗？用过，垂直居中，自适应。原理了解过吗？没有。。。
时间模型的三个阶段说一下？三个嵌套的div，每个div都同时绑定一个捕获事件和一个冒泡时间，写出事件执行顺序？
事件代理？父节点定义了多个点击事件，点击子节点，如何实现一个事件不执行，其他所有的事件都执行？用stopDefault()组织该事件默认行为。
如何阻止冒泡？在时间中调用stopPropagation()。
浏览器的缓存机制？
前端工程化的理解？前后端分离巴拉巴拉。。。部署方面呢？没太答上来。
一面就这么结束了，大概一个小时吧，然后小哥哥让我等一会儿。

二面

过了十分钟左右吧，另外一个小哥哥来了，这一面是其他部门的面试官，也就是交叉面。

平时pc端做的多还是移动端做的多？pc，移动端主要做一些自适应和响应式布局。
主要是通过什么手段实现响应式布局的？媒体查询配合弹性布局，rem之类的。
做移动端适配的时候需要设置什么？<meta name=“viewport” content=“width=device-width;initial-scale=1;”>
详细说一下viewport？visual port、layout port、ideal port巴拉巴拉。。。。
做过动画吗？css动画和reqeustAnimationFrame比较？
css动画实现一个div平移动画，用translate和left有什么区别？
flex布局了解吗？平时主要是做自适应和水平居中，用flex写一个水平垂直居中？
手写了一个react组件，组件里有A和B两个子组件，A组件属性接受了父组件的state属性，B组件没有接受state属性，当父组件setState之后，如何变化？我回答的是A更新B不更新，面试官给我纠正了一下，A、B的render都会执行，在react中，父组件更新，默认是会更新所有子组件、孙组件的。这种情况下，你必须重写shouldComponentUpdate方法，自行判断这个组件是否需要更新，return false就会阻止更新。
还是刚刚的组件，实现一个异步获取数据列表[‘a’, ‘b’, ‘c’…]，然后将这个数组中的数据渲染到dom中去的功能，最终是一个dom列表(<li>)。在componentMounted钩子里异步操作然后setState就ok了。为什么用componentMounted？因为此时dom节点已经挂载完毕，可以安全的对dom进行访问。
react展示组建和功能组件的区别？
react定义事件？使用前需要bind。
es6新特性说一下？let、var、const区别？es6如何实现块级作用域的？
WeakMap用过吗？没。。。
promise.all？如何实现一个链式异步请求，一个请求完成继续下一个请求?then链式执行呗。中间如果有一个promise出错怎么办？如何确保执行到最后？我答的还是try catch前行resolve，不过好像不太对，有知道的大神求指导。
promise、async/await、generator区别？
手撕代码：找出一个字符串中重复次数最多的字母？
手撕代码：实现对象的深克隆？
二面结束，我跟小哥哥说明了下我的情况，请假出来面试不太方便，尽量一次性面完，小哥哥让我等一会儿，然后是等待时间。。。

三面

三面的时候脑子已经有点儿晕了稍微，尽量保持清醒。三面是最后一轮技术面，果不其然，是一个比较有气场的小哥哥，比较帅气，不出意外的话应该是部门的技术leader。三面的气氛感觉和前面明显不一样，问的问题也不再局限于前端，有简历上的经历，也有计算机相关的其他领域的知识，综合性很强，其实这是最头疼的，有些问题没涉足过，真的不太了解。。。
首先上来是一道经典的两侧定宽，中间自适应的题目，但是加了点东西，就是头部一个header，header下面是经典案例，但是要求各个元素有显示顺序，header->center->left->right，我当时直接用了浮动：

<!DOCTYPE HTML>
<html>
<style>.parent {text-align: center;width: 500px;height: 400px;}.up-wrap {background-color: #ccc;height: 30%;}.down-wrap {overflow: hidden;height: 70%;}.left {background-color: #f00;width: 100px;height: 100%;float: left;}.right {background-color: #f00;width: 100px;height: 100%;float: right;}.center {background-color: #cc2;margin-left: 100px;margin-right: 100px;height: 100%;} 
</style>
<body><div class="parent"><div class="up-wrap">1</div><div class="down-wrap"><div class="center">2</div><div class="left">3</div><div class="right">4</div></div>
</div></body>
</html>

当时以为清除浮动就万事大吉，但是忘了left、right需要定义在center前面才会不换行，但是题目要求的是center首先显示，因为必须是center在left、right前面，这样会导致一个问题，center是块状元素，left、right会被挤到下一行，导致left、right不可见。
面试回来后由写了一下，改用绝对定位就好了，直接彻底脱离文档流：

<!DOCTYPE HTML>
<html>
<style>.parent {text-align: center;width: 500px;height: 400px;}.up-wrap {background-color: #ccc;height: 30%;}.down-wrap {overflow: hidden;height: 70%;position: relative;}.left {background-color: #f00;width: 100px;height: 100%;position: absolute;left: 0;top: 0;}.right {background-color: #f00;width: 100px;height: 100%;position: absolute;right: 0;top: 0;}.center {background-color: #cc2;margin-left: 100px;margin-right: 100px;height: 100%;} 
</style>
<body><div class="parent"><div class="up-wrap">1</div><div class="down-wrap"><div class="center">2</div><div class="left">3</div><div class="right">4</div></div>
</div></body>
</html>

面试官看我研究生期间做过图像处理，问我为什么没从事这个，我说研究生两年时间只够入个门，然后实习做的也是前端，渐渐的就喜欢上了前端，说了一下我的毕业设计内容，然后给我出了一道算法题，给了我一组坐标点list，让我求经过所有点的最短路径组合，我想了半天，只能想到最简单粗暴的方法，排列组合求出所有路径的长度，取最大值，但是这显然是复杂度很高的做法，然后面试官提示我用分治思想，我最终还是没写出来。然后让我写了个“双飞燕”布局，按照顺序加载dom节点，并且能撑满高度，中间我写的一些地方面试官认为有点儿问题，然我回去试一下。再然后面试官问我想离职的原因，我说希望能进入更大的平台提升自身技术能力，然后聊了半天，面试官也给我提了一些学习成长的建议，挺受启发的。然后聊到关注react17和vue3的时候，面试官突然想到了diff算法，让我手写一个深度判断两个对象是否一致的函数，我写了一下，用的递归，但是中间分情况讨论的地方可能有的情况没写出来，就写了个大概实现。
然后问了webpack打包会生成hash名称，怎么判断这个资源是否变了，我说etag，面试官又问我etag怎么生成的，我一知半解的说了一些，后台的了解的不多。
最后就是熟悉的问问题环节，我问了下他们现在主要做什么内容，用的技术栈，还有面试结果多就能知道，面试官说他知道的都在一到两周内有恢复，如果技术面通过会有hr联系。为时四个小时的小米面试之旅就这样画下了句号。