小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。
前言
作为一个前端开发，浏览器渲染相关的知识是必须要掌握的，说起浏览器的渲染过程，那就必须要熟悉 回流（Reflow）和重绘（Repaint）。在面试中，回流和重绘也是经常会被问到的知识，今天就来重新认识一下它们吧！
浏览器的工作原理
要想搞懂回流和重绘，就必须搞懂浏览器的渲染原理，因为它们是浏览器渲染过程的重要环节
用用一张图来描述一下过程：
（本图来自网络）
具体过程就不在重复描述了，可参考之前的文章： # 关键渲染路径？
回流（Reflow）
浏览器拿到渲染树之后，计算每个 DOM 节点在窗口中的的大小和位置，这个计算过程就是 回流。
重绘（Repaint）
在 回流 阶段，浏览器可以知道每个元素节点的样式属性（位置、宽高、背景、是否可见的等等），然后浏览器将回流阶段拿到元素转化为屏幕上的像素，这个过程就是 重绘，
所以说：回流一定会重绘，重绘不一定会回流
何时回流？
当元素的 Reflow 属性（几何信息和位置信息）发生变化后，就会发生回流。
- 添加或删除可见的DOM元素
- 元素的位置发生变化
- 元素的尺寸发生变化（包括外边距、内边框、边框大小、高度和宽度等）
- 内容发生变化，比如文本变化或图片被另一个不同尺寸的图片所替代。
- 页面一开始渲染的时候（这肯定避免不了）
- 浏览器的窗口尺寸变化（因为回流是根据视口的大小来计算元素的位置和大小的）
何时重绘？
回流一定会重绘，所以上面 6 个场景肯定会触发重绘。
-
修改元素的背景颜色
-
修改背景图片
-
visibility
-
outline
....
触发条件：
重绘是一个元素外观改变触发的浏览器行为，例如改变 visibility、outline、background-color 等属性，这些属性只是影响元素的外观，不会影响几何属性的时候，会导致重绘。
如何优化回流和重绘
-
最小化回流和重绘
- 声明图像的大小
- 合并样式属性，批量更新
-
避免频繁操作 DOM
- 使元素脱离文档流 （使用
document fragment） - 对其进行多次修改
- 将元素带回到文档中。
- 使元素脱离文档流 （使用
-
对样式频繁发生的变化的元素使用绝对定位，使其脱离文档流
-
css3硬件加速（GPU加速）
触发GPU加速的组件和 csss属性：
-
<video>和<canvas> -
opacity、3D 转换（transform）、will-change、filters
过多元素使用css3硬件加速，会导致内存占用较大，会有性能问题
-
参考：
结语
如果这篇文章帮到了你，欢迎点赞👍和关注⭐️。
文章如有错误之处，希望在评论区指正🙏🙏。
附：
好文分享：
