Open jeddygong opened 3 years ago
当我们改变了一个元素的尺寸位置属性时,会重新进行样式 计算(computed style)布局(layout) 绘制(paint) 以及后面的所有流程,这种行为成为重排。
当改变了某个元素的颜色属性时不会重新触发布局,但还是会触发样式计算和绘制这就是重绘。
我们可以发现重排和重绘都会占用主线程,还有JS也会运行在主线程,所以就会出现抢占执行时间的问题,如果你写了一个不断导致重排重绘的动画,浏览器则需要在每一帧都运行样式计算布局和绘制的操作。
我们知道当前页面以每秒60帧的刷新率时才不会让用户感觉到页面卡顿,如果在运行动画是还有大量的JS任务需要执行,因为布局、绘制和js执行都是在主线程运行的,当在一帧的时间内布局和绘制结束后,还有剩余时间js就会拿到主线程的使用权,如果js执行时间过长,就会导致在下一帧开始时js没有及时归还主线程,导致下一帧动画没有按时渲染,就会出现页面的卡顿。
requestAnimationFrame,它会在每一帧被调用,通过回调API的回调,可以把js运行任务分成-些更小的任务块,在每一帧事件用完前暂停js执行归还主线程,这样的话在下一帧开始时,主线程就可以按时执行布局和绘制。
1.3.2 第二种优化方式:
栅格化的整个流程不占用主线程,只在合成器线程和栅格线程中运行,这就意味着它无需和js抢占主线程。如果反复进行重绘和重排可能会导致掉帧,这是因为有可能js执行阻塞了主线程,而CSS中有个动画属性transform, 通过该属性实现的动画不会经过布局和绘制,而是直接运行在合成器线程和栅格线程,所以不会受到主线程中js执行的影响。更重要的是听过transform实现的动画由于不需要经过布局绘制 样式计算等操作,所以节省了很多运算事件(方 便实现负责的动画)
1.4.1 CSS
1.4.2 JS
1.重排、重绘
1.1 什么是重绘重排:
当我们改变了一个元素的尺寸位置属性时,会重新进行样式 计算(computed style)布局(layout) 绘制(paint) 以及后面的所有流程,这种行为成为重排。
当改变了某个元素的颜色属性时不会重新触发布局,但还是会触发样式计算和绘制这就是重绘。
我们可以发现重排和重绘都会占用主线程,还有JS也会运行在主线程,所以就会出现抢占执行时间的问题,如果你写了一个不断导致重排重绘的动画,浏览器则需要在每一帧都运行样式计算布局和绘制的操作。
1.2 触发的一些因素:
1.3 如何优化:
我们知道当前页面以每秒60帧的刷新率时才不会让用户感觉到页面卡顿,如果在运行动画是还有大量的JS任务需要执行,因为布局、绘制和js执行都是在主线程运行的,当在一帧的时间内布局和绘制结束后,还有剩余时间js就会拿到主线程的使用权,如果js执行时间过长,就会导致在下一帧开始时js没有及时归还主线程,导致下一帧动画没有按时渲染,就会出现页面的卡顿。
1.3.1 第一种优化方式:
requestAnimationFrame,它会在每一帧被调用,通过回调API的回调,可以把js运行任务分成-些更小的任务块,在每一帧事件用完前暂停js执行归还主线程,这样的话在下一帧开始时,主线程就可以按时执行布局和绘制。
1.3.2 第二种优化方式:
栅格化的整个流程不占用主线程,只在合成器线程和栅格线程中运行,这就意味着它无需和js抢占主线程。如果反复进行重绘和重排可能会导致掉帧,这是因为有可能js执行阻塞了主线程,而CSS中有个动画属性transform, 通过该属性实现的动画不会经过布局和绘制,而是直接运行在合成器线程和栅格线程,所以不会受到主线程中js执行的影响。更重要的是听过transform实现的动画由于不需要经过布局绘制 样式计算等操作,所以节省了很多运算事件(方 便实现负责的动画)
1.4 避免重绘重排具体方案
1.4.1 CSS
1.4.2 JS