JavaScript sering kali menjadi pemicu perubahan visual. Terkadang, JavaScript membuat perubahan tersebut secara langsung melalui manipulasi gaya, dan terkadang melalui perhitungan yang menghasilkan perubahan visual, seperti menelusuri atau mengurutkan data. JavaScript yang tidak tepat waktu atau berjalan lama dapat menjadi penyebab umum masalah performa, dan Anda harus berupaya meminimalkan dampaknya jika memungkinkan.
Perhitungan gaya
Mengubah DOM dengan menambahkan dan menghapus elemen, mengubah atribut, class, atau memutar animasi akan menyebabkan browser menghitung ulang gaya elemen dan, dalam banyak kasus, tata letak sebagian atau seluruh halaman. Proses ini disebut perhitungan gaya.
Browser mulai menghitung gaya dengan membuat kumpulan pemilih yang cocok untuk menentukan class, pseudo-selector, dan ID mana yang berlaku untuk elemen tertentu. Kemudian, browser memproses aturan gaya dari pemilih yang cocok dan menentukan gaya akhir yang dimiliki elemen.
Peran penghitungan ulang gaya dalam latensi interaksi
Interaction to Next Paint (INP) adalah metrik performa runtime yang berpusat pada pengguna yang menilai responsivitas keseluruhan halaman terhadap input pengguna. Metrik ini mengukur latensi interaksi sejak pengguna berinteraksi dengan halaman hingga browser merender frame berikutnya yang menampilkan pembaruan visual yang sesuai ke antarmuka pengguna.
Komponen penting dari interaksi adalah waktu yang diperlukan untuk merender frame berikutnya. Pekerjaan rendering yang dilakukan untuk menampilkan frame berikutnya terdiri dari banyak bagian, termasuk perhitungan gaya halaman yang terjadi tepat sebelum pekerjaan tata letak, rendering, dan compositing. Panduan ini berfokus pada biaya perhitungan gaya, tetapi mengurangi bagian mana pun dari durasi rendering total interaksi juga akan mengurangi latensi totalnya.
Mengurangi kompleksitas pemilih
Menyederhanakan pemilih CSS dapat membantu mempercepat perhitungan gaya halaman. Pemilih paling sederhana mereferensikan elemen di CSS hanya dengan nama class:
.title {
/* styles */
}
Namun, seiring pertumbuhan project, project tersebut mungkin memerlukan CSS yang lebih kompleks, dan Anda mungkin akan mendapatkan pemilih yang terlihat seperti ini:
.box:nth-last-child(-n+1) .title {
/* styles */
}
Untuk menentukan cara penerapan gaya ini ke halaman, browser harus secara efektif bertanya "apakah ini elemen dengan class title dengan induk class box yang merupakan turunan ke-n-minus-1 dari elemen induknya? Browser mungkin memerlukan waktu untuk mengetahuinya. Untuk menyederhanakannya, Anda dapat mengubah pemilih menjadi nama class yang lebih spesifik:
.final-box-title {
/* styles */
}
Nama class pengganti ini mungkin terlihat canggung, tetapi membuat pekerjaan browser menjadi jauh lebih sederhana. Misalnya, pada versi sebelumnya, agar browser mengetahui bahwa suatu elemen adalah yang terakhir dari jenisnya, browser harus terlebih dahulu mengetahui semua hal tentang semua elemen lainnya untuk menentukan apakah ada elemen yang muncul setelahnya yang dapat menjadi nth-last-child. Hal ini dapat jauh lebih mahal secara komputasi daripada mencocokkan pemilih dengan elemen hanya berdasarkan nama class-nya.
Mengurangi jumlah elemen yang diberi gaya
Pertimbangan performa lainnya—dan sering kali lebih penting daripada kompleksitas pemilih—adalah jumlah pekerjaan yang perlu dilakukan saat elemen berubah.
Secara umum, biaya kasus terburuk untuk menghitung gaya elemen komputasi adalah jumlah elemen dikalikan dengan jumlah pemilih, karena browser perlu memeriksa setiap elemen setidaknya sekali terhadap setiap gaya untuk melihat apakah elemen tersebut cocok.
Perhitungan gaya dapat menargetkan beberapa elemen secara langsung, bukan membatalkan seluruh halaman. Di browser modern, hal ini cenderung tidak terlalu menjadi masalah karena browser tidak selalu perlu memeriksa semua elemen yang mungkin terpengaruh oleh perubahan. Di sisi lain, browser lama tidak selalu dioptimalkan untuk tugas tersebut. Jika memungkinkan, Anda harus mengurangi jumlah elemen yang dibatalkan.
Mengukur biaya penghitungan ulang gaya
Ada beberapa cara untuk mengukur biaya penghitungan ulang gaya di browser. Setiap cara bergantung pada apakah Anda ingin mengukurnya di browser di lingkungan pengembangan, atau jika Anda ingin mengukur berapa lama proses ini berlangsung untuk pengguna sebenarnya di situs Anda.
Mengukur biaya penghitungan ulang gaya di Chrome DevTools
Salah satu cara untuk mengukur biaya penghitungan ulang gaya adalah dengan menggunakan panel performa di Chrome DevTools. Lakukan hal berikut untuk memulai:
- Buka DevTools.
- Buka tab Performance.
- Centang kotak Selector stats (opsional).
- Klik Record.
- Berinteraksi dengan halaman.
Saat Anda berhenti merekam, Anda akan melihat sesuatu seperti gambar berikut:
Strip di bagian atas adalah diagram alir mini yang juga memplot frame per detik. Semakin dekat aktivitas ke bagian bawah strip, semakin cepat frame dirender oleh browser. Jika Anda melihat diagram alir merata di bagian atas dengan batang merah di atasnya, berarti Anda memiliki pekerjaan yang menyebabkan frame berjalan lama.
Frame yang berjalan lama selama interaksi seperti scroll perlu diperhatikan lebih cermat. Jika Anda melihat blok ungu besar, perbesar aktivitas dan pilih pekerjaan apa pun yang diberi label Recalculate Style untuk mendapatkan informasi selengkapnya tentang pekerjaan penghitungan ulang gaya yang berpotensi mahal.
Mengklik peristiwa akan menampilkan stack panggilannya. Jika pekerjaan rendering disebabkan oleh interaksi pengguna, pekerjaan tersebut akan memanggil JavaScript yang memicu perubahan gaya. Hal ini juga menunjukkan jumlah elemen yang terpengaruh oleh perubahan—lebih dari 900 elemen dalam kasus ini—dan berapa lama perhitungan gaya berlangsung. Anda dapat menggunakan informasi ini untuk mulai mencoba menemukan perbaikan dalam kode Anda.
Jika Anda mencentang kotak centang Selector stats di setelan Performance Panel sebelum melakukan pelacakan, panel bawah dalam pelacakan akan memiliki tab tambahan dengan nama yang sama.
Panel ini memberikan data yang berguna tentang biaya relatif setiap pemilih, sehingga Anda dapat mengidentifikasi pemilih CSS yang mahal.
Biarkan aktif saat Anda perlu memeriksa performa peristiwa Recalculate Style dan informasi rendering lainnya.Untuk mengetahui informasi selengkapnya, lihat dokumentasi Statistik Pemilih CSS.
Mengukur biaya penghitungan ulang gaya untuk pengguna sebenarnya
Jika Anda ingin tahu berapa lama penghitungan ulang gaya terjadi untuk
pengguna sebenarnya di situs Anda, Long Animation Frames API
akan memberi Anda alat yang diperlukan untuk melakukannya. Data dari API ini ditambahkan ke library JavaScript,
termasuk waktu penghitungan ulang gaya.web-vitals
Jika Anda menduga bahwa penundaan presentasi interaksi adalah kontributor utama INP halaman, Anda harus mengetahui berapa banyak waktu yang dihabiskan untuk menghitung ulang gaya di halaman. Untuk mengetahui informasi selengkapnya, baca cara mengukur waktu penghitungan ulang gaya di lapangan.