logo标签列表

-webkit-transform: translate3d()是否会触发整个页面的硬件加速，还是只针对特定元素？

cssperformancegoogle-chromecss-transformshardware-acceleration
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中）的输出似乎表明行为仅限于指定的元素，但更确切的答案会更好。
1个回答
4

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

"一般布局合成"（页面的初始渲染）
"CSS3转换"和"CSS3 3D转换"（应用于单个元素在过渡期间以协助帧率）
"Canvas绘图"和"WebGL绘图"（不适用于您的问题）

哈，我不确定我是怎么错过那个的。谢谢！ - peterjmag
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接