Menganalisis performa runtime

Kayce Basques

Performa runtime adalah performa halaman Anda saat berjalan, bukan saat dimuat. Tutorial ini mengajarkan cara menggunakan panel Performa Chrome DevTools untuk menganalisis performa runtime. Dalam hal model RAIL, keterampilan yang Anda pelajari dalam tutorial ini berguna untuk menganalisis fase Respons, Animasi, dan Tidak Ada Aktivitas di halaman Anda.

Mulai

Dalam tutorial ini, kita akan menggunakan panel Performa untuk menemukan bottleneck performa di halaman aktif. Untuk memulai:

  1. Buka Google Chrome dalam Mode Samaran. Mode Samaran memastikan bahwa Chrome berjalan dalam keadaan bersih. Misalnya, jika Anda menginstal banyak ekstensi, ekstensi tersebut dapat membuat derau dalam pengukuran performa.

  2. Muat halaman berikut di jendela Samaran Anda. Ini adalah demo yang akan Anda buat profilnya. Halaman menampilkan sekumpulan kotak biru kecil yang bergerak ke atas dan ke bawah.

    https://googlechrome.github.io/devtools-samples/jank/

  3. Tekan Command+Option+I (Mac) atau Control+Shift+I (Windows, Linux) untuk membuka DevTools.

    Demo di sebelah kiri, dan DevTools di sebelah kanan.

Menyimulasikan CPU seluler

Perangkat seluler memiliki daya CPU yang jauh lebih rendah daripada desktop dan laptop. Setiap kali Anda membuat profil halaman, gunakan Throttling CPU untuk menyimulasikan performa halaman Anda di perangkat seluler.

  1. Di DevTools, klik tab Performa.
  2. Pastikan kotak centang Screenshots diaktifkan.
  3. Klik Setelan Perekaman. DevTools menampilkan setelan yang terkait dengan cara metrik performa diambil.

  4. Untuk CPU, pilih 4x slowdown. DevTools membatasi CPU Anda sehingga 4 kali lebih lambat dari biasanya.

    Throttling CPU disetel ke pelambatan 4x.

Menyiapkan demo

Sulit untuk membuat demo performa runtime yang berfungsi secara konsisten untuk semua pembaca situs ini. Bagian ini memungkinkan Anda menyesuaikan demo untuk memastikan bahwa pengalaman Anda relatif konsisten dengan screenshot dan deskripsi yang Anda lihat dalam tutorial ini, terlepas dari penyiapan tertentu Anda.

  1. Terus klik Tambahkan 10 hingga kotak biru bergerak jauh lebih lambat dari sebelumnya. Di komputer kelas atas, mungkin perlu waktu sekitar 20 klik.

  2. Klik Optimalkan. Kotak biru akan bergerak lebih cepat dan lebih lancar.

  3. Klik Batalkan Pengoptimalan. Kotak biru bergerak lebih lambat dan dengan lebih banyak jank lagi.

Merekam performa runtime

Saat Anda menjalankan versi halaman yang dioptimalkan, kotak biru akan bergerak lebih cepat. Mengapa demikian? Kedua versi tersebut seharusnya memindahkan setiap kotak dengan jumlah ruang yang sama dalam jumlah waktu yang sama. Buat rekaman di panel Performa untuk mempelajari cara mendeteksi bottleneck performa dalam versi yang tidak dioptimalkan.

  1. Di DevTools, klik Record . DevTools merekam metrik performa saat halaman berjalan.

    Membuat profil halaman demo.

  2. Tunggu beberapa detik.

  3. Klik Stop. DevTools berhenti merekam, memproses data, lalu menampilkan hasilnya di panel Performance.

    Halaman laporan pembuatan profil.

Wow, itu jumlah data yang sangat banyak. Jangan khawatir, Anda akan segera memahaminya.

Menganalisis hasil

Setelah memiliki rekaman performa, Anda dapat menganalisis seberapa buruk performa halaman, dan menemukan penyebabnya.

