首页 > 笔经面经 > 小米社招前端-三面面经

小米社招前端-三面面经

头像
小白哈哈哈
编辑于 2019-12-27 14:15:27 APP内打开
赞 5 | 收藏 32 | 回复5 | 浏览11281

前言

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

面试经过

一面

  1. 你对vue掌握多少?
  2. vue双向绑定的实现原理说一下?数据劫持+订阅发布模式,订阅发布模式如何实现?
  3. vue中key的作用?vue有原地服用的原则,通过key决定是否对元素复用,如果不绑定key会引起什么问题?
  4. vue父子组件间怎么进行通信?
  5. 平时怎么处理多个同级组件间的通信的?
  6. vuex的组成?store,action,mutation,modules,分别讲一下各自的作用?
  7. 有写过vue异步组件吗?
  8. 有自己在npm上发布过依赖包吗?
  9. webpack的作用是什么?开发环境和测试环境之间的配置文件有什么区别?
  10. devtool有那些选项,分别有什么作用?
  11. devServer的实现原理了解过吗?
  12. 说一下event loop的过程?
  13. reqeustAnimationFrame有用过没,是如何使用的?就是递归调用呗。她是属于微任务还是宏任务?
  14. promise定义时传入的函数什么时候执行的?
  15. promise.all用过吗?如何实现当其中一个promise抛出错误的时候也能顺利执行promise.all的回调?
  16. css里的flex布局用过吗?用过,垂直居中,自适应。原理了解过吗?
  17. 时间模型的三个阶段说一下?三个嵌套的div,每个div都同时绑定一个捕获事件和一个冒泡时间,写出事件执行顺序?
  18. 事件***?父节点定义了多个点击事件,点击子节点,如何实现一个事件不执行,其他所有的事件都执行?用stopDefault()组织该事件默认行为。
  19. 如何阻止冒泡?
  20. 浏览器的缓存机制?
  21. 前端工程化的理解?
一面就这么结束了,大概一个小时吧,然后小哥哥让我等一会儿。

二面

  1. 平时pc端做的多还是移动端做的多?
  2. 主要是通过什么手段实现响应式布局的?
  3. 做移动端适配的时候需要设置什么?
  4. 详细说一下viewport?
  5. 做过动画吗?css动画和reqeustAnimationFrame比较?
  6. css动画实现一个div平移动画,用translate和left有什么区别?
  7. flex布局了解吗?平时主要是做自适应和水平居中,用flex写一个水平垂直居中?
  8. 手写了一个react组件,组件里有A和B两个子组件,A组件属性接受了父组件的state属性,B组件没有接受state属性,当父组件setState之后,如何变化?
  9. 还是刚刚的组件,实现一个异步获取数据列表[‘a’, ‘b’, ‘c’…],然后将这个数组中的数据渲染到dom中去的功能,最终是一个dom列表(<li>)。在componentMounted钩子里异步操作然后setState就ok了。为什么用componentMounted?因为此时dom节点已经挂载完毕,可以安全的对dom进行访问。
  10. react展示组建和功能组件的区别?
  11. react定义事件?使用前需要bind。
  12. es6新特性说一下?let、var、const区别?es6如何实现块级作用域的?
  13. WeakMap用过吗?没。。。
  14. promise.all?如何实现一个链式异步请求,一个请求完成继续下一个请求?then链式执行呗。中间如果有一个promise出错怎么办?如何确保执行到最后?我答的还是try catch前行resolve,不过好像不太对,有知道的大神求指导。
  15. promise、async/await、generator区别?
  16. 手撕代码:找出一个字符串中重复次数最多的字母?
  17. 手撕代码:实现对象的深克隆?
二面结束,我跟小哥哥说明了下我的情况,请假出来面试不太方便,尽量一次性面完,小哥哥让我等一会儿,然后是等待时间。。。

三面

三面是最后一轮技术面。三面的气氛感觉和前面明显不一样,问的问题也不再局限于前端,有简历上的经历,也有计算机相关的其他领域的知识,综合性很强。
首先上来是一道经典的两侧定宽,中间自适应的题目,但是加了点东西,就是头部一个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>

更多模拟面试

5条回帖

回帖
加载中...
话题 回帖

笔经面经近期热帖

历年真题 真题热练榜 24小时
技术(软件)/信息技术类
查看全部

热门推荐