用CSS開啟硬體加速來提高網站效能（轉）用CSS開啟硬體加速來提高網站效能（轉）

阿新 • • 發佈：2019-01-10

用CSS開啟硬體加速來提高網站效能（轉）

翻譯文章，原文地址：http://blog.teamtreehouse.com/increase-your-sites-performance-with-hardware-accelerated-css。

你知道我們可以在瀏覽器中用css開啟硬體加速，使GPU (Graphics Processing Unit) 發揮功能，從而提升效能嗎？

現在大多數電腦的顯示卡都支援硬體加速。鑑於此，我們可以發揮GPU的力量，從而使我們的網站或應用表現的更為流暢。

在桌面端和移動端用CSS開啟硬體加速

CSS animations, transforms 以及 transitions 不會自動開啟GPU加速，而是由瀏覽器的緩慢的軟體渲染引擎來執行。那我們怎樣才可以切換到GPU模式呢，很多瀏覽器提供了某些觸發的CSS規則。

現在，像Chrome, FireFox, Safari, IE9+和最新版本的Opera都支援硬體加速，當它們檢測到頁面中某個DOM元素應用了某些CSS規則時就會開啟，最顯著的特徵的元素的3D變換。

例如：

.cube { -webkit-transform: translate3d(250px,250px,250px)

rotate3d(250px,250px,250px,-120deg) scale3d(0.5, 0.5, 0.5); }

可是在一些情況下，我們並不需要對元素應用3D變換的效果，那怎麼辦呢？這時候我們可以使用個小技巧“欺騙”瀏覽器來開啟硬體加速。

雖然我們可能不想對元素應用3D變換，可我們一樣可以開啟3D引擎。例如我們可以用transform: translateZ(0); 來開啟硬體加速。

.cube { -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); /* Other transform properties here */ }

在 Chrome and Safari中，當我們使用CSS transforms 或者 animations時可能會有頁面閃爍的效果，下面的程式碼可以修復此情況：

.cube { -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; -webkit-perspective: 1000; -moz-perspective: 1000; -ms-perspective: 1000; perspective: 1000; /* Other transform properties here */ }

在webkit核心的瀏覽器中，另一個行之有效的方法是

.cube { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); /* Other transform properties here */ }

原生的移動端應用(Native mobile applications)總是可以很好的運用GPU，這是為什麼它比網頁應用(Web apps)表現更好的原因。硬體加速在移動端尤其有用，因為它可以有效的減少資源的利用(麥時注：移動端本身資源有限)。

總結

只對我們需要實現動畫效果的元素應用以上方法，如果僅僅為了開啟硬體加速而隨便亂用，那是不明智的。

小心使用這些方法，如果通過你的測試，結果確是提高了效能，你才可以使用這些方法。使用GPU可能會導致嚴重的效能問題，因為它增加了記憶體的使用，而且它會減少移動端裝置的電池壽命。