Analisis dan Ringkasan Kesan CSS pada Kecekapan Pemuatan Halaman Web Pertukaran Pengalaman

Kami telah menyenaraikan lebih daripada sedozen pengetahuan dan mata perhatian yang berkaitan Anda boleh membincangkannya secara sistematik untuk menjadikan halaman Web yang kami tulis terbuka dengan lebih lancar.
Tolong jangan beritahu saya bahawa anda tidak boleh membaca E-teks, cuma anda tidak mahu membacanya! ! !

　　1、Cara sistem gaya memecah peraturan 
　　Sistem gaya memecahkan peraturan ke dalam empat kategori utama. Adalah penting untuk memahami kategori ini, kerana mereka merupakan baris pertahanan pertama setakat padanan peraturan yang berkenaan. Saya menggunakan istilah pemilih kunci dalam perenggan yang berikut. Pemilih kunci ditakrifkan sebagai kejadian paling tepat bagi pemilih id, pemilih kelas atau pemilih teg. 

　　1.1、Peraturan ID 
　　Kategori pertama terdiri daripada peraturan yang mempunyai pemilih ID sebagai pemilih kunci mereka. 

button#backButton { } /* Ini adalah peraturan dikategorikan ID */
#urlBar[type="autocomplete"] { } /* Ini adalah peraturan berkategori ID */
treeitem > treerow > treecell#myCell :active { } /* Ini adalah peraturan dikategorikan ID */
　　1.2、Peraturan Kelas 
Jika peraturan mempunyai kelas ditentukan sebagai pemilih kunci ke dalamnya, dikategorikan kemudian  

button.toolbarButton { } /* Peraturan berasaskan kelas */
.fancyText { } /* Peraturan berasaskan kelas */
menuitem > .menu-kiri [diperiksa = "benar"] {}/*Peraturan berasaskan kelas*/
1.3 、 Peraturan tag
Jika tiada kelas atau ID ditentukan sebagai pemilih utama, maka kategori potensi seterusnya untuk peraturan ialah kategori tag. Jika peraturan mempunyai teg ditentukan sebagai pemilih kunci nya, maka peraturan tergolong ke dalam kategori ini. 

td { } /* Peraturan berasaskan teg */
treeitem > treerow { } /* Peraturan berasaskan teg */
input[type="checkbox"] { } /*  Peraturan berasaskan teg */
　　1.4、Peraturan Universal 
　　Semua peraturan yang lain kategori. 


:jadual { } /* Peraturan universal */
[hidden="true"] { } /* Peraturan universal */
* { } /* Peraturan universal */
pokok > [collapsed="true"] { } /* Peraturan sejagat */
　　2、Cara Sistem Gaya Padanan Peraturan 
　　Sistem gaya padanan satu peraturan dengan bermula dengan pemilih paling kanan ke                                                                                                                          ” Selagi subpokok kecil anda terus mendaftar keluar, sistem gaya akan terus bergerak ke kiri sehingga sama ada padanan peraturan atau selamat keluar kerana ketakpadanan. 
　　Barisan pertahanan pertama anda adalah peraturan penapisan yang berlaku berdasarkan jenis pemilih kekunci. Tujuan pengkategorian ini adalah untuk menapis peraturan supaya anda tidak perlu membuang masa mencuba untuk memadankan peraturan tersebut. Ini adalah kunci untuk meningkatkan prestasi secara dramatik. Semakin sedikit peraturan yang anda perlu semak untuk mendapatkan elemen yang diberikan, semakin cepat resolusi gaya. Sebagai contoh, jika elemen anda mempunyai ID, maka hanya peraturan ID yang sepadan dengan ID elemen anda akan disemak. Hanya peraturan kelas untuk  kelas yang terdapat pada elemen anda akan ditandai. Hanya peraturan teg yang padanan teg anda akan disemak. Peraturan universal akan sentiasa disemak. 

　　3、Garis Panduan untuk CSS  Cekap 
　　3.1、Elakkan Peraturan Universal! 
　　Pastikan peraturan tidak berakhir dalam kategori sejagat!

3.2 、 Jangan memenuhi syarat Peraturan yang dikategorikan ID dengan nama tag atau kelas
Jika anda mempunyai peraturan gaya yang mempunyai pemilih ID sebagai pemilih utama, jangan risau juga menambah nama tag peraturan. ID adalah unik, jadi anda memperlahankan padanan tanpa sebab sebenar. 

复制代码 代码如下:

BAD balik }  
BURUK - .menu-left#newMenuIcon { }  
BAIK - #backButton { }  
BAIK - #newMenuIcon { }  