Menganalisis frame per detik

Metrik utama untuk mengukur performa animasi apa pun adalah frame per detik (FPS). Pengguna akan senang jika animasi berjalan pada 60 FPS.

  1. Lihat diagram FPS. Setiap kali Anda melihat batang merah di atas FPS, artinya kecepatan frame menurun begitu rendah sehingga mungkin akan merusak pengalaman pengguna.

    Diagram FPS ditandai.

  2. Di bawah diagram FPS, Anda akan melihat diagram CPU. Warna dalam diagram CPU sesuai dengan warna di tab Ringkasan, di bagian bawah panel Performa. Fakta bahwa diagram CPU penuh warna berarti CPU sudah maksimal selama perekaman. Setiap kali Anda melihat CPU mencapai kapasitas maksimumnya dalam waktu yang lama, ini adalah isyarat untuk menemukan cara melakukan lebih sedikit pekerjaan.

    Diagram CPU dan tab Ringkasan.

  3. Arahkan kursor mouse ke diagram FPS, CPU, atau NET. DevTools menampilkan screenshot halaman pada saat itu. Gerakkan mouse ke kiri dan kanan untuk memutar ulang rekaman. Tindakan ini disebut scrubbing, dan berguna untuk menganalisis progres animasi secara manual.

    Melihat screenshot dalam rekaman performa.

  4. Di bagian Bingkai, arahkan kursor ke salah satu kotak hijau. DevTools menampilkan FPS untuk frame tertentu tersebut. Setiap frame mungkin jauh di bawah target 60 FPS.

    Mengarahkan kursor ke bingkai.

Tentu saja, dengan demo ini, cukup jelas bahwa halaman tidak berperforma baik. Namun, dalam skenario sebenarnya, hal ini mungkin tidak begitu jelas, sehingga memiliki semua alat ini untuk melakukan pengukuran akan sangat berguna.

Bonus: Membuka pengukur FPS

Alat praktis lainnya adalah pengukur FPS, yang memberikan estimasi real-time untuk FPS saat halaman berjalan.

  1. Tekan Command+Shift+P (Mac) atau Control+Shift+P (Windows, Linux) untuk membuka Menu Perintah.
  2. Mulai ketik Rendering di Menu Perintah dan pilih Tampilkan Rendering.

  3. Di panel Rendering, aktifkan Tampilkan statistik Rendering. Overlay baru akan muncul di kanan atas area pandang Anda.

    Pengukur FPS.

  4. Nonaktifkan FPS Meter dan tekan Escape untuk menutup panel Rendering. Anda tidak akan menggunakannya dalam tutorial ini.

Menemukan bottleneck

