Saya akui bahwa saya jarang memikirkan pertanyaan ini... Seberapa efisien CSS yang kita tulis, dan seberapa cepat browser merender?
Inilah yang harus diperhatikan oleh pengembang browser (halaman dimuat lebih cepat, dan pengguna akan lebih bahagia). Mozilla punya artikel: tentang praktik terbaik . Tentu saja Google juga sangat prihatin dengan masalah ini, dan mereka juga punya artikel seperti itu: Optimalkan rendering browser .
Mari kita lihat apa yang paling mereka anjurkan, lalu diskusikan kepraktisannya.
kanan ke kiri
Prinsip penting tentang cara browser membaca pemilih CSS Anda adalah mereka membacanya dari kanan ke kiri. Artinya untuk pemilih seperti ul > li a[title="home"], a[title="home"] akan dibaca terlebih dahulu. Bagian ini biasa disebut dengan "key selector" (apakah bisa disebut dengan "target selector" -_-!) Bagian terakhir dari selector juga merupakan label yang dipilih.
ID adalah yang paling efisien, universal adalah yang paling lambat
Ada empat pemilih target: ID, kelas, tag, dan karakter universal. Mari kita lihat efisiensinya masing-masing:
#navigasi-utama { } /* ID (tercepat) */
body.home #page-wrap {} /* ID */
.navigasi-utama {} /* Kelas */
ul li a.saat ini {} /* Kelas *
ul { } /* Tandai */
ul li a {} /* Tag */
* { } /* Universal (paling lambat) */
#content [title='home'] /* Universal */ Kemudian kita menggabungkan konsep pemilih kanan-ke-kiri dan target, dan kita dapat mengetahui bahwa pemilih berikut tidak efisien:
#main-nav > li {} /* Kelihatannya cepat namun sebenarnya sangat lambat*/
Meskipun ini agak membingungkan... karena ID adalah yang paling efisien, browser dapat dengan cepat menemukan li berdasarkan ID. Namun faktanya tag li dibaca terlebih dahulu.
Jangan memodifikasinya dengan tag
Jangan lakukan ini sampai mati:
ul#navigasi-utama {}
ID bersifat unik sehingga tidak perlu dihias dengan tag sehingga kurang efisien.
Jangan menggunakannya untuk mengubah kelas jika Anda bisa menghindarinya. kelasnya tidak unik, jadi secara teori Anda bisa menggunakannya dalam tag yang berbeda. Jika mau, Anda dapat menggunakan tag untuk mengontrol gaya yang berbeda, jadi Anda mungkin memerlukan modifikasi tag (misalnya: li.first), tetapi hanya sedikit orang yang melakukan ini, jadi jangan lakukan itu.
Tidak ada yang lebih buruk daripada menggunakan pemilih turunan
David Hyatt:
Pemilih turunan adalah pemilih paling mahal di CSS, dan harganya sangat mahal - terutama bila ditempatkan setelah tag dan universal.
Sama seperti hal-hal berikut, ini adalah kanker efisiensi yang mutlak:
html badan ul li a {} }
Lebih efisien jika pemilih gagal dirender daripada pemilih dirender
Saya tidak yakin apakah ada bukti yang lebih baik untuk ini, karena jika Anda memiliki banyak penyeleksi yang tidak dapat ditemukan di lembar gaya CSS, ini mungkin tampak aneh, namun penting untuk dicatat bahwa kanan ke kiri Untuk memparafrasekan pemilih , setelah tidak dapat menemukannya, ia berhenti mencoba. Namun jika ditemukan, perlu upaya lebih untuk menjelaskannya.
Coba pikirkan mengapa Anda menulis pemilih seperti ini
Pikirkan tentang ini:
#navigasi utama di { font-family: Georgia, Serif }
Anda mungkin tidak perlu memulai dengan pemilih (jika Anda hanya ingin mengubah font). Ini mungkin lebih efisien:
#navigasi-utama { font-family: Georgia, Serif }
Kepraktisan
Juga terukir artikel Mozilla yang disebutkan sebelumnya? Sudah sepuluh tahun. Faktanya adalah: komputer lebih lambat dibandingkan sepuluh tahun yang lalu (bukan karena saya salah paham, atau penulis ingin mengatakan bahwa WEB saat ini menjadi semakin kompleks). Saya merasa hal ini sepertinya dianggap lebih serius saat itu. Sepuluh tahun yang lalu, saya adalah seorang pria tampan berusia 21 tahun. Tentu saja, saya tidak berpikir saya akan tahu apa pun tentang CSS di sana. Jadi saya tidak bisa memberi tahu Anda tentang situasi sebelumnya...tapi menurut saya alasan mengapa masalah efisiensi rendering tidak ditanggapi dengan serius adalah karena ini tidak pernah menjadi masalah besar.
Berikut beberapa pendapat saya: Apa pun yang terjadi, hal-hal yang disebutkan di atas masuk akal, dan Anda dapat melakukannya sesuai dengan cara di atas, karena tidak membatasi produksi CSS Anda. Namun Anda tidak perlu terlalu dogmatis. Jika Anda seorang perfeksionis dan belum pernah mempertimbangkan hal itu sebelumnya, inilah saatnya untuk melihat kembali beberapa gaya yang telah Anda tulis sebelumnya untuk melihat apakah masih ada ruang untuk perbaikan. Jika Anda tidak menemukan bahwa situs web Anda jelas-jelas ditampilkan dengan lambat, jangan terlalu memperhatikannya. Berikan perhatian lebih pada hal itu di pekerjaan selanjutnya.
Super cepat dan tidak ada kepraktisan
Kita tahu bahwa ID adalah penyeleksi yang paling efisien. Bila Anda ingin memaksimalkan kecepatan rendering, Anda dapat mengonfigurasi ID untuk setiap tag individual dan kemudian menggunakan ID ini untuk menulis gaya. Itu akan menjadi sangat cepat dan sangat konyol. Hasilnya adalah semantik yang sangat buruk dan sangat sulit dipertahankan. Anda seharusnya tidak melihat ini dilakukan bahkan pada intinya. Saya pikir ini berfungsi sebagai pengingat untuk tidak menyerah pada semantik dan pemeliharaan untuk CSS yang efisien.
Terima kasih kepada Jason Beaudoin karena telah mengirimi saya email tentang ide tersebut. Jika ada yang tahu lebih banyak tentang hal ini, atau jika Anda memiliki tip tambahan yang Anda gunakan dalam nada yang sama, mari kita dengarkan!
Ngomong-ngomong, karena pemilih CSS digunakan oleh banyak pustaka JavaScript, hal-hal yang disebutkan di atas masih berlaku, pemilih ID masih yang tercepat, dan pemilih turunan serta hal serupa lebih lambat.
PS : Mari kita lihat siapa yang berani menggunakan lebih dari N penyeleksi keturunan. . . Ada juga yang keberatan dengan penggunaan ID saya. . . Wah haha. . .