小米社招前端-三面(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>

点赞是对小编最大的鼓励~

各位小哥哥小姐姐帮小编点一下广告,这对小编最大的鼓励哟,笔芯~

友情链接