这次面试还是很值得记录一下的~长了很多姿势。

一共三面，面试官都是MIUI的浏览器部门，感觉面试官都很厉害，知识点问的很细很深入。

一面面试官是个可爱的小姑娘，主要考察的就是常见的前端面试题，很基础，但是会在其上进行拓展和深入。就我记得的一些题做个总结：

1. 说一下CSS的盒模型？（这简直是我参加过的几乎所有前端面试岗必问的一道题目……不管是比较水的国企还是问基础的互联网。。。 想一想似乎只有只问项目不谈基础的京东没有问吧）

　　这里是答案

2. 常用的跨域方法：（之前小米一个面试官电话面试时候也问到了这个问题，看起来很喜欢问呢）

　　这里是答案

3. 说一下js中的事件。

　　我说了DOM0级和DOM2级事件，及IE和W3C下的不同。然后面试官深入问了下捕获阶段和冒泡阶段的区别，又涉及到事件代理。然后问到为什么要有捕获，只有冒泡不可以吗？

　　这里我是有点懵了……其实很简单，因为要获取的事件可能在处于目标之前，也可能在处于目标之后，要实现两种情况的话就需要两种。但是当时一是脑子抽，第二个也是对事件机制理解不够清楚，其实捕获和冒泡阶段截取事件都是指的目标之外的父级节点的，相对于目标来讲是不区分的。

4. 说一下cookie和localeStorage，sessionStorage。

　　这里是答案

　　因为我是先答了为什么要有storage（存储空间大，不需要随着请求发送），于是面试官细问了一下那cookie又小又要跟着请求发送，为什么还要有cookie。

　　我之前没有准备过，就说了下我自己的理解，就是标识身份，记录一些客户端的信息这样，举了几个例子，可能说的不太好。

　　还有就是问到了cookie的存储时间，为什么限制大小（我说的是浏览器限制）

5. get和post的区别

6. js继承

7. 写一个把数组打乱顺序的函数

8. js实现url解析

9. 讲一下css的动画（我不太了解， 就直说不太了解，然后她让我试着写了下，就写了些印象里的，她说差不多）

10. 猜一下，如果要绑定动画的话，在哪里绑定？怎么绑定？

。。。。

一面问题问了好多……而且很细化，如果只是刷题而不去深入了解背后原理的话很容易会被问蒙掉。但是其实也长了很多知识，收获很大。因为很多实现原理方面的东西我并没有特别多的了解涉及，所以口头禅几乎变成了“我是这样理解的/我是这样想的……”不管说的是否有道理，面试官很和蔼，即使一下说不出来也会试图引导我，让我说一下想法什么的，没有直接否决掉，这又是一个成长的过程~

二面面试官相对起来看起来没有那么平易近人，但是感觉也很牛逼。一上来问了两个问题直接把我问蒙了……

1. 说一下margin吧。如果两个div，上面的div一个margin，下面的div一个margin，那么它们之间的距离会是谁的margin？（这里我之前了解过一些，但是没有具体学习记忆，所以乱哄哄的，应该是大的那个值吧，会重叠）

2. 如果是父级margin和子div的margin呢？父元素到上面的margin是多少？子元素到上面元素的margin是多少？（我想了半天感觉是父margin+子margin，因为觉得子div就是父div内部了，和整体 文档流应该脱离了，但是面试官让我再想想，然后说这块还需要再了解，所以应该是错了）

3. 还是上面那个，如果子div是浮动的呢？（杀了我吧……）这一块要再多看一看。万恶的margin……

4. 如果是行内元素呢？如果字体font-size是10px，行高line-height是2px，显示多高？（依然不知道，猜测是2px，剩余的部分会被隐藏掉）。刚才试了下，发现打错了:)

答完以上这两个问题我已经一头汗……整个人紧张到不行，面试官都看不下去了，说你不要紧张。。。然而她问的问题依然让我平静不下来……

5. nginx匹配规则：

