Loading...
墨滴

小石头

2021/08/16  阅读:20  主题:自定义主题1

什么是重排、重绘

什么是重排、重绘?

• 重排重绘

当我们改变了一个元素的尺寸位置属性时,会重新进行样式计算( computed style)布局( layout)绘制(paint)以及后面的所有流程,这种行为称为重排。 当改变了某个元素的颜色属性时不会重新触发布局,但还是会触发样式计算和绘制,这种行为称为重绘

我们可以发现重排和重绘都会占用主线程,还有 JS 也会运行在主线程,所以就会出现抢占执行时间的问题,如果你写了一个不断导致重排重绘的动画,浏览器则需要在每一帧都运行样式计算布局和绘制的操作。

• 优化方式

我们知道当前页面以每秒 60 帧的刷新率时才不会让用户感觉到页面卡顿,如果在运行动画是还有大量的 JS 任务需要执行,因为布局、绘制和 js 执行都是在主线程运行的,当在一帧的时间内布局和绘制结束后,还有剩余时间 js 就会拿到主线程的使用权,如果 js 执行时间过长,就会导致在下一帧开始时 js 没有及时归还主线程,导致下—帧动画没有按时渲染,就会出现页面的卡顿。

• 1. 第一种优化方式: requestAnimationFrame

requestAnimationFrame,它会在每一帧被调用,通过回调 API 的回调,可以把 js 运行任务分成一些更小的任务块,在每一帧事件用完前暂停 js 执行归还主线程,这样的话在下一帧开始时,主线程就可以按时执行布局和绘制。

• 2. 第二种优化方式: transform

栅格化的整个流程不占用主线程,只在合成器线程和栅格线程中运行,这就意味着它无需和 js 抢占主线程。如果反复进行重绘和重排可能会导致掉帧,这是因为有可能 js 执行阻塞了主线程,而 CSS 中有个动画属性 transform,通过该属性实现的动画不会经过布局和绘制,而是直接运行在合成器线程和栅格线程,所以不会受到主线程中 js 执行的影响。更重要的是通过 transform 实现的动画由于不需要经过布局绘制样式计算等操作,所以节省了很多运算事件(方便实现负责的动画)

小石头

2021/08/16  阅读:20  主题:自定义主题1

作者介绍

小石头