Mobile Safari中的2D變換硬件加速了嗎？

Question

我經常被告知，CSS 3D變換在移動Safari中是硬件加速的，這讓我想知道這樣做是否意味着2D變換不是？我可以不考慮爲什麼他們不會這樣做，因爲他們基本上都可以作爲3D轉換來實現，但我想確切知道。

如果事實證明2D變換不是硬件加速的，那麼爲什麼會非常感激任何洞察力。

Answer 1

你是對的，CSS 2D轉換不是硬件加速在移動Safari中，但3D轉換是。我不確定爲什麼會這樣，但也許他們認爲對於大多數2D變換來說是過度的。不必要地使用GPU可能會對電池壽命產生不利影響。

將2D變換轉換爲3D變換非常容易，所以它不是什麼大問題。一個竅門是使用translateZ（0）如下所述：http://creativejs.com/2011/12/day-2-gpu-accelerate-your-dom-elements/

編輯

蘋果並沒有說明它在其文檔中任何東西，所以很難得到一個權威來源。以下是來自蘋果院長傑克遜不得不說一下它（從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/。下面是它的一個片段：

目前大多數瀏覽器只在使用GPU加速功能時，他們強烈指示HTML元素會從中受益。最強烈的跡象是3D轉換被應用到它。現在你可能並不是真的想要應用3D轉換，但仍然可以從GPU加速中獲益 - 沒有問題。簡單地應用標識轉換：

-webkit-transform：translateZ（0）;

Firefox和Internet Explorer已經在2D轉換中使用硬件加速，因此如果WebKit瀏覽器（Chrome，Safari）在不久的將來將其包含在內，我不會感到驚訝。