小米社招前端-三面(2019.12)
前言
近一段时间我投了不少大厂的前端岗位,但是由于刚刚参加工作一年多点,所以要么简历没过筛选,要么面试一两轮就挂了,之前面试过阿里的,两轮挂了,头条一面没过,于是这段时间来自己又总结之前的面试经验,为自己充电。 小米的社招一共是四轮面试,三轮技术面急+一轮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列表(
- )。在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>