Foto oleh Jantine Durnbos di UnsplashIni sama sekali bukan kritik dari rekan kerja, tetapi hanya daftar singkat hal-hal penting yang saya sendiri telah pelajari tentang CSS baru-baru ini.Bukan rahasia lagi bahwa banyak pengembang tampaknya tidak memikirkan CSS. Ini mudah dilihat dari diskusi di Internet dan dalam percakapan dengan teman dan kolega. Namun demikian, kami mendapatkan banyak pengetahuan secara tepat dari rekan-rekan, dan kadang-kadang saya mengerti bahwa tidak ada yang memberi tahu saya tentang beberapa nuansa CSS yang penting, karena orang-orang tidak menghabiskan waktu mempelajari topik ini.
Untuk mengatasinya, saya melakukan riset dan membuat daftar pendek konsep yang menurut saya menarik dan bermanfaat untuk pemahaman dan penulisan CSS yang lebih baik.
Daftar ini jelas tidak lengkap. Ini hanya berisi hal-hal baru yang saya pelajari dalam beberapa hari terakhir dan apa yang ingin saya bagikan, tiba-tiba itu akan membantu orang lain.Terminologi
Seperti halnya bahasa pemrograman, istilah-istilah tertentu digunakan untuk menggambarkan konsep. Menjadi bahasa pemrograman, CSS tidak berbeda, jadi penting untuk mempelajari beberapa terminologi untuk menyederhanakan komunikasi dan hanya untuk pengembangan pribadi.
Combendator Keturunan
Pernahkah Anda melihat celah antara penyeleksi dalam gaya Anda? Bahkan, itu memiliki nama, itu adalah kombinator keturunan.
Combendator KeturunanLayout, rendering, dan komposisi
Istilah-istilah ini terkait dengan rendering di browser, tetapi mereka penting karena beberapa properti CSS mempengaruhi berbagai langkah dari pipa rendering.
1. Tata Letak
Langkah tata letak adalah perhitungan berapa banyak ruang yang ditempati elemen pada layar. Mengubah properti 'tata letak' di CSS (misalnya, lebar, tinggi) berarti bahwa browser harus memeriksa semua elemen lain dan menggambar ulang halaman, yaitu mengecat ulang area yang terkena dampak dan tumpang tindih.
2. Menggambar (melukis)
Proses ini mengisi piksel semua bagian visual elemen (warna, batas, dll.). Elemen biasanya digambar pada beberapa lapisan.
Mengubah properti 'paint' tidak mempengaruhi tata letak, jadi browser melewatkan langkah tata letak, tetapi tetap melakukan rendering.
Render seringkali membutuhkan waktu paling lama saat rendering.
3. Komposisi (komposit)
Komposisi adalah langkah di mana browser harus menggambar lapisan dalam urutan yang benar. Karena beberapa elemen mungkin tumpang tindih, pada titik ini, browser memeriksa apakah elemen ditampilkan dalam urutan itu.
Jika Anda mengubah properti CSS, yang tidak memengaruhi tata letak atau rendering, browser hanya perlu melakukan komposisi.
Untuk informasi lebih lanjut tentang proses mana yang memicu berbagai properti CSS, lihat
Pemicu CSS .
Kinerja CSS
Selektor keturunan bisa mahal
Bergantung pada ukuran aplikasi Anda, hanya menggunakan pemilih keturunan tanpa instruksi spesifik dapat menekan sumber daya dengan keras. Browser akan memeriksa kepatuhan dengan setiap elemen keturunan, karena hubungannya tidak terbatas pada elemen induk dan anak.
Sebagai contoh:
Contoh Pemilih KeturunanPeramban harus mengevaluasi semua tautan di laman sebelum beralih ke
#nav bagian
#nav kami.
Cara yang lebih efisien adalah menambahkan pemilih
.navigation-link spesifik ke setiap tautan
<a> di dalam bagian
#nav .
Browser membaca pemilih dari kanan ke kiri
Tampaknya saya seharusnya mengetahui hal penting ini sebelumnya, tetapi saya tidak tahu ... Saat mem-parsing CSS, browser mem-parsing pemilih dari kanan ke kiri.
Perhatikan contoh berikut:
Peramban membaca dari kanan ke kiriLangkah-langkah:
- cocokkan semua
<a> di halaman;
- temukan semua
<a> terkandung dalam <li> ;
- ambil korek api dan persempit ke yang ada di
<ul> ;
- akhirnya, filter pilihan di atas dengan yang ada di elemen dengan kelas
.container .
Melihat langkah-langkah ini, kami melihat bahwa semakin spesifik pemilih yang tepat, semakin efisien peramban dapat memfilter dan menerapkan properti CSS.
Untuk meningkatkan kinerja contoh di atas, kita bisa mengganti
.container ul li a dengan menambahkan sesuatu seperti
.container-link-style pada tag
<a> itu sendiri.
Jika memungkinkan, jangan ubah tata letak.
Perubahan pada beberapa properti CSS perlu memperbarui seluruh tata letak.
Misalnya, properti geometris
width ,
height ,
top ,
left memerlukan perhitungan ulang tata letak dan memperbarui pohon rendering.
Jika Anda mengubah properti ini pada banyak elemen, akan butuh waktu lama untuk menghitung dan memperbarui posisi / ukurannya.
Hati-hati dengan rendering kompleksitas
Beberapa properti CSS (seperti blurring) lebih mahal daripada yang lain dalam hal rendering. Pikirkan cara yang lebih efektif untuk mencapai hasil yang sama.
Properti CSS Mahal
Beberapa properti CSS lebih mahal daripada yang lain. Ini berarti rendering lebih lama.
Beberapa properti mahal:
border-radiusbox-shadowfilter:nth-childposition: fixed
Ini tidak berarti bahwa mereka tidak dapat digunakan sama sekali, tetapi Anda perlu memahami bahwa jika suatu elemen menggunakan beberapa properti ini dan diberikan ratusan kali, itu akan mempengaruhi kinerja.
Memesan
Urutan penting
Mari kita lihat CSS seperti itu:
Dan kemudian lihat kode HTML:
Urutan pemilih dalam HTML tidak masalah, tetapi dalam CSS itu tidak penting.
Cara yang baik untuk mengevaluasi kinerja CSS adalah dengan menggunakan alat pengembang di browser.
Di Chrome atau Firefox, Anda dapat membuka alat pengembang, buka tab Performance dan catat apa yang terjadi ketika Anda memuat atau berinteraksi dengan halaman Anda.
Tangkapan layar tab kinerja di ChromeSumber daya
Menjelajahi topik untuk artikel ini, saya menemukan beberapa alat yang sangat menarik, tercantum di bawah ini:
Pemicu CSS adalah situs web yang mencantumkan beberapa fitur CSS dan bagaimana pengaruhnya terhadap kinerja.
Uncss adalah alat untuk menghapus gaya yang tidak digunakan dari CSS.
Css-jelaskan adalah alat kecil yang menjelaskan pemilih CSS.
Fastdom adalah alat baca / tulis batch DOM untuk mempercepat kinerja tata letak.
Itu saja untuk sekarang! Semoga ini masuk akal!