我正在开发一个 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/仅适用于:
《General layout compositing》(页面的初始渲染)
“CSS3 过渡”和“CSS3 3D 过渡”(在过渡期间应用于单个元素以辅助帧率)
“Canvas Drawing”和“WebGL Drawing”(不适用于您的问题)
关于css - -webkit-transform : translate3d(); trigger hardware acceleration for the whole page, 还是仅针对目标元素？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13535967/