Menganalisis performa runtime

Kayce Basques

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

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 sedikit daripada desktop dan laptop. Setiap kali Anda membuat profil halaman, gunakan Throttling CPU untuk menyimulasikan performa halaman 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 pelambatan. DevTools membatasi CPU sehingga 4 kali lebih lambat dari biasanya.

    Throttling CPU ditetapkan 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 pengalaman Anda relatif konsisten dengan screenshot dan deskripsi yang terlihat dalam tutorial ini, terlepas dari konfigurasi khusus Anda.

  1. Terus klik Add 10 sampai kotak biru bergerak terasa 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 bergerak lebih cepat. Mengapa demikian? Kedua versi seharusnya memindahkan setiap persegi dengan jumlah ruang yang sama dalam waktu yang sama. Lakukan rekaman di panel Performance untuk mempelajari cara mendeteksi bottleneck performa dalam versi yang tidak dioptimalkan.

  1. Di DevTools, klik Record . DevTools mengambil 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, 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 panel merah di atas FPS, berarti kecepatan frame turun sangat rendah sehingga mungkin membahayakan 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 telah mencapai batas maksimal selama perekaman. Setiap kali Anda melihat CPU mencapai kapasitas maksimumnya dalam waktu yang lama, ini adalah tanda untuk menemukan cara melakukan lebih sedikit pekerjaan.

    Diagram CPU dan tab Ringkasan.

  3. Arahkan kursor mouse ke diagram FPS, CPU, atau NET. DevTools akan 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 tersebut. Setiap frame mungkin jauh di bawah target 60 FPS.

    Mengarahkan kursor ke atas bingkai.

Tentu saja, dengan demo ini, performa halaman terlihat tidak 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, ditandai dengan warna biru.

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

    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 Animation Frame Fired.

  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 Gettingd by menyebabkan DevTools menandai peristiwa yang memulai peristiwa Animation Frame Fired. 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 perubahan posisi/geometri paksa (nama lain untuk tata letak).

  7. Di tab Ringkasan, klik link di samping app.update @ di bagian Pembatalan Validasi Tata Letak Pertama. DevTools akan mengarahkan Anda ke baris kode yang memaksa tata letak.

    Baris kode yang menyebabkan tata letak paksa.

Fiuh! Ada banyak hal yang harus dipelajari, 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 Utama, Anda dapat melihat bahwa versi aplikasi yang dioptimalkan melakukan 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. Cobalah membuat profil laman Anda sendiri dan analisis hasilnya. Jika ada pertanyaan tentang hasil Anda, buka pertanyaan StackOverflow 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 fokus 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: