Beberapa minggu yang lalu, saat meneliti masalah kinerja dengan komponen Animation Spinner, saya menemukan alat di DevTools yang belum pernah saya gunakan sebelumnya: panel Performance Monitor. sebelum kamu membukanya Dev Tools > More Tools > Performance Monitor Anda akan melihat beberapa diagram dan grafik lanjutan yang berguna dari data kinerja real-time di UI.
Performance Monitor mengumpulkan data kinerja secara real-time dan menempatkannya pada grafik. Ini sangat berguna untuk mendeteksi masalah kinerja tingkat tinggi. Jika CPU, memori, jumlah node DOM, atau pendengar peristiwa hanya meningkat saat diklik, mungkin ada kebocoran pada kode Anda. Bagian yang paling saya minati adalah perhitungan ulang gaya per detik dan tata letak per detik. Elemen spinner kami memicu penghitungan ulang gaya dan panggilan tata letak dengan kecepatan 120 kali per detik. ups! Ini menciptakan banyak pekerjaan ekstra untuk CPU.
Selanjutnya saya buka Dev Tools > More Tools > Rendering > Show Paint Flashes Saya dapat segera melihat umpan balik sentuhan dari kotak hijau yang bergetar saat browser mengecat ulang komponen tersebut ratusan kali per detik. Kotak cat hijau mengonfirmasi bahwa pekerjaan UI ini terjadi di thread utama, bukan di thread kompositor. Performance Monitor menunjukkan penggunaan CPU Mackbook Pro saya pada 5-9%. Dobel.
Panel monitor performa berpadu sempurna dengan panel performa terbaik. Meskipun panel Performance Monitor sangat canggih, Performance Panel adalah alat debugging mendalam tempat Anda dapat memeriksa snapshot aplikasi Anda, hingga ke setiap fungsi dan panggilan render.
Mengambil snapshot di panel Performance mengonfirmasi apa yang saya lihat sekarang. Saya dapat melihat “garis merah kematian” dari frame drop yang mengunci thread utama. Perbaikannya cukup sederhana, tetapi saya perlu menyederhanakan dan mengode ulang cara kerja animasi.
- Hindari properti yang memicu gambar atau tata letak
- Perhitungan ulang tata letak pemadatan
contain - menggunakan
overflow: hiddenAlih-alih topeng CSS
Kami memerlukan beberapa prototipe untuk menemukan solusi yang bisa diterapkan. Kabar baiknya adalah animasi kita sekarang dipindahkan ke kompositor, bukan ke thread utama. Penggunaan CPU sekarang 0.2% (turun dari 5-9%), perhitungan ulang dan tata letak kami dikurangi menjadi 0 Namun animasinya masih berlanjut. Sejujurnya, memuat spinner adalah komponen yang cukup sepele, dan hanya bersifat sementara, namun ini mengurangi penggunaan CPU sebesar 10% dan mengosongkan ruang untuk aktivitas JavaScript lainnya untuk… lho… mendapatkan dan mengurai data.
About The Author
