小米社招前端-三面面经
前言
近一段时间我投了不少大厂的前端岗位，但是由于刚刚参加工作一年多点，所以要么简历没过筛选，要么面试一两轮就挂了，之前面试过阿里的，两轮挂了，头条一面没过，于是这段时间来自己又总结之前的面试经验，为自己充电。小米的社招一共是四轮面试，三轮技术面急＋一轮hr面。
面试经过
一面
- 你对vue掌握多少？
- vue双向绑定的实现原理说一下？数据劫持＋订阅发布模式，订阅发布模式如何实现？
- vue中key的作用？vue有原地服用的原则，通过key决定是否对元素复用，如果不绑定key会引起什么问题？
- vue父子组件间怎么进行通信？
- 平时怎么处理多个同级组件间的通信的？
- vuex的组成？store，action，mutation，modules，分别讲一下各自的作用？
- 有写过vue异步组件吗？
- 有自己在npm上发布过依赖包吗？
- webpack的作用是什么？开发环境和测试环境之间的配置文件有什么区别？
- devtool有那些选项，分别有什么作用？
- devServer的实现原理了解过吗？
- 说一下event loop的过程？
- reqeustAnimationFrame有用过没，是如何使用的？就是递归调用呗。她是属于微任务还是宏任务？
- promise定义时传入的函数什么时候执行的？
- promise.all用过吗？如何实现当其中一个promise抛出错误的时候也能顺利执行promise.all的回调？
- css里的flex布局用过吗？用过，垂直居中，自适应。原理了解过吗？
- 时间模型的三个阶段说一下？三个嵌套的div，每个div都同时绑定一个捕获事件和一个冒泡时间，写出事件执行顺序？
- 事件***？父节点定义了多个点击事件，点击子节点，如何实现一个事件不执行，其他所有的事件都执行？用stopDefault()组织该事件默认行为。
- 如何阻止冒泡？
- 浏览器的缓存机制？
- 前端工程化的理解？
二面
- 平时pc端做的多还是移动端做的多？
- 主要是通过什么手段实现响应式布局的？
- 做移动端适配的时候需要设置什么？
- 详细说一下viewport？
- 做过动画吗？css动画和reqeustAnimationFrame比较？
- css动画实现一个div平移动画，用translate和left有什么区别？
- flex布局了解吗？平时主要是做自适应和水平居中，用flex写一个水平垂直居中？
- 手写了一个react组件，组件里有A和B两个子组件，A组件属性接受了父组件的state属性，B组件没有接受state属性，当父组件setState之后，如何变化？
- 还是刚刚的组件，实现一个异步获取数据列表[‘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区别？
- 手撕代码：找出一个字符串中重复次数最多的字母？
- 手撕代码：实现对象的深克隆？
三面
三面是最后一轮技术面。三面的气氛感觉和前面明显不一样，问的问题也不再局限于前端，有简历上的经历，也有计算机相关的其他领域的知识，综合性很强。首先上来是一道经典的两侧定宽，中间自适应的题目，但是加了点东西，就是头部一个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>#小米##前端工程师##面经##社招#
查看24道真题和解析
投递小米集团等公司10个岗位
