前言

最近在看在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屬性：

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

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

方法一