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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容