啓用硬件加速：translate3d

由於David Walsh簡要地描述了discusses，所以可以使用CSS中基於零的translate3d屬性強制進行硬件加速。啓用硬件加速：translate3d

它的工作原理是這樣的：

.animClass { 
    -webkit-transform: translate3d(0, 0, 0); 
    -webkit-backface-visibility: hidden; 
    -webkit-perspective: 1000; 

    /* more specific animation properties here */ 
}

我仍然不相信我是否應該開始使用這種技術。我在我的響應式網站上使用了許多轉換，但沒有一個會同時運行，我希望爲舊設備以及高性能設備提供流暢的體驗。

我的問題，那麼，有：

是否上述的技術中提高過渡，例如不透明度，寬度和位置（左，右，頂部，底部）的執行？並應該以上屬性。
這是如何跨瀏覽器？我對IE8和更低版本不感興趣，但特別是移動Android，iOS和Windows Phone設備應該從中受益。需要添加哪些代碼才能實現更好的兼容性？
應該將硬件啓用代碼添加到每個具有transition屬性的元素嗎？如果是這樣，是否有辦法將它變成一個簡單的SASS混音器，可以輕鬆使用？

來源

2015-01-17 Bram Vanroy

的暗示，第三部分：

你應該記住，瀏覽器已經優化的佈局和設計動畫。當您取消任何瀏覽器優化時，強制硬件加速到每個動畫元素都會適得其反。甚至在考慮使用這種黑客攻擊之前，您應該始終使用適當的工具來衡量您的網站渲染性能。

簡而言之：在每個新版本中，瀏覽器變得越來越聰明，而且作爲一個人，你不可能比一羣在渲染引擎上工作多年的開發人員更聰明。

來源

2015-01-26 10:26:41 feeela

這實際上取決於什麼樣的應用您正在研究。我正在爲iOS和Android開發一款混合應用程序，並迫使硬件加速是非常必要的，並且正在做出奇蹟般的工作。你的回答應該更適合作爲評論。 –

我可以一般地說（根據我自己的經驗），如果明智地使用，它可以提高速度和性能（特別是在Android和iOS上的Web視圖中）。對所有元素應用硬件加速可能會產生反效果，特別是在內存較少的設備上。

我在渲染圖像時使用它很多，我需要提高質量以使圖像不模糊，並強制設備緩存整個圖像。當Android的部分位於視口之外時，Android通常會「剪切圖片」。但要小心，在Android上運行硬件加速到很多元素可能會導致應用程序崩潰。同樣的規則也適用於iOS（即使iOS在Web視圖中有更好的性能，所以你「可以做更多」）。

它可以跨瀏覽器工作，但需要添加前綴。在Android上我使用它到4.2。
正如我所說，明智地使用它。將它應用於一個類，然後只將該類設置爲需要硬件加速的特定元素。如果不再需要，請刪除課程。

所以只有在需要的時候才使用它，並且只在當前時刻需要的元素上使用它。請小心將它同時應用於很多元素。元素數量的限制很難說。但由於瀏覽器內存的它會在桌面上不同的/的iOS /安卓等

不要用動畫的位置，而不是使用翻譯，這將提高了動畫（尤其是設備）的性能。

我不會對我的應用程序中刪除硬件加速，因爲那將執行差很多:)

來源

2015-01-30 13:24:09

啓用硬件加速：translate3d

回答

相關問題