Setelah Anda mengukur dan memverifikasi bahwa animasi tidak berperforma baik, pertanyaan berikutnya yang harus dijawab adalah: mengapa?

  1. Perhatikan tab Ringkasan. Jika tidak ada peristiwa yang dipilih, tab ini akan menampilkan pengelompokan aktivitas. Halaman menghabiskan sebagian besar waktunya untuk dirender. Karena performa adalah seni melakukan lebih sedikit pekerjaan, target Anda adalah mengurangi jumlah waktu yang dihabiskan untuk melakukan pekerjaan rendering.

    Tab Ringkasan, yang digarisbawahi dengan warna biru.

  2. Luaskan bagian Main. DevTools menampilkan diagram api aktivitas di thread utama, seiring waktu. Sumbu x mewakili rekaman, dari waktu ke waktu. Setiap batang mewakili peristiwa. Kolom yang lebih lebar berarti peristiwa memerlukan waktu lebih lama. Sumbu y mewakili stack panggilan. Jika Anda melihat peristiwa yang ditumpuk di atas satu sama lain, berarti peristiwa atas menyebabkan peristiwa bawah.

    Bagian Utama.

  3. Ada banyak data dalam rekaman. Perbesar satu peristiwa Animation Frame Fired dengan mengklik, menahan, dan menarik mouse ke Ringkasan, yang merupakan bagian yang menyertakan diagram FPS, CPU, dan NET. Bagian Utama dan tab Ringkasan hanya menampilkan informasi untuk bagian rekaman yang dipilih.

    Memperbesar satu peristiwa Frame Animasi Diaktifkan.

  4. Perhatikan segitiga merah di kanan atas peristiwa Tugas dan tata letak. Setiap kali Anda melihat segitiga merah, itu adalah peringatan bahwa mungkin ada masalah terkait peristiwa ini. Segitiga merah pada Tugas berarti tugas tersebut adalah tugas panjang.

  5. Klik peristiwa Animation Frame Fired. Tab Summary kini menampilkan informasi tentang peristiwa tersebut. Mengklik link di samping Dimulai oleh akan menyebabkan DevTools menandai peristiwa yang memulai peristiwa Frame Animasi Diaktifkan. Perhatikan juga link app.update @. Mengkliknya akan mengarahkan Anda ke baris yang relevan dalam kode sumber.

    Informasi selengkapnya tentang peristiwa Animation Frame Fired.

  6. Di bagian peristiwa app.update, ada banyak peristiwa berwarna ungu. Jika lebih lebar, akan terlihat seolah setiap baris memiliki segitiga merah. Klik salah satu peristiwa Layout berwarna ungu sekarang. DevTools memberikan informasi selengkapnya tentang peristiwa di tab Ringkasan. Memang, ada peringatan tentang reflow paksa (istilah lain untuk tata letak).

  7. Di tab Ringkasan, klik link di samping app.update @ di bagian Frame Animasi yang Diminta. DevTools akan mengarahkan Anda ke baris kode yang memaksa tata letak.

    Baris kode yang menyebabkan tata letak paksa.

Fiuh! Ada banyak hal yang harus dipahami, tetapi sekarang Anda memiliki dasar yang kuat dalam alur kerja dasar untuk menganalisis performa runtime. Bagus sekali.

Bonus: Menganalisis versi yang dioptimalkan

Dengan menggunakan alur kerja dan alat yang baru saja Anda pelajari, klik Optimize di demo untuk mengaktifkan kode yang dioptimalkan, mengambil rekaman performa lain, lalu menganalisis hasilnya. Dari peningkatan frekuensi frame hingga pengurangan peristiwa dalam diagram api bagian Main, Anda dapat melihat bahwa versi aplikasi yang dioptimalkan melakukan jauh lebih sedikit pekerjaan, sehingga menghasilkan performa yang lebih baik.

Langkah berikutnya

Dasar untuk memahami performa adalah model RAIL. Model ini mengajarkan metrik performa yang paling penting bagi pengguna Anda. Lihat Mengukur Performa dengan Model RAIL untuk mempelajari lebih lanjut.

Untuk lebih memahami panel Performa, teruslah berlatih. Coba buat profil halaman Anda sendiri dan analisis hasilnya. Jika ada pertanyaan tentang hasil Anda, buka pertanyaan Stack Overflow yang diberi tag google-chrome-devtools. Sertakan screenshot atau link ke halaman yang dapat direproduksi, jika memungkinkan.

Untuk menjadi pakar dalam performa runtime, Anda harus mempelajari cara browser menerjemahkan HTML, CSS, dan JS menjadi piksel di layar. Tempat terbaik untuk memulai adalah Ringkasan Performa Rendering. Anatomi Frame membahas lebih mendetail.

Terakhir, ada banyak cara untuk meningkatkan performa runtime. Tutorial ini berfokus pada satu bottleneck animasi tertentu untuk memberi Anda tur yang terfokus melalui panel Performa, tetapi ini hanyalah salah satu dari banyak bottleneck yang mungkin Anda temui. Seri Rendering Performance lainnya memiliki banyak tips yang bagus untuk meningkatkan berbagai aspek performa runtime, seperti: