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对重绘影响不影响重排。
**