前言

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

開啟CSS3加速

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

舉個例子：

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

Chrome, FireFox, Safari, IE9+和最新版本的Opera都支持硬件加速，當(dāng)它們檢測到頁面中某個DOM元素應(yīng)用了某些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+）是用來隱藏被旋轉(zhuǎn)元素的背面，translateZ 導(dǎo)致的？;
• 而當(dāng)為元素定義 perspective 屬性時，其子元素會獲得透視效果。

換言之，并不是去掉閃爍，而是設(shè)成透明[技術(shù)太渣根本不敢說話]

方法二

如果是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);
}

硬件加速的坑

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

然后說一下怎么打開查看【復(fù)合層】元素選項的方式，好像上面文章提到的方法有點過時：

打開控制臺

勾選Layer Borders選項，你會發(fā)現(xiàn)世界突然清晰了許多

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

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

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

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評論