前言

最近在看在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值高}

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。