最近在了解浏览器渲染原理,有些困惑,先放张图:
有三个场景:
- 浏览器在处理包含
tranform
,opacity
,filter
属性的动画时会把目标层提升为GraphicsLayer
,之后会跳过repaint
阶段直接在GPU内部完成变换; - 如果这段动画是基于
left
属性的,此时不会提升为GraphicsLayer
; - 如果这段动画是基于
left
属性的,并设置了will-change
,此时会提升为GraphicsLayer
,但它会触发repaint
。
疑问:
- 上面第3种情况算GPU加速吗?
- 上述3种情况,CPU和GPU的职责发生了什么变化?