前端面试之浏览器的重排和重绘

---

页面生成的过程

1. HTML 被 HTML 解析器解析成 DOM 树
2. CSS 被 CSS 解析器解析成 CSSOM 树
3. 合 DOM 树和 CSSOM 树，生成一棵渲染树(Render Tree)
4. 生成布局（flow），在浏览器上 “画出” 渲染树中所有的节点
5. 将布局绘制（paint）在屏幕上，显示出整个页面

其中第四步和第五步是最耗时的部分，两者相结合就是我们通常所说的渲染

什么是重排和重绘

浏览器的重排（reflow）和重绘（repaint）是指浏览器对网页重新渲染的过程。
重排是指重新计算网页布局的过程。
重绘是指当一个元素的外观发生改变，但没有改变布局，只是重新把元素的外观绘制出来的过程。

重排和重绘造成的原因？

重排：

• 添加、删除或更改 DOM 元素
• 修改元素的尺寸、位置、边距、边框等
• 修改元素字体的大小，数量等
• 交互事件，如 改变浏览器的窗口尺寸时

重绘：

• 修改元素的背景色、边框颜色等样式属性
• 修改元素字体的颜色

重排和重绘的影响

重排

重排是比较消耗性能的操作，因为它需要重新计算页面的布局方式。频繁的重排会导致网页的响应速度变慢、页面出现卡顿、用户体验不佳。

重绘

相较于重排，重绘的影响较小，因为它只需要重新绘制元素的外观样式，不需要重新计算元素的几何信息。

如何减少重排和重绘 （面试重点）

1. 避免频繁的操作 DOM：批量修改 DOM 样式
2. 避免使用 table布局：可能很小的一个小改动会造成整个 table 的重新布局
3. 分离读写操作
4. 将DOM 离线：
   • 使用 display：none： 批量修改后再进行显示
   • 使用文档碎片（DocumnetFragment）：创建一个 DOM 碎片批量操作 DOM
5. 使用 absolute 或 fixed 脱离文档流
6. 使用CSS3动画：CSS3动画可以使用GPU加速，减少重排和重绘的次数。

小结

重排和重绘是网页性能优化中的重要概念，我们需要了解它们的原理和影响，并采取有效的措施来减少它们的次数，从而提高网页性能和用户体验。