持續時間爲零的css轉換是否仍硬件加速？

給出下面的動畫循環：持續時間爲零的css轉換是否仍硬件加速？

var element = document.getElementById('myElement'), 
    left = 0; 

element.style.transition = 'translate 0s linear'; 

function loop() { 
    left++; 
    element.style.transform = 'matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,' + left + ',0,0,1)'; 
    requestAnimationFrame(loop); 
}

將動畫還是利潤硬件accelleration，像它會如果單純使用一個CSS過渡？此外，環境（瀏覽器，版本，操作系統）對此有什麼影響？

（上面的代碼僅僅是爲了讓你知道我在做什麼，它並不意味着在生產中使用，通常我會爲我們的requestAnimationFrame()備用，實現一種方式控制動畫等）。

來源

2013-08-30 Anatol

嘗試在Chrome中調試。您可以在「檢查器工具」中選擇一個標記，以繪製被繪對象周圍的矩形。當一個元素被硬件加速時，它不會作爲繪製區域出現。元素周圍沒有紅色的矩形可以顯示硬件加速。

來源

2013-09-05 13:05:58 JanTheHuman

謝謝，這工作。地區重新粉刷，我花了一些時間來弄清楚爲什麼。 – Anatol

我無法確定，因爲我無法明確地測試它，但似乎發生的情況如下：更改DOM節點的樣式屬性會導致樣式失效。樣式將不得不重新解析，並且元素必須重繪。即使翻譯本身會被GPU處理，也不會有任何性能提升。 AFAIK從瀏覽器中的硬件加速動畫（webGL除外）中獲利的唯一方法是使用轉換。 – Anatol

持續時間爲零的css轉換是否仍硬件加速？

回答

相關問題