小米前端面经(社招)

前言

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

结语

这应该算是我毕业一年来去大厂面试第一次面完三轮技术面，因为我本科并不是计算机系的，研究生才开始接触的代码，所以基础相对差一些，这次面试我也不太抱希望，就当是一个对自己知识技能的检验了，即使没通过，一年以来的学习也有进步了，一直保持学习的步伐，我相信迟早会实现进入互联网大厂的梦想~加油了！

小米前端面经(社招)相关推荐

秋招腾讯字节跳动小米前端面经
欢迎阅读作者的个人网站: Greatiga的个人网站.会不定时分享各种学习心得文章前言目前已经毕业,在去年2020秋招的摸爬滚打中,侥幸收获了几个小offer.最后也很幸运去腾讯实习了一段时间. ...
记一次小米前端面试题（一面）2020.10.28
性能优化 vue中key的作用浏览器输入URL到页面的过程 DOM解析过程 css文件为什么在head中引入,而不放在body中 js文件为什么放在body底部,别的非阻塞加载js的方法,async ...
阿里社招两年前端面经
大家好,我是漫步,今天来分享一个女生的阿里社招面试经验.喜欢记得关注我并设为星标,及时收到更新. 面试流程:简历筛 -> 一面技术面 -> 二面技术面 -> 三面技术面 -> ...
前后端开发的心得体会_社招后端三面总结以及学习经验感言（操详细）
简单介绍下背景:本人已工作两年,这次属于社招,不是校招哦!投递的岗位base是北京. 先上正文一面内容大概:先来道算法题,不难:链表表示的两个数相加.面试官说不用运行,大概写一下就行,说是因为说牛客 ...
【字节跳动-搜索】22秋招提前批/社招内推来了！直推到组！全程跟进！
字节跳动-搜索 22秋招提前批/社招部门内推来了!直推到组!全程跟进! 团队介绍1:字节跳动搜索字节跳动搜索团队主要负责抖音.今日头条.西瓜视频等产品的搜索算法创新和架构研发工作.我们使用最前 ...
小米java面试题_小米java社招面试题分享，面经(一面二面)
下面给大家带来的是小米java社招面试题(面经)的相关分享,主要包括了一面二面的面试题,准备小米java一面二面的小伙伴可以来了解一下. 注:面试者是跨行做后台,没有什么项目经验,所以,面试者问的东西 ...
【2023秋招面经】经纬恒润前端面经总结
前言本系列主要整理博主2023牛客网秋招经纬恒润前端面经总结. 文章目录前言本系列主要整理博主2023牛客网秋招经纬恒润前端面经总结. 问题总结 1. 问3>2>1和1<2&l ...
堪称最强！字节跳动+阿里+华为+小米等10家大厂面试真题，社招面试心得
前言很久没有发过文章,今天来说一下应届生找工作的问题吧,就算你是打摆子都要看完~~ 金九银十是社招以及校招的火热时期,但今年很明显没有往年般的火热,面试也是越来越难了.对于应届生来说,如何能够在面试 ...
21届秋招网易前端面经
21届秋招网易前端面经这个是挂掉了,不得不说,网易有道的面试还是有一定难度的,至少是在我面的所有面试中,整体感觉给我来说是最难的.然后再加上当时的准备也不是那么的充分,可惜了. 笔试(8.8) 找关 ...

小米前端面经(社招)

前言

面试经过

一面

二面

三面

结语

小米前端面经(社招)相关推荐

最新文章

热门文章