前端面试总结

1.重绘+重排(回流)：

提示：html中的优化：

---

答案要点

提示：浏览器的渲染过程：

1. 解析HTML生成DOM树，解析CSS生成CSSOM树
2. 将DOM树和CSSOM树结合生成渲染树renderTree
3. Layout(回流): 根据生成的渲染树，进行回流(Layout)，得到节点的几何信息（位置，大小）
4. Painting(重绘): 根据渲染树以及回流得到的几何信息，得到节点的绝对像素
5. Display:将像素发送给GPU，展示在页面上

————————————————
原文链接：https://blog.csdn.net/snowball_li/article/details/123280534

引起DOM树结构变化，页面布局变化的行为叫回流，且回流一定伴随重绘。

只是样式的变化，不会引起DOM树变化，页面布局变化的行为叫重绘，且重绘不一定会便随回流

优化：

1.DOM的增删行为

比如你要删除某个节点，给某个父元素增加子元素，这类操作都会引起回流。如果要加多个子元素，最好使用documentfragment。

2.几何属性的变化

比如元素宽高变了，border变了，字体大小变了，这种直接会引起页面布局变化的操作也会引起回流。如果你要改变多个属性，最好将这些属性定义在一个class中，直接修改class名，这样只用引起一次回流。

3.元素位置的变化

修改一个元素的左右margin，padding之类的操作，所以在做元素位移的动画，不要更改margin之类的属性，使用定位脱离文档流后改变位置会更好。

4.获取元素的偏移量属性

例如获取一个元素的scrollTop、scrollLeft、scrollWidth、offsetTop、offsetLeft、offsetWidth、offsetHeight之类的属性，浏览器为了保证值的正确也会回流取得最新的值，所以如果你要多次操作，最取完做个缓存。

5.页面初次渲染

这样的回流无法避免

6.浏览器窗口尺寸改变

resize事件发生也会引起回流。

这里就不列举引起重绘的行为了，记住，回流一定伴随着重绘，所以上面的行为都会重绘，除此之外，例如修改背景颜色，字体颜色之类不影响布局的行为都只引发重绘。

如果对于documentfragment文档片段感兴趣，

---

2.作用域相关：

定义：规定了变量能够访问的范围(scope)

1.局部作用域

2.全局作用域

3.作用域链

4.js垃圾回收机制

5.闭包

闭包是指有权访问另一个函数作用域中的变量的函数

6.变量提升