mobile-safari - Mobile Safari 中的 2D 转换硬件是否加速？

Question

我经常被告知 CSS 3D 转换是 Mobile Safari 中的硬件加速，这让我怀疑这是否意味着 2D 转换不是？我想不出为什么它们不会，因为它们基本上都可以实现为 3D 变换，但我想确定。

如果事实证明 2D 转换不是硬件加速的，那么任何有关原因的见解都会非常感激。

Answer 1

你是对的，CSS 2D 转换不是 Mobile Safari 中的硬件加速，但 3D 转换是。我不确定为什么会这样，但也许他们认为对于大多数 2D 变换来说这太过分了。不必要地使用 GPU 可能会对电池生命周期产生不利影响。

将 2D 变换转换为 3D 变换非常容易，因此问题不大。一个技巧是使用 translateZ(0)，如下所述:http://creativejs.com/2011/12/day-2-gpu-accelerate-your-dom-elements/

编辑

苹果在他们的文档中没有对此进行任何说明，因此很难获得权威来源。以下是来自 Apple 的 Dean Jackson 的评论(来自 http://mir.aculo.us/2010/08/05/html5-buzzwords-in-action/):

In essence, any transform that has a 3D operation as one of its functions will trigger hardware compositing, even when the actual transform is 2D, or not doing anything at all (such as translate3d(0,0,0)). Note this is just current behaviour, and could change in the future (which is why we don’t document or encourage it). But it is very helpful in some situations and can significantly improve redraw performance.

来自 Sencha 的 Ariya Hidayat 写了一篇解释移动浏览器硬件加速的帖子: http://www.sencha.com/blog/understanding-hardware-acceleration-on-mobile-browsers/ .这是帖子中的一个片段:

The best practice of setting the CSS transformation matrix to translate3d or scale3d (even though there is no 3-D involved) comes from the fact that those types of matrix will switch the animated element to have its own layer which will then be composited together with the rest of the web page and other layers. But you should note that creating and compositing layers come with a price, namely memory allocation. It is not wise to blindly composite every little element in the web page for the sake of hardware acceleration, you’ll eat memory.

这是 html5rocks.com 上讨论硬件加速的文章: http://www.html5rocks.com/en/tutorials/speed/html5/ .这是其中的一个片段:

Currently most browsers only use GPU acceleration when they have a strong indication that an HTML element would benefit from it. The strongest indication is that a 3D transformation was applied to it. Now you might not really want to apply a 3D transformation, but still gain the benefits from GPU acceleration - no problem. Simply apply the identity transformation:

-webkit-transform: translateZ(0);

Firefox 和 Internet Explorer 已经将硬件加速用于 2D 转换，因此如果 WebKit 浏览器(Chrome、Safari)在不久的将来包含它，我不会感到惊讶。