關於CSS3開啟硬體加速的使用和陷阱

這篇文章主要介紹了詳解CSS3開啟硬體加速的使用和坑，內容挺不錯的，現在分享給大家，也給大家做個參考。

最近在看在github上看iscroll的文檔。雖然是英文的，但是為了裝逼，沒辦法硬著頭皮看完了，覺得作者寫得不錯（我有那麼好耐心寫那麼長的文檔就好了[捂臉]），然後為了更好地裝逼，有看了一遍，其中是發現了不少好東西的，比如說 CCS3硬體加速 就是在上面被我擴充出來的。為了大家可以一起愉快地玩耍，我就先附上iscroll的Github Link：https://github.com/issaxite/iscroll

開啟CSS3加速

平時我們寫的css3動畫（沒有觸發硬體加速的）都是使用瀏覽器緩慢的軟體渲染引擎來執行，字面上意思就是沒有開啟硬體加速。比如有時候寫的移動端網頁的動畫（比如最簡單的模態框）在安卓手機上會出現卡幀的現象，有很大可能就是使用瀏覽器軟體渲染引擎來執行，效能跟不上導致的。上面說到 硬體加速 就可以解決這個問題，效能跟不上嘛，那就Spider Man上（能力越大，責任越大）——來硬體加速，效能提上去呀（我知道這又是一個爛gag），其實所謂硬體加速就是告訴瀏覽器，讓它使用GPU進行渲染，切換到GPU模式，發揮GPU的一系列功能。

舉個例子：

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

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

在其他的文章上看到的幾個可以切換到GPU模式的幾個3d屬性：

.isaax{   -webkit-transform: translate3d(250px,250px,250px)   rotate3d(250px,250px,250px,-120deg)   scale3d(0.5, 0.5, 0.5);}

在iscroll的文檔上看到的是下面這個：

.isaax {   -webkit-transform: translateZ(0);   -moz-transform: translateZ(0);   -ms-transform: translateZ(0);   -o-transform: translateZ(0);   transform: translateZ(0);}

據說使用以上樣式觸發硬體加速後會出現 “頁面可能會出現閃爍的效果“ 的問題，我是還沒有發現，在網上是找到兩個可以解決的方法：

方法一

.isaax {   -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;}

• backface-visibility （ie10+）是用來隱藏被旋轉元素的背面，translateZ 導致的？;

• 而當為元素定義 perspective 屬性時，其子項目會獲得透視效果。

換言之，並不是去掉閃爍，而是設成透明[技術太渣根本不敢說話]

方法二

如果是webkit核心，還有一種方式可以解決：

.isaax {   -webkit-transform: translate3d(0, 0, 0);   -moz-transform: translate3d(0, 0, 0);   -ms-transform: translate3d(0, 0, 0);   transform: translate3d(0, 0, 0);}

硬體加速的坑

看了大神的文章才知道，握草，這東西也不是萬金油啊，用得不好，狠起來你那女票還狠，看了開啟大神的例子又再次感受到深深的惡意。頭部的那個輪播動畫元素的存在居然會導致下面所有相對和絕對位置的元素都被放到複合層中。。。

然後說一下怎麼開啟查看【複合層】元素選項的方式，好像上面文章提到的方法有點過時：

開啟控制台

勾選Layer Borders選項，你會發現世界突然清晰了許多

最後，附上跳過坑的方法：

使用3D硬體加速提升動畫效能時，最好給元素增加一個z-index屬性，人為幹擾複合層的排序，可以有效減少chrome建立不必要的複合層，提升渲染效能，移動端最佳化效果尤為明顯。

.isaax{  position: relative;  z-index: 1;  // 可以設大點，盡量設得比後面元素的z-index值高}

以上就是本文的全部內容，希望對大家的學習有所協助，更多相關內容請關注topic.alibabacloud.com！