我正在开发一个相当CPU密集型的Web应用程序。我已经开始在某些元素上使用-webkit-transform: translate3d(0, 0, 0)
来提高平均帧率,正如http://davidwalsh.name/translate3d和http://www.html5rocks.com/en/tutorials/speed/html5/所建议的那样。这种调整在渲染性能方面具有非常显着的差异,特别是在Chrome中。
如果我将此技术应用于单个动画元素,它是否会触发整个页面的硬件加速,或仅针对该元素?或者它可能只触发该元素渲染层的硬件加速?
研究Chrome的“复合渲染图层边框”(在chrome://flags
中)的输出似乎表明行为仅限于指定的元素,但是有一个更具体的答案会很好。
答案 0 :(得分:4)
仅在元素的动画期间。根据{{3}},硬件加速仅适用于:
“常规布局合成”(页面的初始渲染)
“CSS3过渡”和“CSS3 3D过渡”(在过渡期间应用于单个元素以辅助帧速率)
“画布绘图”和“WebGL绘图”(不适用于您的问题)