Kebenaran tentang kinerja pemilih CSS

Ya ampun, biarkan saja Patrick Brosset untuk membicarakan kinerja CSS dengan cara yang paling mudah didekati dan praktis. Bukan berarti CSS selalu apa yang meningkatkan kecepatan, atau bahkan hasil yang paling rendah dalam hal meningkatkan kinerja.

Tapi if Anda sedang mencari keuntungan di sisi CSS, Patrick memiliki cara yang bagus untuk mengendus penyeleksi termahal Anda menggunakan Edge DevTools:

• Buka DevTools.
• Buka Tab Performa.
• Pastikan Anda mengaktifkan opsi "Aktifkan instrumentasi rendering lanjutan". Ini membuat saya tersandung dalam prosesnya.
• Rekam beban halaman.
• Buka tab "Bottom-Up" di laporan.
• Lihat ukuran gaya yang dihitung ulang.

Dari sini, klik salah satu peristiwa Gaya yang Dihitung Ulang di tampilan air terjun Utama dan Anda akan mendapatkan tab "Statistik Pemilih" yang baru. Lihatlah semua kebaikan yang lengket itu!

Sekarang Anda melihat semua pemilih yang diproses dan mereka dapat diurutkan berdasarkan berapa lama waktu yang dibutuhkan, berapa kali pencocokannya, jumlah upaya pencocokan, dan sesuatu yang disebut "hitungan penolakan cepat" yang aku telah belajar adalah jumlah elemen yang mudah dan cepat dihilangkan dari pencocokan.

Banyak wawasan di sini jika CSS benar-benar hambatan yang perlu diselidiki. Tapi baca posting lengkap Patrick di Blog Microsoft Edge karena dia membahas lebih dalam tentang mengapa dan bagaimana, dan membahas seluruh studi kasus.

Tautan Langsung →

• Konten Bertenaga SEO & Distribusi PR. Dapatkan Amplifikasi Hari Ini.
• Platoblockchain. Intelijen Metaverse Web3. Pengetahuan Diperkuat. Akses Di Sini.
• Sumber: https://css-tricks.com/the-truth-about-css-selector-performance/