css-performance

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

你可能感兴趣的:(css-performance)