Don't forget the Chrome Dev Summit, starting Monday at 10:00am (Pacific) and streaming live on YouTube. Schedule.

Analisis Kinerja Waktu Proses

Pengguna mengharapkan laman berjalan mulus dan interaktif. Setiap tahap di pipeline piksel menggambarkan peluang kehadiran jank. Pelajari alat dan strategi untuk mengidentifikasi dan memperbaiki masalah umum yang memperlambat kinerja waktu proses.

TL;DR

  • Jangan tulis JavaScript yang memaksa browser menghitung ulang layout. Pisahkan fungsi baca dan tulis dan lakukan fungsi baca terlebih dulu.
  • Hindari CSS yang terlalu rumit. Gunakan CSS yang lebih minim dan sederhanakan pemilih CSS Anda.
  • Hindari layout sebisa mungkin. Pilih CSS yang tidak memicu layout sama sekali.
  • Paint bisa memakan waktu lebih lama dibandingkan aktivitas rendering lainnya. Perhatikan bottleneck pada paint.

JavaScript

Kalkulasi JavaScript, khususnya yang memicu perubahan visual yang berat, bisa menghambat kinerja aplikasi. Jangan biarkan JavaScript yang pengaturan waktunya buruk dan berjalan lama mengganggu interaksi pengguna.

Alat

Buat rekaman Timeline dan cari kejadian Evaluate Script yang dicurigai terlalu lama. Jika menemukannya, Anda bisa mengaktifkan JS Profiler dan merekam ulang untuk mendapatkan informasi lebih detail tentang fungsi JS mana yang tepatnya dipanggil dan berapa lama waktu yang dibutuhkan oleh setiap fungsi tersebut.

Jika melihat ada cukup banyak jank di JavaScript, Anda mungkin perlu meningkatkan analisis dan mengumpulkan profil CPU JavaScript. Profil CPU menampilkan tempat waktu eksekusi dihabiskan di dalam fungsi laman Anda. Pelajari cara membuat profil CPU di Percepat Eksekusi JavaScript.

Masalah

Tabel berikut menjelaskan beberapa masalah JavaScript yang umum dan kemungkinan solusinya:

Masalah Contoh Solusi
Penangan masukan berat yang memengaruhi respons atau animasi. Pengguliran paralaks sentuh. Biarkan browser menangani sentuhan dan pengguliran, atau mengikat listener seakhir mungkin (lihat Expensive Input Handlers di daftar periksa kinerja waktu proses Paul Lewis).
JavaScript yang waktu eksekusinya buruk akan memengaruhi respons, animasi, dan pemuatan. Pengguna langsung menggulir setelah laman dimuat, setTimeout / setInterval. Optimalkan eksekusi JavaScript: gunakan requestAnimationFrame, sebarkan manipulasi DOM ke berbagai bingkai, gunakan Web Worker.
JavaScript yang berjalan lama memengaruhi respons. Kejadian DOMContentLoaded berhenti karena mendapat pekerjaan berat dari JS. Pindahkan pekerjaan komputasi murni ke Web Worker. Jika Anda memerlukan akses DOM, gunakan requestAnimationFrame (lihat juga Optimalkan Eksekusi JavaScript).
Skrip tidak berharga yang memengaruhi respons atau animasi. Pengumpulan sampah bisa terjadi di mana saja. Kurangi penulisan skrip tidak berharga (lihat Garbage Collection in Animation di daftar periksa kinerja waktu proses dari Paul Lewis).

Gaya

Perubahan gaya itu hal yang berat, terlebih jika perubahan itu memengaruhi lebih dari satu elemen di DOM. Setiap kali Anda menerapkan gaya ke sebuah elemen, browser harus memahami dampaknya pada semua elemen terkait, menghitung ulang layout, dan menggambar ulang.

Panduan Terkait:

Alat

Buat rekaman Timeline. Periksa rekaman untuk mengetahui adanya kejadian Recalculate Style yang besar (ditampilkan dalam warna ungu).

Klik sebuah kejadian Recalculate Style untuk menampilkan informasi selengkapnya tentang di panel Details. Jika perubahan gaya memakan waktu lama, artinya ini berdampak buruk bagi kinerja. Jika penghitungan gaya memengaruhi banyak sekali elemen, area ini layak diperbaiki.

Recalculate style yang panjang

Untuk mengurangi dampak kejadian Recalculate Style:

Masalah

Tabel berikut menjelaskan beberapa masalah gaya yang umum dan kemungkinan solusinya:

