快手秋招前端实习生一面面经

普通本科毕业的我通过内推有幸参加了快手校招前端实习生面试，虽然结果不是很理想，但是成长很大。特此总结分享给各位。

1.介绍简历上的项目

简单介绍项目内容即可。
面试首个问题一般都比较自由，可以通过该问题缓解自己的紧张情绪。

2.CSS样式覆盖问题

div {width:200px ;height: 200px;}
.classA {background-color:blue}
.classB {background-color:red}

<div class="classA classB"></div>

结果为红色

3.position取值及区别

static 默认	静态布局，默认文档流中，非定位元素

relative 	定位元素(相对定位)
			1) 没有脱离文档流
			2) 参照点为当前元素原本的位置

absolute 	定位元素(绝对定位)
			1) 脱离了文档流
			2) 参照距离当前元素最近的父定位元素，如果所有的父元素都没有定位元素，参照浏览器视口

fixed 		定位元素(固定定位)
			1) 脱离了文档流
			2) 参照浏览器视口

4.如何解决兄弟级外边距问题

e…这个问题属实还挺坑的，包括网上搜索都是在探讨父子级外边距问题，至于如何解决兄弟级外边距问题很少有提到。

5.reflow(回流)和repaint(重绘)问题

reflow：几乎是无法避免的。现在界面上流行的一些效果，比如树状目录的折叠、展开（实质上是元素的显 示与隐藏）等，都将引起浏览器的 reflow。鼠标滑过、点击……只要这些行为引起了页面上某些元素的占位面积、定位方式、边距等属性的变化，都会引起它内部、周围甚至整个页面的重新渲染。通常我们都无法预估浏览器到底会 reflow 哪一部分的代码，它们都彼此相互影响着。
repaint：如果只是改变某个元素的背景色、文字颜色、边框颜色等等不影响它周围或内部布局的属性，将只会引起浏览器 repaint（重绘）

下面情况会导致reflow发生
		1：改变窗口大小
		2：改变文字大小
		3：内容的改变，如用户在输入框中敲字
		4：激活伪类，如:hover
		5：操作class属性
		6：脚本操作DOM
		7：计算offsetWidth和offsetHeight
		8：设置style属性

6.var/let区别

这两个声明区别其实很好说清楚，但是面试官是放在具体的代码块里，结合闭包等各种问题让说出具体结果。整段代码30多行下来还是有点蒙了，最终这道题也over了。

特别注意这块儿的：var函数作用域，闭包；let的块作用域，暂时性死区等问题。

7.setTimeout与Promise结合实现以及底层机制

作为21年应届生的我回答这个问题属实太艰难，结合实现说出实现结果还可以，但是问到具体的底层实现机制（涉及到JS宏任务，微任务，单线程完成异步等问题）属实是太难了。

附百度相关内容：

两者都是异步，异步都会保存在任务队列中
主线程从任务队列中读取事件，不断循环，这种运行机制又称为Event Loop（事件循环)
异步任务有宏任务和微任务
宏任务优先级：主代码块 > setImmediate > MessageChannel > setTimeout / setInterval
微任务优先级：process.nextTick > Promise > MutationObserver

执行顺序：第一个宏任务（主程序）执行完，执行全部的微任务（promise），再执行下一个宏任务（setTimeout）

8.字符串拼接效率问题

这道题也是直接over

+的处理机制是：新建一个临时字符串，将新字符串赋值为a+b，然后返回这个临新字符串并同时销毁原始字符串，所以字符串连接效率较低。ie7+后已解决

在旧浏览器（ie7-）下用 join 会更高效。
在现代浏览器，尽量用"+",更高效。
当然，在少数现代浏览器里 “+” 不一定会比 join 快（如，safari 5.0.5，opera 11.10)
本身是字符串数组的，直接 join 会更好。
在"+"与concat之间，当然是优选使用"+"，方便又直观又高效。

9.手撕一道代码题：写出一个方法来实现每次调用都能生成一个合法的CSS颜色

涉及到进制转换问题，使用toString()方法

总结
大公司相对而言对基础要求更加严格，甚至要求了解底层实现机制以及一些效率问题，对于大多数本科应届生还是有一定难度的。