在 body 元素上启用 GPU 加速

Question

有人刚刚在 IRC 上问过这个问题：将他们的 document.body 设置为使用 translateZ(0) 是否可能或可行，以及这样做的好处或坏处是什么。

虽然他实际上并没有对身体本身进行变形/动画/移动/缩放，但他的逻辑主要是将整个文档的渲染/重绘工作卸载到他的 GPU 上，并通过继承来处理确实发生变化的位。

我的猜测是这样做的好处很少，而缺点会更多 - 即影响 cleartype/kerning，使其基于芯片组实现呈现不一致，使其在 OSX 上的 VirtualBox 等 VM 中失败，并可能使某些浏览器崩溃，（取决于正在发生的事情，例如node-webkit） - 所以我的建议是保留translateZ 用于以特定方式移动/更改的元素。此外，如果有单个点要锚定，而不是整个文档，调试问题等会容易得多。但是……我错了吗？

能否请对浏览器有更深入了解的人介绍一下这里的最佳实践以及 GPU 处理元素时幕后发生的事情。

Answer 1

变换：translateZ(0);声明在现代桌面和移动浏览器中触发 GPU 加速。这似乎是触发 GPU 加速的最有效方式。这适用于使用现代 CSS 属性，例如 box-shadow、inset box-shadows、text-shadows 和 CSS 动画。这减少了客户端 CPU 的压力，并允许图形处理器处理繁重的工作。请记住，在某些情况下，客户端 GPU 可能效率较低或不存在。如果您使用的是 polyfill，例如 CSSPIE，您最初的反应可能是将它用于需要 pollyfill 注入的浏览器，考虑到不支持 CSS3 的浏览器无法识别 translate 属性，这不是真的。