Masalah Contoh Solusi
Penghitungan gaya yang berat memengaruhi respons atau animasi. Properti CSS apa pun yang mengubah geometri elemen, seperti lebar, tinggi, atau posisinya; browser harus memeriksa semua elemen lain dan mengulangi layout. Hindari CSS yang memicu layout.
Pemilih yang kompleks memengaruhi respons atau animasi. Pemilih tersarang memaksa browser untuk mengetahui semuanya tentang elemen lain, termasuk induk dan anak. Referensikan sebuah elemen di CSS Anda hanya dengan satu kelas.

Panduan Terkait:

Layout

Layout (atau mengubah posisi/geometri di Firefox) adalah proses yang digunakan browser untuk menghitung posisi dan ukuran semua elemen di sebuah laman. Model layout web berarti bahwa satu elemen bisa memengaruhi elemen lain; misalnya, lebar elemen <body> biasanya memengaruhi lebar anaknya dan seterusnya ke atas dan ke bawah pohon. Proses ini bisa sangat memberatkan browser.

Sebagai panduan umum, jika Anda meminta nilai geometris kembali dari DOM sebelum bingkai selesai, Anda akan menemukan "layout sinkron paksa", yang bisa menjadi bottleneck kinerja yang besar jika sering diulang atau dilakukan untuk pohon DOM yang besar.

Panduan Terkait:

Alat

Timeline di Chrome DevTools mengidentifikasi kapan laman menyebabkan layout sinkron paksa. Kejadian Layout ini ditandai dengan bilah merah.

layout sinkron paksa

"Layout thrashing" adalah pengulangan kondisi layout sinkron paksa. Ini terjadi bila JavaScript berulang kali menulis dan membaca DOM, yang memaksa browser menghitung ulang layout berulang kali. Untuk mengidentifikasi layout thrashing, cari pola peringatan beberapa layout sinkron paksa (seperti di tangkapan layar di atas).

Masalah

Tabel berikut menjelaskan beberapa masalah layout yang umum dan kemungkinan solusinya:

Masalah Contoh Solusi
Layout sinkron paksa memengaruhi respons atau animasi. Memaksa browser melakukan layout lebih awal di pipeline piksel, sehingga mengakibatkan pengulangan langkah di proses rendering. Batch pembacaan gaya terlebih dahulu, kemudian lakukan penulisan (lihat juga Hindari layout besar dan kompleks serta layout thrashing).
Layout trashing memengaruhi respons atau animasi. Loop yang menempatkan browser ke dalam siklus baca-tulis-baca-tulis, yang memaksa browser menghitung ulang berulang kali. Secara otomatis batch operasi baca-tulis menggunakan pustaka FastDom.

Paint dan composite

Paint adalah proses pengisian piksel. Ini sering kali menjadi bagian yang paling memakan sumber daya di rendering. Jika melihat laman tersendat, kemungkinan Anda mengalami masalah paint.

Komposisi adalah tempat bagian yang digambar pada laman ditempatkan bersama untuk ditampilkan di layar. Sebagian besar, jika Anda tetap berpegang pada properti compositor saja dan sekaligus menghindari paint, Anda seharusnya akan melihat peningkatan kinerja yang besar, namun Anda perlu mewaspadai hitungan layer yang berlebih (lihat juga Berpeganglah pada properti compositor-saja dan kelola jumlah layer).

Alat

Ingin mengetahui berapa lama waktu yang dibutuhkan untuk menggambar dan berapa sering penggambaran terjadi? Aktifkan Paint profiler di panel Timeline lalu buat rekaman. Jika sebagian besar waktu rendering dihabiskan untuk menggambar, berarti Anda memiliki masalah paint.

Waktu menggambar yang panjang dalam rekaman timeline

Periksa menu rendering settings untuk konfigurasi lebih jauh yang bisa membantu mendiagnosis masalah paint.

Masalah

Tabel berikut menjelaskan beberapa masalah paint dan komposit dan solusinya:

Masalah Contoh Solusi
Paint yang bertubi-tubi memengaruhi respons atau animasi. Area paint yang besar atau paint yang berat memengaruhi respons atau animasi. Hindari paint, promosikan elemen yang bergerak ke layernya sendiri, gunakan transforms dan opacity (lihat Sederhanakan kompleksitas paint dan kurangi area paint).
Ledakan layer memengaruhi animasi. Promosi berlebihan untuk terlalu banyak elemen dengan translateZ(0) sangat memengaruhi kinerja animasi. Jangan terlalu sering mempromosikan ke layer dan hanya bila Anda mengetahui bahwa hal itu menawarkan peningkatan yang nyata (lihat Berpeganglah pada properti compositor-saja dan kelola jumlah layer).