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 memiliki performa lambat:
Dalam rekaman performa Anda, beberapa tugas yang berjalan lama ini mungkin berupa peristiwa ReCalculate Style. Peristiwa Re calculate Style melacak waktu yang diperlukan browser untuk melakukan hal berikut:
- Lakukan iterasi melalui elemen DOM di sebuah halaman, untuk menemukan semua aturan gaya CSS yang cocok dengan elemen tertentu.
- Hitung setiap gaya aktual setiap elemen, berdasarkan aturan gaya CSS yang cocok.
Gaya CSS harus dihitung ulang setiap kali pemberlakuan aturan CSS mungkin telah berubah, seperti saat:
- Elemen ditambahkan ke atau dihapus dari DOM.
- Atribut elemen berubah, seperti nilai class atau atribut ID.
- Pengguna membuat input, seperti gerakan mouse atau perubahan fokus elemen, yang dapat memengaruhi aturan
:hover.
Peristiwa Recalculated Style yang berjalan lama dapat bermasalah bagi performa, dan dapat menjadi penyebab keterlambatan presentasi yang lama yang memengaruhi Interaction to Next Paint (INP) situs Anda. Jika menemukan peristiwa Recalculate Style yang berjalan lama, Anda dapat menggunakan tab Selector Stats untuk memahami pemilih CSS mana yang paling banyak menghabiskan waktu dan memperlambat performa.
Tab Selector Stats memberikan statistik tentang pemilih aturan CSS yang terlibat dalam satu atau beberapa peristiwa ReCalculate Style dalam rekaman performa.
Merekam aktivitas performa dengan Selector Stats diaktifkan
Untuk melihat statistik pemilih aturan CSS selama peristiwa Recalculate Style yang berjalan lama, rekam pelacakan performa dengan mengaktifkan setelan perekaman Selector Stats.
Untuk merekam trace performa dengan statistik pemilih:
Buka halaman web, misalnya, halaman demo Galeri Foto.
Buka DevTools dan buka panel Performa.
Di panel Performa, klik tombol setelan Ambil setelan dan centang kotak centang Aktifkan statistik pemilih CSS.
Klik radio_button_checked Record, jalankan skenario yang ingin Anda perbaiki, lalu klik radio_button_checked Stop.
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:
Merekam aktivitas performa dengan Selector Stats diaktifkan.
Temukan peristiwa Recompute Style dalam rekaman performa Anda, lalu klik peristiwa tersebut.
Di bagian bawah panel Performance, buka tab Selector Stats.
Tabel pemilih CSS di tab Selector Stats
Tab Statistik Pemilih berisi tabel pemilih CSS. Tabel menampilkan informasi berikut untuk setiap pemilih CSS:
| Kolom | 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. |
| Percobaan Kecocokan | 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, terhadap elemen yang coba dicocokkan oleh mesin browser, dan yang mengharuskan mesin browser menggunakan kode yang kurang dioptimalkan agar cocok. |
| 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 Hitung Ulang Gaya, salin beberapa tabel Statistik Pemilih ke dalam spreadsheet, sebagai berikut:
Merekam aktivitas performa dengan Selector Stats diaktifkan.
Temukan peristiwa Recalculated Style pertama yang Anda minati, lalu klik peristiwa tersebut.
Di bagian bawah panel Performance, buka tab Selector Stats.
Klik kanan tabel statistik pemilih dan pilih Salin tabel.
Tempelkan tabel ke dalam spreadsheet, seperti Google Spreadsheet.
Ulangi langkah sebelumnya dengan peristiwa Recalculated Style 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 rekaman performa:
Merekam aktivitas performa dengan Selector Stats diaktifkan.
Klik area kosong pada flame chart untuk membatalkan pilihan peristiwa yang mungkin dipilih.
Memilih seluruh rentang perekaman. Untuk melakukannya, klik dua kali diagram CPU di bagian atas panel Performance.
Di bagian bawah panel Performance, buka tab Selector Stats. 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 menghabiskan waktu, klik header kolom Elapsed (ms).
Untuk mencoba meningkatkan performa halaman web Anda, fokuslah pada pemilih CSS yang:
- Penghitungan waktu yang lama (nilai Elapsed (md) yang tinggi).
- Browser yang mencoba mencocokkan beberapa kali (nilai Upaya Kecocokan yang tinggi).
- Yang sebenarnya tidak cocok dengan banyak elemen di browser (nilai Jumlah Kecocokan rendah dibandingkan dengan nilai Upaya Kecocokan).
- Yang memiliki persentase ketidakcocokan jalur lambat yang tinggi.
Misalnya, dalam screenshot sebelumnya:
- Pemilih CSS pertama (
html body .ps[tooltip...) memerlukan waktu paling banyak. - Mesin browser mencoba mencocokkan pemilih CSS ini sebanyak 1.104 kali, tetapi tidak cocok dengan elemen apa pun.
Oleh karena itu, pemilih CSS ini adalah kandidat pertama yang dicoba untuk ditingkatkan.
Coba ubah pemilih CSS Anda sehingga mengurangi waktu penghitungan dan mencocokkan elemen yang lebih sedikit di halaman. Cara meningkatkan pemilih CSS bergantung pada kasus penggunaan tertentu Anda.
Ulangi langkah-langkah dalam tutorial ini untuk mengonfirmasi bahwa perubahan Anda membantu mengurangi durasi peristiwa Recalculated Style, di kolom Elapsed (ms).