11 Perkara yang Perlu Diperhatikan untuk Meningkatkan Kecekapan_Pertukaran Pengalaman Halaman Web CSS

1. Bilangan digit dan huruf besar dan kecil untuk nilai warna heksadesimal

Apabila menulis nilai warna heksadesimal, anda boleh menggunakan huruf kecil atau meninggalkannya menjadi 3 digit Tiada data khusus ditemui dalam cara ini Ia membuktikan sama ada ia mempunyai sebarang kesan ke atas kecekapan pemaparan penyemak imbas, tetapi piawaian lalai untuk nilai warna heksadesimal ialah notasi huruf besar dan 6 digit. Tidak mahu mengambil risiko dalam situasi yang tidak diketahui mengurangkan kecekapan rendering.

* Tidak diluluskan - warna:#f3a;

* Disyorkan - warna:#FF33AA;

2 untuk menetapkan atau mendapatkan semula sama ada untuk memaparkan objek. Paparkan objek tersembunyi tidak mengekalkan ruang fizikal, dan keterlihatan mengekalkan ruang fizikal yang diduduki oleh objek tersembunyi. Apabila penyemak imbas memaparkan ruang fizikal yang diduduki, sumber digunakan.

* Tidak diluluskan - keterlihatan:tersembunyi;

* Disyorkan - paparan:tiada; 3 Perbezaan antara sempadan: tiada; 🎜> adalah serupa dengan hubungan antara paparan dan keterlihatan, masing-masing tanpa dan ruang yang dikhaskan. Lagi tentang sempadan:0; Walaupun sempadan boleh disembunyikan, ia akan mengekalkan penggunaan warna sempadan/gaya sempadan untuk anda.

* Tidak diluluskan - sempadan:0;

* Disyorkan - sempadan:tiada;

4 Tidak dinasihatkan untuk menggunakan imej latar belakang yang terlalu kecil untuk jubin

Imej latar belakang dengan lebar dan ketinggian 1px Walaupun saiz fail sangat kecil, memaparkan panel dengan lebar dan ketinggian 500px memerlukan jubin berulang 2500 kali. Meningkatkan kecekapan pemaparan imej latar belakang adalah berkaitan dengan saiz dan kelantangan imej Saiz fail imej terbesar kekal kira-kira 70KB.

* Tidak Diluluskan - Imej latar belakang jubin dengan lebar dan tinggi di bawah 8px

* Disyorkan - Imej latar belakang dengan kelantangan dan saiz sederhana

5 Gunakan penapis IE dengan berhati-hati

Selain menggunakan sumber, penapis IE juga mempunyai masalah keserasian. Terdapat penapis yang menjadikan PNG telus Anda boleh mengelak daripada menggunakan penapis ini dengan menjadikan GIF atau JPG kelihatan lutsinar. Adalah disyorkan untuk hanya menggunakan ketelusan GIF dalam IE6, kerana IE7 dan ke atas sudah menyokong ketelusan PNG.

* Tidak setuju, menyalahgunakan penapis IE bukan sahaja menggunakan sumber tetapi juga menyebabkan masalah keserasian.

* Digalakkan guna, sebaiknya pilih kaedah lain untuk mengelak menggunakan penapis.


6. *{margin:0; padding:0;} untuk mengelakkan perbezaan gaya penyemak imbas

* memulakan semua teg dan pemaparan penyemak imbas mengambil masa tertentu. sumber. Sesetengah teg hampir sama dalam penyemak imbas yang berbeza, atau beberapa teg tidak lagi disyorkan (kerana anda tidak akan menggunakannya tidak perlu dimulakan semula dengan kad bebas. Ini boleh menjimatkan beberapa sumber).

* Tidak diluluskan, gunakan * kad bebas

* Tidak diluluskan, butang span div b jadual dan teg lain hendaklah disertakan dalam kad bebas untuk mengawal gaya isian dalaman dan luaran

* Disyorkan, bersikap selektif Gunakan kad bebas untuk mengawal gaya pelapik dalam dan luar.

7. Jangan tambahkan teg tambahan untuk menerangkan kelas atau id

Jika anda mempunyai pemilih yang menggunakan id sebagai pemilih kunci, sila jangan tambah nama teg tambahan. Oleh kerana ID adalah unik, anda tidak seharusnya mengurangkan kecekapan pemadanan atas sebab yang tidak wujud.

* Tidak Diluluskan - butang#Butang Belakang { }

* Tidak Diluluskan - .menu-kiri #IkonMenu baharu { }

* Disyorkan - #Button belakang { }

* Adalah disyorkan untuk menggunakan - #newMenuIcon { }

8 Cuba pilih kelas yang paling istimewa untuk menyimpan pemilih

Salah satu sebab terbesar untuk mengurangkan kecekapan sistem ialah kami menggunakan kelas label Terlalu banyak pemilih. Dengan menambahkan kelas pada elemen, kita boleh membahagikan kategori kepada kelas kelas, jadi kita tidak perlu membuang masa memadankan terlalu banyak pemilih untuk satu teg.

* Tidak diluluskan - treeitem[mailfolder="true"] > treerow > treecell { }

* Disyorkan - .treecell-mailfolder { }

9 Elakkan keturunan Pemilih

Pemilih turunan ialah pemilih yang paling banyak menggunakan sumber dalam CSS. Ia benar-benar sangat intensif sumber, terutamanya apabila pemilih menggunakan kelas label atau kelas umum. Dalam banyak kes, apa yang kita benar-benar mahukan ialah subpemilih. Melainkan dinyatakan secara eksplisit, penggunaan pemilih keturunan adalah dilarang sama sekali dalam CSS UI.

* Tidak setuju - treehead treerow treecell { }

* Lebih baik, tetapi masih tidak bagus (lihat artikel seterusnya) - treehead > treerow > treecell { }

10 tidak termasuk sub-pemilih dalam kelas

Jangan gunakan sub-pemilih dalam kelas teg. Jika tidak, setiap kemunculan elemen tambahan akan meningkatkan masa padanan.(Terutama apabila pemilih nampaknya mungkin dipadankan)

* Ditamatkan - treehead > treerow > treecell { }

* Disyorkan - .treecell-header { }

11. Beri perhatian kepada penggunaan semua sub-pemilih

Gunakan sub-pemilih dengan berhati-hati. Jika anda boleh memikirkan cara untuk tidak menggunakannya, maka jangan gunakannya. Khususnya, pokok dan menu RDF kerap menggunakan subpemilih, seperti ini.

* Tidak Diluluskan - treeitem[IsImapServer="true"] > treerow > .tree-folderpane-icon { }

Sila ingat bahawa atribut RDF boleh disalin dalam templat! Mengambil kesempatan daripada ini, kita boleh menyalin atribut RDF pada elemen XUL anak yang ingin kita ubah berdasarkan atribut itu.

* Adalah disyorkan untuk menggunakan - .tree-folderpane-icon[IsImapServer="true"] { }