　　因为我简历里写了熟悉nginx配置，就问了，然而其实我并没有特别深的研究过，只是会用会看。然而这个还很基础但我却答不上……然后她详细说了一下，nginx匹配的话会用等于，类似，还有~的匹配，匹配顺序是什么？并不会答……尴尬

6. 说一下em和rem的区别：

　　答： em指的是与父级元素相对，会继承父级元素字体大小；rem指的是相对html根元素

7. ajax原生

8. 实现一个小游戏，一个页面，上半部分很多方块，然后有一个小球，可以手指拖动控制位置和弹射方向，碰到方块后方块会消失。怎么实现？

　　思考了几分钟，当时思考的点主要在碰撞检测上，因为我以为是个小球，圆和方块进行碰撞检测怎么搞？以当时混沌的大脑实在理不清了……开始讲的时候先从小球这边的事件绑定说起。因为手机端触屏事件也没有接触过，所以她先大体说了下有touchMove，touchBegin，touchEnd之类的。然后我还是按照浏览器这边的click事件绑定来讲的。就说在move时设置一个定时器设定时监测手指的位置，控制改变小球的位置以及保存前一时刻位置；在移开手指事件上通过小球的位置差得出其运动方向，然后向设置一个定时器控制小球在这个方向上的移动，同时，对小球和方块依次遍历进行碰撞检测，如果碰撞到就设置display：none这样。

　　期间还说了布局的实现什么的，就说小球设置position:absolute，就是相对于整个页面绝对定位；div们保持在一个数组中，每个div用一个对象保持它的flag（是否已消失）,位置等信息。

　　然后具体问碰撞检测怎么做，我就说如果是小球的话碰撞检测比较麻烦……然后面试官就说那你把它看成是一个方块，或者一个点。于是就说获取小球当前位置，与每个div的left和left+width，以及top，top+height比较这样……

　　然后面试官讲了下她们的实现，就是一个页面设定一个坐标系，每个div对应的坐标系里存储1或者0，然后记录左上角的位置和右下角的位置就可以了~

9. 了解jQuery吗？（我说看过部分的源码），然后她问选择器了解吗？（我说这个没看，知道是用sizzle，然后说了下我的一些理解，比如判断jQuery对象啦，取字符串正则匹配这样）

二面面试官一直说一面面试官把问题都问完了，没什么可问的了……于是问了半个多小时就撤了。。。天哪还问我要被问死了……所以看来前端面试题是真的有题库的，但是要结合题目进行深入理解才可以应付面试啊……

三面：

三面面试官可能是浏览器前端的leader了。。。很厉害啊。没跟我说什么前端啥的，基本在说内核啦性能啦后台啦什么的……但是人很好。

1. 让我讲一下我研究生期间的科研方向

2. cpu和gpu的区别？

　　这我真的不了解啊。。。面试官说是gpu可以处理矩阵运算，并给我详细举了例子说明，包括在条件语句上的区别（因为gpu运算是分块矩阵运算，那么多线程，不可能等待判断语句，所以就if和else中的语句都执行，然后分线程来看……不明觉厉）

3. 可能是因为做浏览器吧，所以组里有一些很牛逼的大神，内核啦什么的，会比较注重性能这边。包括问到很底层的切换页面真正发送的什么？这样的问题……以及不是浏览器渲染的事情了，而是说cpu实现的话只是一个点一个点地渲染，而gpu可以实现矩阵运算，一次计算很多点，所以性能更高这样。

4. 然后问到了jpg和png的区别。

　　我不懂，就说是压缩和无压缩吗？但是当然不是。。

　　然后说起来png也有png-8，png-24，png-32这样。然后问我知道是什么意思吗？不懂。面试官解释是指存储位数，png-32是存储32=8*4位，255,255,255,255，分别是rgba。而png-24没有alpha值，那么png-8是怎么存储的呢？怎么能把32位压缩成8位呢？我想了半天，感觉不能把8位压缩成2位，如果8个像素点一组的话也太失真了感觉。。。然后面试官让我说一下思路，我就直说想不出来，想不到怎么把8位信息用2位来表示出来，于是他给了提示是索引……然后我就猜是有一个数组保存一些颜色的值，然后png-8每个像素点存储的是索引值……好厉害。然后问到索引里保存的是什么？是频率最高的颜色吗？我说应该是一个范围吧……但是这样会不会失真太严重，然后他说这都还是个坑，还在研究中。。。