GOOD - #backButton { }  
BAIK - #newMenuIcon { }  

3.、、、、、3、、、 peraturan dengan nama teg 
　　Serupa dengan peraturan di atas, semua kelas kami akan unik. Konvensyen yang anda patut gunakan adalah menyertakan nama tag dalam nama kelas. 

复制代码

代码如下:


BAD. }  

BAIK - .berinden sel pokok { }  
　　3.4、Essayez de mettre les règles dans la catégorie la plus spécifique que possible ! 
　　La plus grande cause du ralentissement dans notre système est que nous avons trop de règles dans la catégorie de tag . En ajoutant des classes à nos éléments, nous pouvons subdiviser ces règles en catégories de classes, et nous ne perdons plus de temps à essayer de faire correspondre autant de règles pour une balise donnée. 


MAUVAIS - treeitem[mailfolder="true"] > rangée d'arbres > treecell { } 
BON - .treecell-mailfolder { } 
　　3.5、Évitez le sélecteur descendant ! 
　　Le sélecteur descendant est le sélecteur le le plus cher en CSS. C'est terriblement cher, surtout si une règle utilisant le sélecteur est dans la catégorie balise ou universelle. Souvent, ce qui est réellement souhaité, c'est le sélecteur d'enfants. L'utilisation du sélecteur descendant est interdite dans UI CSS sans l'approbation explicite du propriétaire du module de votre skin. 

MAUVAIS - treehead treerow treecell { } 
MIEUX, MAIS TOUJOURS MAUVAIS (voir la directive suivante) - treehead > rangée d'arbres > treecell { } 
　　3.6、Les règles catégorisées par balises ne doivent jamais contenir un sélecteur enfant ! 
　　Évitez d'utiliser le sélecteur d'enfants avec des règles catégorisées par tags. Vous augmenterez considérablement le temps de correspondance (surtout si la règle est susceptible d'être correspondée plus souvent qu'autrement) pour toutes les occurrences de ce élément. 


MAUVAIS - tête d'arbre > rangée d'arbres > treecell { } 
BEST - .treecell-header { } 
　　3.7、Remettez en question toutes les utilisations du sélecteur enfant ! 
　　Soyez prudent lorsque vous utilisez le sélecteur d'enfants. Si vous pouvez trouver un moyen d'éviter d'avoir à l'utiliser, faites-le. En particulier, le sélecteur enfant est fréquemment utilisé avec les arborescences RDF et les menus similaires. 


MAUVAIS - treeitem[IsImapServer="true"] > rangée d'arbres > .tree-folderpane-icon { } 
　　N'oubliez pas que les attributs de RDF peuvent être dupliqués dans un modèle ! Profitez de ce fait pour dupliquer les propriétés RDF sur les éléments XUL enfants qui souhaitent changer en fonction de cet attribut. 


BON - .tree-folderpane-icon[IsImapServer="true"] { } 
　　3.8、Fiez-vous à l'héritage ! 
　　Découvrez quelles propriétés héritent et permettez-leur de le faire ! Nous avons explicitement configuré un widgetry XUL afin que vous pouvez mettre une image de style de liste (juste un exemple) ou des règles de police sur la balise parent, et il filtrera dans le contenu anonyme. Vous n'avez pas à perdre du temps à écrire une règle qui s'adresse directement au contenu anonyme. 


MAUVAIS - #bookmarkMenuItem > .menu-left { list-style-image : url(blah); } 
BON - #bookmarkMenuItem { list-style-image : url(blah); } 
　　Dalam contoh di atas, keinginan untuk menggayakan kandungan tanpa nama (tanpa memahami bahawa imej-gaya-senarai mewarisi) mengakibatkan peraturan yang ada dalam kategori kelas, sehingga didirikan pada akhirnya paling khusus kategori semua , kategori ID. 
　　Ingat, terutama dengan kandungan tanpa nama, bahawa mereka semua mempunyai kelas yang sama! Peraturan buruk di atas menyebabkan ikon setiap menu disemak untuk melihat sama ada ia terkandung dalam item menu penanda halaman. Ini sangat mahal (memandangkan terdapat banyak menu); peraturan ini tidak sepatutnya disemak oleh mana-mana menu selain daripada menu penanda halaman. 

　　3.9、Gunakan -moz-image-region! 
　　Memasukkan sekumpulan imej ke dalam satu fail imej dan memilih ia dengan -moz-image-region berprestasi dengan ketara lebih baik daripada meletakkan setiap imej ke dalam fail sendiri. 
　　Maklumat Dokumen Asal － Pengarang: David Hyatt