# Browser-Repaint-Reflow
Repaint - 重绘 Reflow - 回流
# 重绘与重排
重排/回流（Reflow）：当DOM的变化影响了元素的几何信息，浏览器需要重新计算元素的几何属性，将其安放在界面中的正确位置，这个过程叫做重排。表现为重新生成布局，重新排列元素
重绘(Repaint): 当一个元素的外观发生改变，但没有改变布局，重新把元素外观绘制出来的过程，叫做重绘。表现为某些元素的外观被改变
回流必定会发生重绘，重绘不一定会引发回流。
# 如何触发重排/重绘
重排：页面的首次渲染，浏览器的窗口大小发生变化，插入删除元素、元素尺寸改变(边距、填充、边框、宽度和高度)
重绘：更改元素的样式 颜色，背景色，阴影
# 如何避免重绘或者重排
- 集中改变样式，不要一条一条地修改 DOM 的样式
- 不要把 DOM 结点的属性值放在循环里当成循环里的变量
- 为动画的 HTML 元件使用 fixed 或 absolute 的 position，那么修改他们的 CSS 是不会 reflow 的
- 动画开始GPU加速，translate使用3D变化
- 提升为合成层
- 避免触发布局操作和事件
transform 不重绘，不回流
是因为transform属于合成属性，对合成属性进行transition/animate动画时，将会创建一个合成层。这使得动画元素在一个独立的层中进行渲染。当元素的内容没有发生改变，就没有必要进行重绘。浏览器会通过重新复合来创建动画帧。
将元素提升为合成层有以下优点：
- 合成层的位图，会交由 GPU 合成，比 CPU 处理要快
- 当需要 repaint 时，只需要 repaint 本身，不会影响到其他的层
- 对于 transform 和 opacity 效果，不会触发 layout 和 paint
# 硬件加速GPU
CSS3硬件加速又叫做GPU加速，是利用GPU进行渲染，减少CPU操作的一种优化方案。由于GPU中的transform等CSS属性不会触发回流重绘，所以能大大提高网页的性能。 CSS中的以下几个属性能触发硬件加速:
- transform
- opacity
- filter
- will-change
如果有一些元素不需要用到上述属性，但是需要触发硬件加速效果，可以使用一些小技巧来诱导浏览器开启硬件加速
# 硬件加速的问题
- 如果你为太多元素使用css3硬件加速，会导致内存占用较大，会有性能问题
- 在GPU渲染字体会导致抗锯齿无效。这是因为
GPU和CPU的算法不同。因此如果你不在动画结束的时候关闭硬件加速，会产生字体模糊
#
← 图片优化 Tree shaking →