這篇文章主要介紹了詳解CSS3開啟硬件加速的使用和坑，內(nèi)容挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。
最近在看在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都支持硬件加速，當它們檢測到頁面中某個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)致的？;
而當為元素定義 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í)有所幫助，更多相關(guān)內(nèi)容請關(guān)注PHP中文網(wǎng)！
相關(guān)推薦：
關(guān)于bootstrap3.0的柵格系統(tǒng)原理
Atas ialah kandungan terperinci 關(guān)于CSS3開啟硬件加速的使用和陷阱. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undress AI Tool
Gambar buka pakaian secara percuma
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
Apa itu 'menyekat CSS'?
Jun 24, 2025 am 12:42 AM
CSS Blok halaman yang diberikan kerana pelayar melihat CSS dalam talian dan luaran sebagai sumber utama secara lalai, terutamanya dengan stylesheet yang diimport, header sejumlah besar CSS sebaris, dan gaya pertanyaan media yang tidak dapat dioptimumkan. 1. Ekstrak CSS kritikal dan membenamkannya ke HTML; 2. Kelewatan memuatkan CSS bukan kritikal melalui JavaScript; 3. Gunakan atribut media untuk mengoptimumkan pemuatan seperti gaya cetak; 4. Memampatkan dan menggabungkan CSS untuk mengurangkan permintaan. Adalah disyorkan untuk menggunakan alat untuk mengekstrak CSS utama, menggabungkan REL = "Preload" pemuatan asynchronous, dan menggunakan media yang ditangguhkan dengan munasabah untuk mengelakkan pemisahan yang berlebihan dan kawalan skrip kompleks.
Luaran vs CSS Dalaman: Apakah pendekatan terbaik?
Jun 20, 2025 am 12:45 AM
Thebestapproachforcssdependonstantheproject'ssspecificneeds.forlargerprojects, externalcssisbetterduetomaintainabilityability;
Adakah CSS saya mesti berada di bawah kes?
Jun 19, 2025 am 12:29 AM
Tidak, cssdoesnothavetobeinlowercase.however, menggunakanLowerCaseisRecommendorfendfor: 1) Consistencyandreadability, 2) Mengelakkaningerrorsinrelatedtechnologies, 3) potensiformanceBenefits, dan4) peningkatan yang lebih baik.
Kepekaan kes CSS: Memahami apa yang penting
Jun 20, 2025 am 12:09 AM
Cssismostlycase-insensitive, buturlsandfontfamilynamesarecase-sensitif.1) propertiesandvalueslikecolor: merah; arenotcase-sensitif.2) urlsmustmatchtheserver'scase, mis.,
Apakah AutoPrefixer dan bagaimana ia berfungsi?
Jul 02, 2025 am 01:15 AM
AutoPrefixer adalah alat yang secara automatik menambah awalan vendor ke atribut CSS berdasarkan skop penyemak imbas sasaran. 1. Ia menyelesaikan masalah mengekalkan awalan secara manual dengan kesilapan; 2. Bekerja melalui borang pemalam postcss, menghuraikan CSS, menganalisis atribut yang perlu diawali, dan menjana kod mengikut konfigurasi; 3. Langkah-langkah penggunaan termasuk memasang pemalam, menetapkan senarai pelayar, dan membolehkan mereka dalam proses membina; 4. Nota termasuk tidak menambah awalan secara manual, menyimpan kemas kini konfigurasi, awalan tidak semua atribut, dan disyorkan untuk menggunakannya dengan preprocessor.
Apakah kaunter CSS?
Jun 19, 2025 am 12:34 AM
Csscounterscanautomaticallynumbersectionsandlists.1) useCounter-resettoinitialize, counter-incrementToinCrease, andCounter () orcounters () todisplayvalues.2) CombinWithjavascriptfordynamicContentToenSureAccurateupdates.
CSS: Bilakah kes perkara (dan kapan tidak)?
Jun 19, 2025 am 12:27 AM
Dalam CSS, nama pemilih dan atribut adalah sensitif kes, manakala nilai, warna yang dinamakan, URL, dan atribut tersuai adalah sensitif kes. 1. Nama pemilih dan atribut adalah kes-tidak sensitif, seperti warna latar belakang dan warna latar belakang adalah sama. 2. Warna heksadesimal dalam nilai adalah sensitif kes, tetapi warna bernama adalah sensitif kes, seperti merah dan merah tidak sah. 3. URL adalah sensitif kes dan boleh menyebabkan masalah pemuatan fail. 4. Sifat tersuai (pembolehubah) adalah sensitif kes, dan anda perlu memberi perhatian kepada konsistensi kes apabila menggunakannya.
Apakah fungsi conic-gradient ()?
Jul 01, 2025 am 01:16 AM
Function-gradient () functionIncsscreatesculculargradientsthatrotatecolorstopsaroundroentroint.1.ISIISIDEALFORPIECHARTS, Progressindicators, Colorwheels, andDecorativeBackgrounds.2.itworksByDefiningColorStopsatSpecificles, OpsticalStarting
