Html 在车身元素上启用GPU加速

有人刚刚在IRC上问了这个问题：将他们的

document.body

设置为使用

translateZ（0）

是否可能或可行？这样做的好处或坏处是什么

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

我的猜测是，这样做的好处很小，缺点会更多——即影响cleartype/内核，使其基于芯片组实现呈现不一致，使其在虚拟机（如OSX上的VirtualBox等）中失败，并可能导致某些浏览器崩溃（取决于发生的情况，例如，

节点webkit

）-因此，我的建议是保持

translateZ

用于以特定方式移动/更改的元素。此外，如果要锚定的是单个点，而不是整个文档，那么调试问题等会容易得多。但是我错了吗

如果有人对浏览器有更深入的了解，请介绍一下这里的最佳实践，以及当GPU处理某个元素时，幕后会发生什么。

转换：translateZ（0）；声明触发了现代桌面和移动浏览器中的GPU加速。这似乎是触发GPU加速的最有效方式。这在使用现代CSS属性时适用，例如框阴影、插入框阴影、文本阴影和CSS动画。这减少了客户端CPU的压力，并允许图形处理器处理繁重的工作。请记住，在某些情况下，客户端GPU可能效率较低，或者不存在。如果您使用的是PolyFill，例如CSSPIE，您的最初反应可能是将其用于需要pollyfill注入的浏览器，但考虑到不支持CSS3的浏览器无法识别translate属性，这是不正确的