Do -webkit-transform: translate3d();为整个页面或仅针对目标元素触发硬件加速



我正在开发一个相当占用大量CPU的Web应用程序。我已经开始在某些元素上使用-webkit-transform: translate3d(0, 0, 0)来提高平均帧率,正如 http://davidwalsh.name/translate3d 和 http://www.html5rocks.com/en/tutorials/speed/html5/等人所建议的那样。这种调整在渲染性能方面产生了相当大的差异,尤其是在 Chrome 中。

如果我将此技术应用于单个动画元素,它是为整个页面触发硬件加速,还是仅针对该元素触发硬件加速?或者它可能只触发该元素渲染层的硬件加速?

研究Chrome的"合成渲染层边框"(chrome://flags)的输出似乎表明该行为仅限于指定的元素,但最好有一个更具体的答案。

仅在元素的动画期间。根据 http://www.html5rocks.com/en/tutorials/speed/html5/,硬件加速仅适用于:

"常规布局合成"(页面的初始渲染)
"CSS3 过渡"和"CSS3 3D 过渡"(在过渡期间应用于单个元素以协助帧速率)
"画布绘图"和"WebGL绘图"(不适用于您的问题)

最新更新