rendering 重排

painting 重绘

https://csstriggers.com

http://jankfree.org

浏览器渲染阶段
一、渲染的三个阶段： layout , Paint , Composite layers
二、修改不同css属性会触发不同阶段
三、触发的阶段越前 ，渲染的代价越高

硬件加速 (GPU)

60FPS/1mis ~16.7ms 一帧

如何开发不会导致重排

**
1.样式表越简单，重排和重绘就越快。
2.重排和重绘的DOM元素级别越高，成本越高。
3.table元素的重排和重绘成本要高于div元素。
4.尽量不要把读操作和写操作，放在一个语句里面。
5.统一改变样式。
6.缓存重排结果。
7.离线DOM Fragment/clone。
8.虚拟DOM React
9.必要的时候DIsplay:none不可见元素不影响重排重绘，visibility对重排影响不能影响重绘。
**