【浏览器】使用translateZ(0)提升性能的原理

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了【浏览器】使用translateZ(0)提升性能的原理相关的知识,希望对你有一定的参考价值。

参考技术A 使用transform属性的CSS动画看起来比使用left和top属性的动画更平滑。 但是如果你问,“我如何从GPU获得平滑的动画?”在大多数情况下,你会听到像“使用transform:translateZ(0)或will-change:transform这样的建议。著作权归作者所有。

这个问题是因为使用transform和opacity做CSS动画的时候,会将元素提升为一个复合层;而使用js操作css属性做动画时,必须使用translateZ或will-change才能将元素强行提升至一个复合层。

元素本身使用transform和opacity做CSS动画的时候,会提前告诉GPU动画如何开始和结束及所需要的指令;所以会创建一个复合层(渲染层),并把页面所有的复合层发送给GPU;作为图像缓存,然后动画的发生仅仅是复合层间相对移动。

而使用js做动画,js必须在动画的每一帧计算元素的状态;发送给GPU,但不会将元素提升至一个复合层;所以想让元素提升至一个复合层,必须使用translateZ或will-change: transform, opacity。

使用 translate3D 会让浏览器开启硬件加速,性能当然就提高了。translateZ变成3d效果,走GPU渲染。这样也有缺点就是耗电和发热问题。同样的canvas也会开启gpu渲染。

CSS3开启GPU硬件加速

然后chrome输入chrome://flags/

能看到这么一句“允许使用 GPU 执行 2D 画布渲染(而非使用软件渲染)”。说明2d是软件渲染的。

参考文献:

https://segmentfault.com/q/1010000007962353

  https://www.w3cplus.com/animation/gpu-animation-doing-it-right.html  ©  w3cplus.com

以上是关于【浏览器】使用translateZ(0)提升性能的原理的主要内容,如果未能解决你的问题,请参考以下文章

CSS3中的动画效果transform:translateZ(),在Z轴上移动xx距离

7. 移动端性能优化?

Firefox JIT优化,浏览器性能提升10%

使用异步servlet提升性能

硬件加速

重磅官宣:Nacos2.0性能提升10倍