3

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

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

研究 Chrome 的“合成渲染层边框”（在 中chrome://flags）的输出似乎表明该行为仅限于指定的元素，但最好有一个更具体的答案。

4

1 回答 1

4

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

“General layout compositing”（页面的初始渲染）
“CSS3 transitions”和“CSS3 3D transitions”（在过渡期间应用于单个元素以辅助帧率）
“Canvas Drawing”和“WebGL Drawing”（不适用于你的问题）

于 2012-11-23T21:50:52.693 回答