首頁 > 文章 > web前端 > 關於CSS3開啟硬體加速的使用與陷阱

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

不言原創: 2018-06-20 14:58:002468瀏覽

這篇文章主要介紹了詳解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值高
}

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

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

相關文章