2D Mobile是否在Mobile Safari中加速了硬件加速?

时间:2012-03-22 14:57:24

标签: mobile-safari hardware-acceleration css-transforms

我经常被告知CSS 3D变换是Mobile Safari中的硬件加速,这让我想知道是否暗示2D变换不是?我可以想到他们没有理由,因为他们基本上可以全部实现为3D变换,但我想肯定地知道。

如果事实证明2D变换不是硬件加速,那么任何有关原因的见解都会受到高度赞赏。

1 个答案:

答案 0 :(得分:15)

你是对的,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/。这是帖子的片段:

  

将CSS转换矩阵设置为translate3d或scale3d的最佳实践(即使没有涉及3-D)来自这样的事实:这些类型的矩阵将切换动画元素以具有其自己的层然后将是与网页的其余部分和其他图层一起合成。但是你应该注意到创建和合成图层需要付出代价,即内存分配。为了硬件加速而盲目地合成网页中的每个小元素是不明智的,你会吃掉内存。

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

  

目前大多数浏览器只有在强烈表明HTML元素会从中受益时才使用GPU加速。最强烈的迹象是对其应用了3D变换。现在你可能不想真正想要应用3D转换,但仍然可以从GPU加速中获益 - 没问题。只需应用身份转换:

-webkit-transform:translateZ(0);

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