Pengoptimuman prestasi
Pengoptimuman prestasi
Pilih gaya penggunaan tinggi dengan teliti
Atribut penggunaan tinggi memerlukan penyemak imbas melakukan banyak pengiraan sebelum melukis:
-
transparensi
transforms
Penapis CSS (pembunuh prestasi)
Elakkan pengaliran semula yang berlebihan
Apabila pengaliran semula perlu dilakukan dan pengiraan lebih banyak butiran.
Elemen aliran semula biasa:
lebar
tinggi
padding
margin
lebar
kedudukan
atas
kiri
kanan
bawah
saiz fon
apung
flow-y- font-weight
- fon-keluarga
- line-height
- vertical-align
- clear
- -ketinggian garis
- vertical-align
- clear
-
- Gunakan Paparan dengan betul Atribut
- paparan: jadual-* tidak boleh digunakan selepas jidar atau apungan
- Jangan menyalahgunakan Float
- Float mempunyai jumlah pengiraan yang besar semasa pemaparan, jadi gunakannya sesedikit mungkin. Pengoptimuman prestasi animasi
- Prinsip pelaksanaan animasi adalah untuk mengambil kesempatan daripada fenomena "persistence of vision" mata manusia untuk terus memainkan beberapa gambar pegun dalam tempoh yang singkat, menyebabkan mata kasar mencipta ilusi disebabkan kepada imej sisa visual, dan tersilap percaya bahawa gambar itu adalah gambar Dalam "pergerakan". Konsep asas animasi:
- Jika anda menggunakan animasi berdasarkan javaScript, cuba gunakan requestAnimationFrame Elakkan menggunakan setTimeout, setInterval.
- Elakkan menukar gaya setiap bingkai melalui sesuatu seperti jQuery animate()-style untuk penyemakan imbas yang lebih baik.
Gunakan terjemah dan bukannya kedudukan mutlak dan anda akan mendapat fps yang lebih baik dan animasi akan menjadi lebih lancar.
Gunakan lebih banyak keupayaan perkakasan, seperti menghidupkan pecutan GPU melalui ubah bentuk 3D
Secara amnya dalam Chrome, 3D atau transformasi perspektif (transformasi perspektif) sifat CSS dan animasi CSS kelegapan akan mencipta lapisan baharu dan pemaparan dipercepatkan perkakasan Di bawah pengoptimuman saluran, selepas GPU menyelesaikan operasi seperti ubah bentuk 3D, ia melakukan operasi komposit pada lapisan (Lapisan Kompetitif), dengan itu mengelakkan mencetuskan lukisan semula berskala besar dan penyusunan semula penyemak imbas.
Nota: Ubah bentuk 3D akan menggunakan lebih banyak memori dan penggunaan kuasa.
Kelancaran animasi menggunakan translate3d untuk mengalihkan 500px ke kanan adalah lebih baik daripada menggunakan kiri secara langsung:
.ball-1 {
transition: -webkit-transform .5s ease;
-webkit-transform: translate3d(0, 0, 0);
}
.ball-1.slidein{
-webkit-transform: translate3d(500px, 0, 0);
}
.ball-2 {
transition: left .5s ease; left：0;
}
.ball-2.slidein {
left：500px;
}Tingkatkan prestasi pemilih CSS
Impak pemilih CSS pada prestasi datang daripada masa yang diluangkan oleh penyemak imbas apabila memadankan pemilih dan masa elemen dokumen, jadi prinsip mengoptimumkan pemilih adalah cuba mengelak daripada menggunakan pemilih yang menggunakan lebih banyak masa padanan. Sebelum itu, kita perlu memahami mekanisme pemadanan pemilih CSS, seperti peraturan sub-pemilih:
#header > a {font-weight:blod;}Kebanyakan daripada kita membaca dari kiri ke kanan, dan lazimnya akan menetapkan pelayar untuk membaca dari kiri Peraturan pemadanan dilakukan di sebelah kanan cara. Ia adalah spekulasi bahawa kos peraturan ini tidak tinggi.
Kami akan menganggap bahawa penyemak imbas berfungsi dengan cara ini: ia mencari elemen dengan pengepala id, dan kemudian menggunakan peraturan gaya pada elemen dalam elemen anak langsung. Kami tahu bahawa hanya terdapat satu elemen dalam dokumen dengan pengepala id, dan ia hanya mempunyai beberapa anak elemen a, jadi pemilih CSS ini sepatutnya cukup cekap.
Malah, ia adalah sebaliknya, pemilih CSS memadankan peraturan dari kanan ke kiri. Selepas memahami mekanisme ini, pemilih yang kelihatan cekap dalam contoh mempunyai kos pemadanan yang sangat tinggi dalam amalan Penyemak imbas mesti merentasi semua elemen dalam halaman dan menentukan sama ada id elemen induknya adalah pengepala.
Jika anda menukar pemilih anak contoh kepada pemilih keturunan, kosnya akan lebih tinggi Selepas merentasi semua elemen dalam halaman, anda perlu melintasi atasan mereka sehingga nod akar.
#header a {font-weight:blod;}Setelah memahami mekanisme pemadanan pemilih CSS dari kanan ke kiri, saya faham bahawa selagi terdapat pemilih lain di sebelah kiri pemilih semasa, sistem gaya akan terus bergerak ke kiri sehingga ia menemui pemilih yang sepadan dengan peraturan, atau kerana Keluar jika tiada padanan. Kami memanggil pemilih paling kanan pemilih kunci. ——Maklumat lanjut
1 Elakkan menggunakan pemilih universal
/* Not recommended */
.content * {color: red;}Selepas memadankan semua elemen dalam dokumen, penyemak imbas akan memadankan elemen dengan kandungan kelas sehingga nod akar dokumen. Oleh itu, overhed yang sepadan adalah sangat besar, jadi anda harus mengelak daripada menggunakan pemilih kunci sebagai pemilih kad bebas.
2. Elakkan menggunakan tag atau pemilih kelas untuk mengehadkan pemilih id
/* Not recommended */
button#backButton {…}
/* Recommended */
#newMenuIcon {…}3 Elakkan menggunakan tag untuk mengehadkan pemilih kelas
/* Not recommended */
treecell.indented {…}
/* Recommended */
.treecell-indented {…}
/* Much to recommended */
.hierarchy-deep {…}4. Gunakan penggantian pemilih kelas untuk mengurangkan carian css
/* Not recommended */
treeitem[mailfolder="true"] > treerow > treecell {…}
/* Recommended */
.treecell-mailfolder {…}5 Elakkan menggunakan sub-pemilih
/* Not recommended */
treehead treerow treecell {…}
/* Recommended */
treehead > treerow > treecell {…}
/* Much to recommended */
.treecell-header {…}6.