总之就是非常多底层实现，内核，性能方面的东西，我全程懵逼脸……小米真的是藏龙卧虎啊~

然后面试官问我还有什么问题吗？我当时脑子里空空的，感觉上了一堂哲学大课，哪里敢提关于培训啦这些俗气的问题，就直说脑子懵了没问题了。

然后他说既然你没问题了那我问你个吧……诶？套路不对？

总之这个问题也挺难回答的，但是具体是什么我已经忘掉了。。。

就是以上。面完觉得能进小米就太好了，好想加入这个组，这个组大牛太多了~

如果能通过的话真的太开心了！！

期待~

最后再提一下10月22日华为面试。

因为有点一样的感觉。

是谁说华为面试都很水不问技术只是聊项目的？面我那个华为面试官很牛逼啊。

一开始问到我在滴滴做测试开发的经历，没有问项目，反倒是问我软件开发的流程？测试作用？测试的目的？作为一个开发，测试对我的帮助这些问题？

包括，写代码常犯的错误？

我想了想就说比如js里面如果不在dom元素加载完成后获取dom元素，就可能获取不到节点，会出错。所以要约束自己养成良好的代码习惯这样。然后他说那除了这个还有什么办法吗？除了开发模板之类的？

我想不到了，然后他谈及代码检测工具……如果发现这种问题及时提出这样。

然后考我数据结构。说是比如有30w的面试者，每个面试者有一个id，8位不连续数字，姓名8B，学校32B。设计数据结构使得

1. 根据ID可以很快地找到学生的名字，还要方便增删改查；

2. 根据学校可以查找到对应学生的名字；

3. 快

4. 小

我一开始想到了顺序表和链表，但是一个解决不了插入删除快的问题，一个解决不了查找的问题。用哈希的话空间太大，所以一直没有说。。。然后面试官催，就说了下思路：

1）首先一个表考虑用哈希表，key是id，value是学生名字和学校的json格式，表A（我说用哈希表可能会使空间用的多，然后面试官说快是排在小前面的， 所以可以用）

2）第二个有一个表key是学校，value是一个数组，存学生id，这里面试官问到说学生可能个数不一样，于是我说用链表。然后查找的时候就进行遍历，表B

3）关于两个表的关联，插入的话先更新表A，然后根据学校名称在第二个表中找对应key，没有就新建key-value，有的话就插入到链表中

4）关于删除，在先操作表A还是表B中犹豫了一下，不过在后序的讨论中决定先操作表B，

以上似乎实现了功能要求，然后面试官问到如果在操作到一半突然断电了呢？这样两个表数据就不同步了？怎么处理？(⊙﹏⊙)b

5）于是考虑用一个flag记录。。。一开始说只是一个boolean值，然而面试官又提出质疑后也变成一个结构体，存储的值一个是执行状态status，操作id（这里就是为什么删除要先操作表B，如果先操作表A后就找不到ID了），状态流转（0/1）。

6）还没有结束……如果有多条数据写入删除同时进行呢？ 这时候就有多个flag怎么组织？我又质疑flag操作过程中不是也会掉电吗？这又怎么处理？

嗯……很好……引发了深深的无尽的思考……

然后面试官说基本数据结构还是了解的，可能缺乏在实践中使用，所以很多实践中的情况考虑不到……

嗯是这样的。

╮(╯▽╰)╭

总之再也不说华为面试水了，经验涨好多……华为面试官真心牛逼……真心牛逼……

感谢以上所有耐心指导的面试官们……

希望我自己拿到满意的offer！希望代码质量节节高！希望软开能力棒棒棒！

干巴爹！

让面试官的蹂躏来的更凶猛一些吧！请把我踩在脚下狠狠羞辱我！把质疑都甩给我吧！

2016.10.19 小米前端面试 vs 2016.10.22 华为web面试