JavaScript sering kali memicu perubahan visual. Terkadang hal itu membuat mereka perubahan langsung melalui manipulasi gaya, dan terkadang melalui penghitungan yang menghasilkan perubahan visual, seperti penelusuran atau pengurutan data. Kurang tepat waktu atau JavaScript yang berjalan lama dapat menjadi penyebab umum masalah kinerja, dan Anda harus berusaha meminimalkan dampaknya sebisa mungkin.
Penghitungan gaya
Mengubah DOM dengan menambah dan menghapus elemen, mengubah atribut, kelas, atau memutar animasi menyebabkan {i>browser<i} menghitung ulang gaya elemen dan, dalam banyak kasus, tata letak sebagian atau seluruh laman. Proses ini disebut penghitungan gaya terkomputasi.
Browser mulai menghitung gaya dengan membuat satu set pemilih yang cocok untuk menentukan class, pemilih semu, dan ID yang berlaku untuk elemen tertentu. Kemudian, ia memproses aturan gaya dari pemilih yang cocok dan mencari tahu gaya akhir apa yang dimiliki elemen.
Waktu penghitungan ulang gaya dan latensi interaksi
Interaction to Next Paint (INP) adalah runtime yang berfokus pada pengguna metrik performa yang menilai responsivitas halaman secara keseluruhan terhadap input pengguna. Latensi interaksi mengukur latensi interaksi dari saat pengguna berinteraksi dengan halaman hingga browser melukiskan {i>frame<i} berikutnya yang menunjukkan pembaruan visual yang sesuai untuk antarmuka pengguna.
Komponen penting dari suatu interaksi adalah waktu yang dibutuhkan untuk {i>frame<i}. Pekerjaan rendering yang dilakukan untuk menyajikan {i>frame<i} berikutnya terdiri dari banyak bagian, termasuk penghitungan gaya laman yang terjadi tepat sebelum tata letak, penggambaran, dan pekerjaan komposisi. Halaman ini berfokus pada biaya penghitungan gaya, tetapi mengurangi bagian dari fase rendering yang terkait dengan interaksi juga mengurangi total latensi rendah, termasuk untuk penghitungan gaya.
Mengurangi kompleksitas pemilih
Menyederhanakan nama pemilih dapat membantu mempercepat gaya halaman Anda pada kalkulasi. Pemilih paling sederhana mereferensikan elemen dalam CSS hanya dengan nama kelas:
.title {
/* styles */
}
Namun, seiring perkembangan proyek, kemungkinan besar diperlukan CSS yang lebih kompleks, dan Anda mungkin mengakhiri dengan pemilih yang terlihat seperti ini:
.box:nth-last-child(-n+1) .title {
/* styles */
}
Untuk menentukan bagaimana gaya ini diterapkan pada laman, browser harus secara efektif
tanyakan "apakah ini elemen dengan class title yang induknya adalah
elemen turunan minus-nth-plus-1 dengan class box?"
Mencari tahu hal ini bisa memakan waktu lama, tergantung pada pemilih yang digunakan sebagai
serta browser yang bersangkutan. Untuk menyederhanakannya, Anda dapat mengubah pemilih
hanya sebagai nama class:
.final-box-title {
/* styles */
}
Nama kelas pengganti ini mungkin tampak canggung, tetapi mereka membuat
pekerjaan menjadi jauh lebih sederhana. Dalam versi sebelumnya, misalnya, agar browser mengetahui
sebuah elemen adalah yang terakhir dari jenisnya, ia harus terlebih
dahulu mengetahui segala sesuatu tentang
elemen lain untuk menentukan apakah ada elemen
yang mengikutinya yang dapat
menjadi nth-last-child. Biaya komputasi ini bisa jauh lebih mahal dibandingkan
mencocokkan pemilih dengan elemen hanya
karena class-nya cocok.
Mengurangi jumlah elemen yang sedang ditata gayanya
Pertimbangan performa lain, dan sering kali lebih penting daripada pemilih kompleksitas, adalah jumlah pekerjaan yang perlu terjadi ketika suatu elemen berubah.
Secara umum, kasus terburuk dari penghitungan gaya elemen komputasi adalah jumlah elemen dikalikan dengan jumlah pemilih, karena browser perlu memeriksa setiap elemen setidaknya sekali terhadap setiap gaya untuk melihat apakah yang cocok.
Penghitungan gaya dapat menargetkan beberapa elemen secara langsung, bukan membuat validasi seluruh halaman. Di {i>browser<i} modern, hal ini cenderung tidak terlalu bermasalah karena {i>browser<i} tidak selalu perlu memeriksa semua elemen yang mungkin dipengaruhi oleh perubahan. Di sisi lain, browser lama tidak selalu dioptimalkan untuk tugas semacam itu. Lokasi sebaiknya kurangi jumlah elemen yang tidak valid.
Mengukur biaya penghitungan ulang gaya
Salah satu cara untuk mengukur biaya penghitungan ulang gaya adalah dengan menggunakan di Chrome DevTools. Lakukan hal berikut untuk memulai:
- Buka DevTools.
- Buka tab Performa.
- Klik Record.
- Berinteraksilah dengan halaman.
Saat berhenti merekam, Anda akan melihat sesuatu seperti gambar berikut:
Strip di bagian atas adalah flame chart miniatur yang juga memetakan frame per kedua. Semakin dekat aktivitas ke bagian bawah strip, semakin cepat {i>frame<i} sedang digambar oleh browser. Jika Anda melihat flame chart menipis di bagian atas dengan bilah merah di atasnya, maka Anda memiliki pekerjaan yang menyebabkan {i>frame<i} yang berjalan lama.
Frame yang berjalan lama selama interaksi seperti scroll lebih bernilai lihat. Jika Anda melihat blok ungu besar, perbesar aktivitas, lalu pilih berlabel ReCalculate Style untuk mendapatkan informasi lebih lanjut tentang perhitungan ulang gaya yang mahal.
Mengklik peristiwa akan menampilkan stack panggilannya. Jika pekerjaan rendering disebabkan oleh interaksi pengguna, fungsi ini memanggil JavaScript yang memicu perubahan gaya. Laporan ini juga menunjukkan jumlah elemen yang dipengaruhi oleh perubahan—lebih dari 900 dalam hal ini—dan berapa lama waktu yang dibutuhkan dalam penghitungan gaya. Anda dapat menggunakan informasi ini untuk mulai mencoba menemukan perbaikan di kode Anda.
Menggunakan Blok, Elemen, Pengubah
Pendekatan terhadap coding seperti BEM (Block, Element, Modifier) memasukkan manfaat performa pencocokan pemilih. BEM merekomendasikan agar semuanya memiliki satu class, dan, di mana Anda membutuhkan hierarki, hierarki tersebut juga akan disertakan ke dalam nama class:
.list {
/* Styles */
}
.list__list-item {
/* Styles */
}
Jika Anda memerlukan pengubah, seperti dalam contoh turunan terakhir, Anda dapat menambahkan pengubah seperti ini:
.list__list-item--last-child {
/* Styles */
}
BEM adalah titik awal yang baik untuk mengatur CSS Anda, baik dari struktur perspektif yang sama, dan karena penyederhanaan pencarian gaya.
Jika Anda tidak menyukai BEM, ada cara lain untuk mendekati CSS Anda, tetapi Anda harus menilai kinerja dan ergonominya sebelum Anda memulai.
Resource
Banner besar dari Unsplash, oleh Markus Spiske.