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

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

開啟CSS3加速

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

舉個例子：

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

Chrome, FireFox, Safari, IE9+和最新版本的Opera都支持硬件加速，當它們檢測到頁面中某個DOM元素應用了某些CSS規(guī)則時就會開啟，最顯著的特征的元素的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);
}

據(jù)說使用以上樣式觸發(fā)硬件加速后會出現(xiàn) “頁面可能會出現(xiàn)閃爍的效果“ 的問題，我是還沒有發(fā)現(xiàn)，在網(wǎng)上是找到兩個可以解決的方法：

方法一

.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內(nèi)核，還有一種方式可以解決：

.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選項，你會發(fā)現(xiàn)世界突然清晰了許多

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

使用3D硬件加速提升動畫性能時，最好給元素增加一個z-index屬性，人為干擾復合層的排序，可以有效減少chrome創(chuàng)建不必要的復合層，提升渲染性能，移動端優(yōu)化效果尤為明顯。

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

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，更多相關內(nèi)容請關注PHP中文網(wǎng)！

相關推薦：

關于開發(fā)CSS3彈性盒模型的方法之二

關于bootstrap3.0的柵格系統(tǒng)原理

以上是關于CSS3開啟硬件加速的使用和陷阱的詳細內(nèi)容。更多信息請關注PHP中文網(wǎng)其他相關文章！