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 在他们的文档中没有说明任何内容，因此很难获得权威来源。以下是来自 Apple 的 Dean Jackson 对此的评价（来自http://mir.aculo.us/2010/08/05/html5-buzzwords-in-action/）：

本质上，任何将 3D 操作作为其功能之一的变换都会触发硬件合成，即使实际变换是 2D 或根本不做任何事情（例如 translate3d(0,0,0)）。请注意，这只是当前的行为，将来可能会改变（这就是我们不记录或鼓励它的原因）。但它在某些情况下非常有用，可以显着提高重绘性能。

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

将 CSS 转换矩阵设置为 translate3d 或 scale3d（即使不涉及 3-D）的最佳实践来自这样一个事实，即这些类型的矩阵会将动画元素切换为拥有自己的图层，然后与网页的其余部分和其他图层合成在一起。但是您应该注意，创建和合成层是有代价的，即内存分配。为了硬件加速，一味的合成网页中的每一个小元素是不明智的，你会吃掉内存。

这是来自 html5rocks.com 的一篇讨论硬件加速的文章：http://www.html5rocks.com/en/tutorials/speed/html5/。这是其中的一个sn-p：

目前，大多数浏览器仅在有强烈迹象表明 HTML 元素将从中受益时才使用 GPU 加速。最强烈的迹象是对其应用了 3D 变换。现在您可能并不想应用 3D 转换，但仍能从 GPU 加速中获益——没问题。只需应用身份转换：

-webkit-transform: translateZ(0);

Firefox 和 Internet Explorer 已经使用硬件加速来进行 2D 转换，所以如果 WebKit 浏览器（Chrome、Safari）在不久的将来包含它，我不会感到惊讶。