荔枝fm高级/资深工程师二面问题记录：
1. html标签语义化，section标签和article标签的不同，section和div的不同
div section article ，语义是从无到有，逐渐增强的。div无任何语义，仅仅用作样式化或者脚本化的钩子(hook)，对于一段主题性的内容，则就适用section，而假如这段内容可以脱离上下文，作为完整的独立存在的一段内容，则就适用article。原则上来说，能使用 article的时候，也是可以使用section的，但是实际上,假如使用 article 更合适，那么就不要使用 section 。nav 和 aside的使用也是如此，这两个标签也是特殊的 section，在使用 nav 和 aside 更合适的情况下，也不要使用 section 了。
2. 样式层级不超过三层的原因，样式优先级的计算；
超过三层可读性降低，可维护性比较差，渲染效率降低
样式优先级的计算：（这次面试完我才发现我以前理解的是错的）：详见 justcode.ikeepstudying.com/2016/07/深入理…
- 一条样式规则的整体权重值包含四个独立的部分：[A, B, C, D];
- A 表示内联样式，只有 1 或者 0 两个值；
- B 表示规则中 ID 的数量；
- C 表示规则中除了 ID、标签和伪元素以外的其它选择器数量；
- D 表示规则中标签和伪元素的数量； 比较时从高位到低位（从 A 到 D）分别比较，高位相同才需要比较低位；
- 有 !important 标记的属性权重值无视没用 !important 指定的一切情况； 多次指定 !important 时，相互抵销。
- inherit 而来的属性定义，优先级低于任何直接指定的属性值。
3. 移动端适配方案
rem
4.flex布局中justify-content的作用
- justify-content属性定义了项目在主轴上的对齐方式
5. 对于css的BFC的理解
BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域.你可以将BFC看作是页面中的一个迷你布局。一旦元素创建了一个BFC，它其中的所有元素都会被它包裹。正如我们所见的，当盒子变成BFC之后，它内部的浮动元素就再也不可能突破它的底部（也就是说，盒子不再会因内部元素浮动而坍塌).
它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。 满足下列条件之一就可触发BFC 【1】根元素，即HTML元素 【2】float的值不为none 【3】overflow的值不为visible 【4】display的值为inline-block、table-cell、table-caption 【5】position的值为absolute或fixed BFC有哪些作用： 1.可以阻止元素被浮动元素覆盖,可以实现自适应两栏布 2.可以包含浮动元素——清除内部浮动 3.分属于不同的BFC时可以阻止margin重叠
6. 箭头函数的this有什么不一样，是否可以修改this的指向；
默认绑定外层this,不能用call方法修改里面的this
7. 重排为什么一定会引起重绘,如何减少回流重绘，transform是否会引起重绘
重绘：某些元素的外观被改变，例如：元素的填充颜色 重排：重新生成布局，重新排列元素。 就如上面的概念一样，单单改变元素的外观，肯定不会引起网页重新生成布局，但当浏览器完成重排之后，将会重新绘制受到此次重排影响的部分。 也就是说："重绘"不一定会出现"重排"，"重排"必然会出现"重绘
使用css3硬件加速（GPU加速），可以让transform、opacity、filters这些动画不会引起回流重绘。但是对于动画的其它属性，比如background-color这些，还是会引起回流重绘的，不过它还是可以提升这些动画的性能。
CSS 中的以下几个属性能触发硬件加速： transform opacity filter will-change
8. js事件循环，宏任务和微任务的执行顺序，宏任务为什么每次只能执行一个
宏任务为什么每次只能执行一个，我也不知道啊，有知道的老铁吗
9. instanceof的作用，原型链的尽头
instanceof 运算符用来测试一个对象在其原型链中是否存在一个构造函数的 prototype 属性 Object.prototype 是原型链的尽头
10. 网站https前面出现感叹号的原因
其实https安全锁出现感叹号的原因在于：网站页面上面引用了不是https的网页，最常见的就是友情链接、网站程序版权标注等地方了。而如果这些网站的链接都是http方式的，无法改成https来访问的话，就会导致网站https前面安全锁有感叹号。
解决方法一： 直接在html中添加下面的标注解释语句即可：
<meta http-equiv=“Content-Security-Policy” content=“upgrade-insecure-requests” />
解决方法二： 在Apache、Nginx甚至是后端语言上,加上下面的header头即可：
header(“Content-Security-Policy: upgrade-insecure-requests”);
只要选择上面的其中一种解决方法进行操作即可完美解决https安全锁有感叹号的问题了
11. es6的模块化和commonjs的模块化引用有什么不一样
因为CommonJS的require语法是同步的，所以就导致了CommonJS模块规范只适合用在服务端，而ES6模块无论是在浏览器端还是服务端都是可以使用的，但是在服务端中，还需要遵循一些特殊的规则才能使用 ； CommonJS 模块输出的是一个值的拷贝，而ES6 模块输出的是值的引用； CommonJS 模块是运行时加载，而ES6 模块是编译时输出接口，使得对JS的模块进行静态分析成为了可能； 因为两个模块加载机制的不同，所以在对待循环加载的时候，它们会有不同的表现。CommonJS遇到循环依赖的时候，只会输出已经执行的部分，后续的输出或者变化，是不会影响已经输出的变量。而ES6模块相反，使用import加载一个变量，变量不会被缓存，真正取值的时候就能取到最终的值； 关于模块顶层的this指向问题，在CommonJS顶层，this指向当前模块；而在ES6模块中，this指向undefined； 关于两个模块互相引用的问题，在ES6模块当中，是支持加载CommonJS模块的。但是反过来，CommonJS并不能requireES6模块，在NodeJS中，两种模块方案是分开处理的。
12. react component和purecomponent的区别
13. react hooks为什么不能在判断条件中使用useState
React 怎么知道哪个 state 对应哪个 useState？答案是 React 靠的是 Hook 调用的顺序。只要 Hook 的调用顺序在多次渲染之间保持一致，React 就能正确地将内部 state 和对应的 Hook 进行关联。但如果我们将一个 Hook (例如 persistForm effect) 调用放到一个条件语句中会发生什么呢?
14. react监听输入框的事件中为什么不能通过异步获取事件对象
15. 编程题（现场编程）
//实现 flat 函数：
flat([1,2,3,[4,5,6, [7,8], 9, 10], 11, 12]) // => 输出扁平化数组
