Panel Performance menandai setiap tugas yang berjalan lama dengan segitiga merah di sudut kanan atas dan peringatan di tab Summary, untuk menunjukkan pekerjaan di thread utama yang memerlukan waktu lama untuk dijalankan dan performanya lambat:
Dalam rekaman performa Anda, beberapa tugas yang berjalan lama ini mungkin berupa peristiwa Recalculate Style. Peristiwa ReCalculate Style melacak waktu yang diperlukan browser untuk melakukan hal berikut:
- Lakukan iterasi melalui elemen DOM di halaman, untuk menemukan semua aturan gaya CSS yang cocok dengan elemen yang diberikan.
- Hitung gaya aktual setiap elemen, berdasarkan aturan gaya CSS yang cocok.
Gaya CSS perlu dihitung ulang setiap kali pemberlakuan aturan CSS mungkin telah berubah, seperti ketika:
- Elemen ditambahkan ke atau dihapus dari DOM.
- Atribut elemen berubah, seperti nilai atribut class atau ID.
- Pengguna membuat input, seperti gerakan mouse atau perubahan fokus elemen, yang dapat memengaruhi aturan
:hover.
Jika menemukan peristiwa Hitung Ulang Gaya yang berjalan lama, Anda dapat menggunakan tab Statistik Pemilih untuk memahami pemilih CSS mana yang memerlukan waktu paling banyak dan memperlambat performa.
Tab Statistik Pemilih menyediakan statistik tentang pemilih aturan CSS yang terlibat dalam satu atau beberapa peristiwa Hitung Ulang Gaya dalam rekaman performa.
Merekam trace performa dengan Statistik Pemilih yang diaktifkan
Untuk melihat statistik pemilih aturan CSS Anda selama peristiwa Recalculate Style yang berjalan lama, catat pelacakan performa dengan mengaktifkan setelan pengambilan Statistik Pemilih.
Untuk merekam trace performa dengan statistik pemilih:
Buka halaman web, misalnya, halaman demo Galeri Foto.
Buka DevTools dan buka panel Performance.
Di panel Performa, klik tombol setelan Setelan pengambilan dan centang kotak_centang Aktifkan statistik pemilih CSS.
Klik radio_button_checked Rekam, jalankan skenario yang ingin Anda tingkatkan, lalu klik radio_button_checked Hentikan.
Kemudian, lihat statistik pemilih CSS, seperti yang dijelaskan di bagian berikutnya.
Melihat statistik pemilih aturan CSS untuk satu peristiwa
Untuk melihat statistik pemilih aturan CSS yang terlibat dalam satu peristiwa Recalculate Style:
Catat trace performa dengan Statistik Pemilih yang diaktifkan.
Temukan peristiwa ReCalculate Style di rekaman performamu, lalu klik peristiwa tersebut.
Di bagian bawah panel Performa, buka tab Statistik Pemilih.
Tabel pemilih CSS di tab Statistik Pemilih
Tab Statistik Pemilih berisi tabel pemilih CSS. Tabel menampilkan informasi berikut untuk setiap pemilih CSS:
| Column | Deskripsi |
|---|---|
| Berlalu (md) | Jumlah waktu yang dihabiskan browser untuk mencocokkan pemilih CSS ini. Waktu ini diberikan dalam milidetik (md), di mana 1 md adalah 1/1000 detik. |
| Upaya Pencocokan | Jumlah elemen yang coba dicocokkan oleh mesin browser dengan pemilih CSS ini. |
| Jumlah Kecocokan | Jumlah elemen yang cocok dengan mesin browser dengan pemilih CSS ini. |
| % ketidakcocokan jalur lambat | Rasio elemen yang tidak cocok dengan pemilih CSS ini, dengan elemen yang coba dicocokkan oleh mesin browser, dan yang mengharuskan mesin browser menggunakan kode yang kurang dioptimalkan untuk mencocokkan. |
| Pemilih | Pemilih CSS yang cocok. |
| Style Sheet | Style sheet CSS yang berisi pemilih CSS. |
Setelah selesai, di panel Performa, buka setelan Setelan pengambilan dan hapus centang pada kotak centang Aktifkan statistik pemilih CSS.
Melihat statistik pemilih aturan CSS untuk beberapa peristiwa
Untuk melihat statistik gabungan pemilih aturan CSS yang terlibat dalam beberapa peristiwa Recalculated Style, salin beberapa tabel Selector Stats ke spreadsheet, sebagai berikut:
Catat trace performa dengan Statistik Pemilih yang diaktifkan.
Temukan peristiwa ReCalculate Style pertama yang Anda minati, lalu klik peristiwa tersebut.
Di bagian bawah panel Performa, buka tab Statistik Pemilih.
Klik kanan tabel statistik pemilih, lalu pilih Salin tabel.
Tempelkan tabel ke dalam spreadsheet, seperti Google Spreadsheet.
Ulangi langkah sebelumnya dengan peristiwa RePenghitung Gaya lain yang Anda minati.
Setelah selesai, di panel Performa, buka setelan Setelan pengambilan dan hapus centang pada kotak centang Aktifkan statistik pemilih CSS.
Melihat statistik pemilih aturan CSS gabungan untuk rekaman lengkap
Untuk melihat statistik gabungan pemilih aturan CSS yang terlibat dalam seluruh pencatatan performa:
Catat trace performa dengan Statistik Pemilih yang diaktifkan.
Klik area kosong pada diagram api untuk membatalkan pilihan peristiwa yang mungkin dipilih.
Pilih seluruh rentang perekaman. Untuk melakukannya, klik dua kali diagram CPU di bagian atas panel Performance.
Di bagian bawah panel Performa, buka tab Statistik Pemilih. Anda akan melihat baris baru di bagian atas dengan data total untuk semua pemilih.
Setelah selesai, di panel Performa, buka setelan Setelan pengambilan dan hapus centang pada kotak centang Aktifkan statistik pemilih CSS.
Menganalisis statistik pemilih CSS
Untuk mengurutkan data di tabel Statistik Pemilih dalam urutan menaik atau menurun, klik header kolom. Misalnya, untuk melihat pemilih CSS mana yang paling banyak memakan waktu, klik header kolom Elapsed (ms).
Untuk mencoba meningkatkan performa halaman web Anda, fokuslah pada pemilih CSS yang:
- Butuh waktu lama untuk menghitung (nilai Elapsed (ms) tinggi).
- Browser yang coba mencocokkannya berkali-kali (nilai Match Trys yang tinggi).
- Browser tidak benar-benar cocok dengan banyak elemen (nilai Jumlah Pencocokan rendah dibandingkan dengan nilai Upaya Pencocokan).
- Yang memiliki persentase ketidakcocokan jalur lambat yang tinggi.
Misalnya, dalam screenshot sebelumnya:
- Pemilih CSS pertama (
html body .ps[tooltip...) paling sering diperlukan. - Mesin browser telah mencoba mencocokkan pemilih CSS ini 1.104 kali, tetapi tidak cocok dengan elemen apa pun.
Oleh karena itu, pemilih CSS ini adalah kandidat pertama yang mencoba meningkatkan kualitasnya.
Coba ubah pemilih CSS Anda agar memerlukan lebih sedikit waktu untuk menghitung dan mencocokkan lebih sedikit elemen di halaman. Cara meningkatkan kualitas pemilih CSS bergantung pada kasus penggunaan Anda.
Ulangi langkah-langkah dalam tutorial ini untuk mengonfirmasi bahwa perubahan yang Anda lakukan membantu mengurangi durasi peristiwa Recalculate Style, di kolom Elapsed (ms).