Menganalisis performa runtime

Kayce Basques

Performa runtime adalah performa halaman Anda saat dijalankan, 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 di halaman Anda.

Mulai

Dalam tutorial ini, Anda akan membuka DevTools di halaman aktif dan menggunakan panel Performa untuk menemukan bottleneck performa di halaman.

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

  2. Muat halaman berikut di jendela Samaran Anda. Ini adalah demo yang akan Anda buat profil. Halaman tersebut 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

    Gambar 1. 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 Screenshot Setelan Gambar. DevTools menampilkan setelan yang terkait dengan cara merekam metrik performa.

  4. Untuk CPU, pilih 2x lebih lambat. DevTools men-throttle CPU sehingga proses ini 2 kali lebih lambat dari biasanya.

    Throttling CPU

    Gambar 2. Throttling CPU, digarisbawahi dengan warna biru

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 penyiapan khusus Anda.

  1. Terus klik Add 10 sampai kotak biru bergerak lebih lambat dari sebelumnya. Pada komputer kelas atas, mungkin perlu waktu sekitar 20 klik.

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

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

Mencatat performa runtime

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

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

    Membuat profil halaman

    Gambar 3: Membuat profil halaman

  2. Tunggu beberapa detik.

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

    Hasil profil

    Gambar 4: Hasil profil

Wow, itu jumlah data yang sangat banyak. Jangan khawatir, semuanya akan Anda mengerti.

Menganalisis hasil

Setelah mendapatkan rekaman performa halaman, Anda dapat mengukur seberapa buruk performa halaman tersebut dan menemukan penyebabnya.

Menganalisis frame per detik

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

  1. Lihat diagram FPS. Setiap kali Anda melihat batang merah di atas FPS, artinya kecepatan frame turun sangat rendah sehingga mungkin mengganggu pengalaman pengguna. Secara umum, makin tinggi panel hijau, semakin tinggi FPS.

    Diagram FPS

    Gambar 5: Diagram FPS, digarisbawahi dengan warna biru

  2. Di bawah diagram FPS, Anda akan melihat diagram CPU. Warna dalam diagram CPU sesuai dengan warna di tab Summary, di bagian bawah panel Performance. Fakta bahwa diagram CPU penuh warna berarti CPU telah mencapai performa maksimal selama perekaman. Setiap kali Anda melihat CPU mencapai batas maksimum untuk jangka waktu yang lama, itu adalah isyarat untuk menemukan cara untuk melakukan lebih sedikit pekerjaan.

    Diagram CPU dan tab Ringkasan

    Gambar 6: Diagram CPU dan tab Ringkasan, digarisbawahi dengan warna biru

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

    Melihat screenshot

    Gambar 7: Menampilkan screenshot halaman sekitar tanda 2.000 md rekaman

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

    Mengarahkan kursor ke bingkai

    Gambar 8: Mengarahkan kursor ke atas bingkai

Tentu saja, dengan demo ini, cukup jelas bahwa performa halaman tersebut kurang baik. Namun, dalam skenario nyata, hal ini mungkin tidak terlalu jelas. Jadi, memiliki semua alat ini untuk melakukan pengukuran akan sangat berguna.

Bonus: Buka pengukur FPS

Alat praktis lainnya adalah FPS meter, yang memberikan perkiraan waktu nyata untuk FPS saat halaman berjalan.

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

  3. Di tab Rendering, aktifkan FPS Meter. Overlay baru akan muncul di kanan atas area pandang Anda.

    Pengukur FPS

    Gambar 9: FPS meter

  4. Nonaktifkan FPS Meter lalu tekan Escape untuk menutup tab 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 rendering. Karena performa adalah seni melakukan pekerjaan yang lebih sedikit, tujuan Anda adalah mengurangi jumlah waktu yang dihabiskan untuk melakukan pekerjaan rendering.

    Tab Ringkasan

    Gambar 10: Tab Ringkasan, digarisbawahi dengan warna biru

  2. Luaskan bagian Utama. DevTools menampilkan flame chart aktivitas pada thread utama dari waktu ke waktu. Sumbu x mewakili rekaman, dari waktu ke waktu. Setiap batang merepresentasikan sebuah peristiwa. Batang yang lebih lebar berarti peristiwa memerlukan waktu lebih lama. Sumbu y mewakili stack panggilan. Jika Anda melihat peristiwa ditumpuk di atas satu sama lain, artinya peristiwa yang lebih tinggi menyebabkan peristiwa yang lebih rendah.

    Bagian Utama

    Gambar 11: Bagian Utama, digarisbawahi dengan warna biru

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

    Memperbesar satu peristiwa Animation Frame Fired

    Gambar 12: Memperbesar satu peristiwa Frame Animasi Diaktifkan

  4. Perhatikan segitiga merah di kanan atas peristiwa Animation Frame Fired. Setiap kali Anda melihat segitiga merah, merupakan peringatan bahwa mungkin ada masalah terkait peristiwa ini.

  5. Klik peristiwa Animation Frame Fired. Sekarang tab Ringkasan menampilkan informasi tentang peristiwa tersebut. Perhatikan link menampilkan. Mengklik tindakan tersebut akan menyebabkan DevTools menandai peristiwa yang memulai peristiwa Animation Frame Fired. Perhatikan juga link app.js:94. Jika diklik, Anda akan diarahkan ke baris yang relevan dalam kode sumber.

    Informasi selengkapnya tentang peristiwa Animation Frame Fired

    Gambar 13: Informasi selengkapnya tentang peristiwa Animation Frame Fired

  6. Di bawah peristiwa app.update, ada sekumpulan peristiwa ungu. Jika lebih lebar, tampak seolah-olah setiap persegi memiliki segitiga merah. Klik salah satu peristiwa Tata Letak berwarna ungu sekarang. DevTools menyediakan informasi selengkapnya tentang peristiwa tersebut di tab Summary. Selain itu, ada peringatan tentang reflow paksa (kata lain untuk tata letak).

  7. Di tab Summary, klik link app.js:70 di bagian Layout Forced. DevTools akan mengarahkan Anda ke baris kode yang memaksa tata letak.

    Baris kode yang menyebabkan tata letak paksa

    Gambar 13: Baris kode yang menyebabkan tata letak paksa

Fiuh! 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 pada demo untuk mengaktifkan kode yang dioptimalkan, melakukan perekaman performa lainnya, lalu menganalisis hasilnya. Dari peningkatan kecepatan frame hingga pengurangan peristiwa di flame chart bagian Main, Anda dapat melihat bahwa versi aplikasi yang dioptimalkan melakukan lebih sedikit pekerjaan, sehingga menghasilkan performa yang lebih baik.

Langkah berikutnya

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

Agar lebih nyaman dengan panel Performa, latihan akan menjadikannya lebih sempurna. Coba buat profil halaman Anda sendiri dan analisis hasilnya. Jika ada pertanyaan tentang hasilnya, buka pertanyaan Stack Overflow yang diberi tag dengan google-chrome-devtools. Sertakan screenshot atau link ke halaman yang dapat direproduksi, jika memungkinkan.

Untuk menjadi ahli dalam kinerja waktu proses, Anda harus mempelajari cara browser menerjemahkan HTML, CSS, dan JS menjadi piksel pada layar. Tempat terbaik untuk memulai adalah Ringkasan Performa Rendering. The Anatomy Of A Frame membahas secara 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. Deretan Performa Rendering lainnya memiliki banyak tips bagus untuk meningkatkan berbagai aspek performa runtime, seperti: