重排(reflow)和重绘(repaint)

[exposir]

重排(reflow)和重绘(repaint)

重排(reflow)

当 DOM 的变化影响了元素的几何信息(元素的的位置和尺寸大小)，浏览器需要重新计算元素的几何属性，将其安放在界面中的正确位置，这个过程叫做重排。

重排也叫回流，简单的说就是重新生成布局，重新排列元素。

下面情况会发生重排：

• 页面初始渲染，这是开销最大的一次重排
• 添加/删除可见的 DOM 元素
• 改变元素位置
• 改变元素尺寸，比如边距、填充、边框、宽度和高度等
• 改变元素内容，比如文字数量，图片大小等
• 改变元素字体大小
• 改变浏览器窗口尺寸，比如 resize 事件发生时
• 激活 CSS 伪类（例如：:hover）
• 设置 style 属性的值，因为通过设置 style 属性改变结点样式的话，每一次设置都会触发一次 reflow
• 查询某些属性或调用某些计算方法：offsetWidth、offsetHeight 等，除此之外，当我们调用 getComputedStyle 方法，或者 IE 里的 currentStyle 时，也会触发重排，原理是一样的，都为求一个“即时性”和“准确性”。

重排优化建议

减少重排范围

• 尽可能在低层级的 DOM 节点上，而不是像上述全局范围的示例代码一样，如果你要改变 p 的样式，class 就不要加在 div 上，通过父元素去影响子元素不好。
• 不要使用 table 布局，可能很小的一个小改动会造成整个 table 的重新布局。

减少重排次数

• 样式集中改变
• 分离读写操作
• 将 DOM 离线（display:none;然后进行处理）
• 使用 absolute 或 fixed 脱离文档流
• 优化动画（position 属性为 absolute 或 fixed ；启用 GPU 加速：Canvas2D、transitions、transforms3D、WebGL、video ）

重绘(Repaints)

• 当一个元素的外观发生改变，但没有改变布局,重新把元素外观绘制出来的过程，叫做重绘。