Pelajari cara menggunakan DevTools untuk mendiagnosis layout sinkron paksa.
Dalam panduan ini, Anda akan mempelajari cara men-debug layout sinkron paksa dengan
mengidentifikasi dan memperbaiki masalah di demo langsung. Demo menggerakkan gambar
menggunakan requestAnimationFrame(), yang merupakan pendekatan yang disarankan untuk
animasi berbasis bingkai. Akan tetapi, cukup banyak jank atau sendatan di
animasi. Sasaran Anda adalah mengidentifikasi sebab jank dan memperbaiki masalah sehingga
demo berjalan mulus di 60 FPS.
Mengumpulkan data
Pertama, Anda perlu merekam data agar bisa memahami dengan persis apa yang terjadi saat laman dijalankan.
- Buka demo.
- Buka panel Timeline DevTools.
- Aktifkan opsi JS Profile. Saat menganalisis bagan api nanti, opsi ini akan memungkinkan Anda melihat secara persis fungsi mana yang dipanggil.
- Klik Start di laman untuk memulai animasi.
- Klik tombol Record pada panel Timeline untuk memulai rekaman Timeline.
- Tunggu dua detik.
- Klik tombol Record lagi untuk menghentikan rekaman.
Setelah selesai merekam, Anda seharusnya melihat sesuatu seperti berikut di panel Timeline.
Identifikasi masalah
Sekarang setelah memiliki data, waktunya untuk memahaminya.
Sekilas, Anda bisa melihat di panel Summary di rekaman Timeline bahwa browser menghabiskan sebagian besar waktunya pada rendering. Secara umum, jika Anda bisa mengoptimalkan operasi layout laman, Anda mungkin bisa mengurangi waktu yang dihabiskan untuk rendering.
Sekarang perhatikan bilah merah muda tepat di bawah panel Overview. Ini menggambarkan bingkai. Arahkan kursor ke atasnya untuk melihat informasi selengkapnya tentang bingkai.
Bingkai memakan waktu lama untuk diselesaikan. Agar animasi berjalan mulus, sebaiknya targetkan 60 FPS.
Sekarang waktunya mendiagnosis apa yang sebenarnya salah. Dengan menggunakan mouse Anda, perbesar tumpukan panggilan.
Bagian atas tumpukan adalah kejadian Animation Frame Fired. Fungsi yang Anda
teruskan ke requestAnimationFrame() dipanggil setiap kali kejadian ini dipicu.
Di bawah Animation Frame Fired, Anda akan melihat Function Call, dan di bawahnya, Anda
melihat update. Anda kini mengetahui bahwa metode yang disebut sebagai update() adalah callback untuk
requestAnimationFrame().
Sekarang, fokuskan perhatian Anda di kejadian ungu kecil di bawah kejadian update.
Bagian atas beberapa kejadian ini berwarna merah. Ini adalah tanda peringatan.
Arahkan kursor ke atas kejadian ini, maka Anda akan melihat bahwa DevTools memperingatkan Anda bahwa
laman Anda mungkin menjadi korban meng-ubah posisi/geometri paksa. Perubahan posisi/geometri paksa adalah nama lain dari
layout sinkron paksa.
Sekarang waktu memeriksa fungsi yang menyebabkan semua
layout sinkron paksa. Klik salah satu kejadian layout untuk memilihnya.
Di panel Summary, Anda sekarang seharusnya melihat detail tentang kejadian ini. Klik tautan
di bawah Layout Forced (update @ forcedsync.html:457) untuk masuk ke
definisi fungsi.
Anda sekarang seharusnya melihat definisi fungsi di panel Sources.
Fungsi update() adalah penangan callback untuk
requestAnimationFrame(). Penangan menghitung setiap properti left gambar
berdasarkan nilai offsetTop gambar. Ini memaksa browser melakukan
layout baru segera untuk memastikan tersedianya nilai yang benar.
Pemaksaan layout pada setiap bingkai animasi adalah penyebab tersendatnya
animasi pada laman.
Sekarang setelah mengidentifikasi masalah, Anda bisa mencoba memperbaikinya di DevTools secara langsung.
Terapkan perbaikan dalam DevTools
Skrip ini disematkan di HTML, sehingga Anda tidak bisa mengeditnya melalui panel Sources
(akan tetapi, skrip di *.js bisa diedit di panel Sources).
Akan tetapi, untuk memeriksa perubahan, Anda bisa mendefinisikan ulang fungsi di Console.
Salin dan tempelkan definisi fungsi dari file HTML ke dalam Console
DevTools. Hapus pernyataan yang menggunakan offsetTop dan hapus komentar pernyataan
di bawahnya. Tekan Enter bila selesai.
Mulai ulang animasi. Anda memverifikasi secara visual bahwa animasi sekarang jauh lebih halus.
Memverifikasi dengan rekaman lain
Praktik yang baik adalah mengambil rekaman lain dan memverifikasi bahwa animasi benar-benar lebih cepat dan lebih andal dari sebelumnya.
Jauh lebih baik.