3

有人刚刚在 IRC 上问了这个问题:设置它们document.body是否可能或可行,translateZ(0)以及这样做的好处或坏处是什么。

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

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

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

4

1 回答 1

0

The transform: translateZ(0); declaration triggers GPU acceleration in modern desktop and mobile browsers. This seems to be the most effective way of triggering GPU acceleration. This is applicable when using modern CSS attributes, such as box-shadow, inset box-shadows, text-shadows, and CSS animations. This reduces the strain on the client-side CPU, and allows the graphic processor to handle the heavy-lifting. Keep in mind, in some scenarios, the clients GPU may be less efficient, or non-existing. If you are using polyfills, such as CSSPIE, your initial reaction may be to use this for browsers that will require a pollyfill injection, this isnt true considering the browsers that dont support CSS3 dont recognize the translate property.

于 2013-09-13T18:23:08.220 回答