Halaman ini adalah referensi lengkap fitur Chrome DevTools yang terkait dengan analisis performa.
Lihat Mulai Menganalisis Performa Runtime untuk mendapatkan tutorial terpandu tentang cara menganalisis performa halaman menggunakan Chrome DevTools.
Rekam performa
Anda dapat merekam performa runtime atau pemuatan.
Mencatat performa runtime
Mencatat performa runtime ketika Anda ingin menganalisis performa halaman saat sedang berjalan, bukan pemuatan.
- Buka halaman yang ingin Anda analisis.
- Klik tab Performa di DevTools.
Klik Record .
Berinteraksilah dengan halaman. DevTools mencatat semua aktivitas halaman yang terjadi akibat interaksi Anda.
Klik Record lagi atau klik Stop untuk berhenti merekam.
Mencatat performa pemuatan
Catat performa pemuatan saat Anda ingin menganalisis performa halaman saat dimuat, bukan berjalan.
- Buka halaman yang ingin Anda analisis.
- Buka panel Performance di DevTools.
Klik Start profiling and reload page . DevTools terlebih dahulu akan membuka
about:blank
untuk menghapus screenshot dan rekaman aktivitas yang tersisa. Kemudian, DevTools mencatat metrik performa saat halaman dimuat ulang, lalu otomatis menghentikan perekaman beberapa detik setelah pemuatan selesai.
DevTools otomatis memperbesar bagian rekaman yang sebagian besar aktivitasnya terjadi.
Dalam contoh ini, panel Performa menampilkan aktivitas selama pemuatan halaman.
Mengambil screenshot saat merekam
Aktifkan kotak centang Screenshot untuk mengambil screenshot setiap frame saat merekam.
Lihat Melihat screenshot untuk mempelajari cara berinteraksi dengan screenshot.
Memaksa pembersihan sampah memori saat merekam
Saat Anda merekam halaman, klik Kumpulkan sampah pel untuk memaksa pembersihan sampah memori.
Tampilkan setelan perekaman
Klik Capture settings untuk menampilkan setelan lainnya terkait cara DevTools merekam rekaman performa.
Nonaktifkan contoh JavaScript
Secara default, jalur Utama rekaman menampilkan stack panggilan mendetail dari fungsi JavaScript yang dipanggil selama perekaman. Untuk menonaktifkan stack panggilan ini:
- Buka menu Setelan pengambilan . Lihat Tampilkan setelan perekaman.
- Aktifkan kotak centang Nonaktifkan Contoh JavaScript.
- Ambil rekaman halaman.
Screenshot berikut menunjukkan perbedaan antara menonaktifkan dan mengaktifkan contoh JavaScript. Jalur Utama perekaman jauh lebih singkat jika pengambilan sampel dinonaktifkan, karena menghilangkan semua stack panggilan JavaScript.
Contoh ini menunjukkan rekaman dengan contoh JS yang dinonaktifkan.
Contoh ini menunjukkan rekaman dengan contoh JS yang diaktifkan.
Membatasi jaringan saat merekam
Untuk men-throttle jaringan saat merekam:
- Buka menu Setelan pengambilan . Lihat Tampilkan setelan perekaman.
- Setel Network ke tingkat throttling yang dipilih.
Membatasi CPU saat merekam
Untuk men-throttle CPU saat merekam:
- Buka menu Setelan pengambilan . Lihat Tampilkan setelan perekaman.
- Setel CPU ke level throttling yang dipilih.
Throttling relatif terhadap kemampuan komputer Anda. Misalnya, opsi 2x lebih lambat membuat CPU beroperasi 2 kali lebih lambat dari kemampuannya biasanya. DevTools tidak dapat benar-benar menyimulasikan CPU perangkat seluler, karena arsitektur perangkat seluler sangat berbeda dengan desktop dan laptop.
Aktifkan instrumentasi paint lanjutan
Untuk melihat instrumentasi cat yang mendetail:
- Buka menu Setelan pengambilan . Lihat Tampilkan setelan perekaman.
- Centang kotak Enable advanced paint instrumentation.
Untuk mempelajari cara berinteraksi dengan informasi paint, lihat View lapisan dan Melihat paint profiler.
Emulasikan konkurensi hardware
Untuk menguji performa aplikasi dengan jumlah inti prosesor yang berbeda, Anda dapat mengonfigurasi nilai yang dilaporkan oleh properti navigator.hardwareConcurrency
. Beberapa aplikasi menggunakan properti ini untuk mengontrol tingkat paralelisme aplikasinya, misalnya, untuk mengontrol ukuran kumpulan pthread Emscripten.
Untuk mengemulasi konkurensi hardware:
- Buka menu Setelan pengambilan . Lihat Tampilkan setelan perekaman.
- Centang Hardware serentak dan tetapkan jumlah core dalam kotak input.
DevTools menampilkan ikon peringatan di samping tab Performa untuk mengingatkan Anda bahwa emulasi konkurensi hardware diaktifkan.
Untuk kembali ke nilai default 10
, klik tombol Kembalikan .
Menyimpan rekaman
Untuk menyimpan rekaman, klik kanan dan pilih Simpan Profil.
Memuat rekaman
Untuk memuat rekaman, klik kanan dan pilih Load Profile.
Hapus rekaman sebelumnya
Setelah membuat rekaman, tekan Hapus rekaman untuk menghapus rekaman tersebut dari panel Performa.
Menganalisis rekaman performa
Setelah Anda merekam performa runtime atau rekam performa pemuatan, panel Performa akan memberikan banyak data untuk menganalisis performa hal yang baru saja terjadi.
Menavigasi rekaman
Untuk memeriksa rekaman performa Anda secara cermat, Anda dapat memilih bagian rekaman, men-scroll flame chart yang panjang, memperbesar dan memperkecil, serta menggunakan breadcrumb untuk beralih antar-tingkat zoom.
Memilih bagian rekaman
Di panel tindakan pada panel Performa dan di bagian atas rekaman, Anda dapat melihat bagian Ringkasan linimasa dengan diagram CPU dan NET.
Untuk memilih sebagian rekaman, klik lama, lalu tarik ke kiri atau kanan di Ringkasan linimasa.
Untuk memilih bagian menggunakan keyboard:
- Memfokuskan trek Utama atau tetangganya.
- Gunakan tombol W, A, S, D untuk memperbesar, bergerak ke kiri, memperkecil, dan bergerak ke kanan.
Untuk memilih bagian menggunakan trackpad:
- Arahkan kursor ke bagian Ringkasan linimasa atau salah satu jalur (Utama dan tetangganya).
- Dengan dua jari, geser ke atas untuk memperkecil, geser ke kiri untuk berpindah ke kiri, geser ke bawah untuk memperbesar, dan geser ke kanan untuk berpindah ke kanan.
Membuat breadcrumb dan beralih antar-tingkat zoom
Ringkasan linimasa memungkinkan Anda membuat beberapa breadcrumb bertingkat secara berurutan, meningkatkan tingkat zoom, lalu melompat ke level yang dipilih.
Untuk membuat dan menggunakan breadcrumb:
- Di Ringkasan linimasa, pilih bagian rekaman.
- Arahkan kursor ke pilihan, lalu klik tombol N ms zoom_in. Pilihan ini akan diperluas untuk mengisi Ringkasan linimasa. Rantai breadcrumb mulai dibuat di bagian atas ringkasan Linimasa.
- Ulangi dua langkah sebelumnya untuk membuat breadcrumb bertingkat lainnya. Anda dapat terus menyusun bertingkat breadcrumb selama rentang pilihan lebih besar dari 5 milidetik.
- Untuk melompat ke tingkat zoom yang dipilih, klik breadcrumb yang sesuai pada rantai di bagian atas Ringkasan linimasa.
Men-scroll flame chart panjang
Untuk men-scroll flame chart panjang di trek Utama atau tetangganya, klik lama, lalu tarik ke arah mana saja sampai yang Anda cari muncul.
Telusuri aktivitas
Untuk membuka kotak penelusuran di bagian bawah panel Performa, tekan:
- macOS: Command+F
- Windows, Linux: Control+F
Contoh ini menunjukkan ekspresi reguler di kotak penelusuran di bagian bawah yang menemukan aktivitas yang dimulai dengan E
.
Untuk melihat aktivitas yang cocok dengan kueri Anda:
- Klik tombol expand_less Sebelumnya atau expand_less Berikutnya.
- Tekan Shift+Enter untuk memilih sebelumnya atau Enter untuk memilih berikutnya.
Panel Performa menampilkan tooltip di atas aktivitas yang dipilih di kotak penelusuran.
Untuk mengubah setelan kueri:
- Klik match_case Cocokkan huruf besar/kecil agar kueri peka huruf besar/kecil.
- Klik regular_expression Ekspresi reguler untuk menggunakan ekspresi reguler dalam kueri Anda.
Untuk menyembunyikan kotak penelusuran, klik Batal.
Ubah urutan lagu dan sembunyikan
Untuk merapikan trace performa, Anda dapat mengubah urutan dan menyembunyikan trek yang tidak relevan dalam mode konfigurasi track.
Untuk memindahkan dan menyembunyikan trek:
- Untuk masuk ke mode konfigurasi, klik kanan nama trek dan pilih Konfigurasi trek.
- Klik arrow_upward ke atas atau arrow_downward ke bawah untuk memindahkan trek ke atas atau ke bawah. Klik visibility_off untuk menyembunyikannya.
- Setelah selesai, klik Finish Configuration Track di bagian bawah untuk keluar dari mode konfigurasi.
Tonton video untuk melihat cara kerja alur kerja ini.
Panel Performance menyimpan konfigurasi pelacakan untuk trace baru, tetapi tidak di sesi DevTools berikutnya.
Melihat aktivitas thread utama
Gunakan jalur Utama untuk melihat aktivitas yang terjadi di thread utama halaman.
Klik peristiwa untuk melihat informasi selengkapnya tentang peristiwa tersebut di tab Ringkasan. Panel Performa menguraikan peristiwa yang dipilih dengan warna biru.
Contoh ini menunjukkan informasi selengkapnya tentang peristiwa panggilan fungsi get
di tab Ringkasan.
Membaca flame chart
Panel Performance mewakili aktivitas thread utama dalam flame chart. Sumbu x adalah perekaman dari waktu ke waktu. Sumbu y mewakili stack panggilan. Peristiwa di bagian atas menyebabkan peristiwa di bawah.
Contoh ini menunjukkan flame chart dalam trek Utama. Peristiwa click
menyebabkan panggilan fungsi anonim. Fungsi ini, pada gilirannya, disebut onEndpointClick_
, yang disebut handleClick_
, dan seterusnya.
Panel Performance menetapkan warna acak pada skrip untuk memecah flame chart dan membuatnya lebih mudah dibaca. Pada contoh sebelumnya, panggilan fungsi dari satu skrip berwarna biru muda. Panggilan dari skrip lain berwarna merah muda terang. Kuning gelap mewakili aktivitas pembuatan skrip, dan peristiwa ungu mewakili aktivitas rendering. Peristiwa berwarna kuning dan ungu yang lebih gelap ini konsisten di semua rekaman.
Tugas yang berjalan lama juga ditandai dengan segitiga merah, dan dengan bagian di atas 50 milidetik berwarna merah:
Dalam contoh ini, tugas membutuhkan waktu lebih dari 400 milidetik, sehingga bagian yang mewakili 350 milidetik terakhir diberi warna merah, sedangkan 50 milidetik awal tidak.
Selain itu, jalur Utama menampilkan informasi tentang profil CPU yang dimulai dan dihentikan dengan fungsi konsol profile()
dan profileEnd()
.
Untuk menyembunyikan flame chart terperinci dari panggilan JavaScript, lihat Menonaktifkan contoh JavaScript. Saat contoh JS dinonaktifkan, Anda hanya akan melihat peristiwa level tinggi seperti Event (click)
dan Function Call
.
Melacak inisiator peristiwa
Jalur Utama dapat menampilkan panah yang menghubungkan inisiator berikut dan peristiwa yang disebabkannya:
- Pembatalan validasi gaya atau tata letak -> Hitung ulang gaya atau Tata Letak
- Meminta Frame Animasi -> Bingkai Animasi Diaktifkan
- Minta Callback Tidak Ada Aktivitas -> Callback Aktifkan Tidak Ada Aktivitas
- Instal Timer -> Timer Diaktifkan
- Create WebSocket -> Send... dan Terima WebSocket Handshake atau Destroy WebSocket
Untuk melihat panah, temukan inisiator atau peristiwa yang disebabkannya di flame chart, lalu pilih.
Jika dipilih, tab Summary akan menampilkan link Initiator for untuk inisiator dan link Dimulai oleh untuk peristiwa yang disebabkannya. Klik keduanya untuk melompat di antara peristiwa yang sesuai.
Menyembunyikan fungsi dan turunannya dalam flame chart
Untuk merapikan flame chart di thread Utama, Anda dapat menyembunyikan fungsi yang dipilih atau turunannya:
Di trek Utama, klik kanan fungsi dan pilih salah satu opsi berikut atau tekan pintasan yang sesuai:
- Sembunyikan fungsi (
H
) - Sembunyikan turunan (
C
) - Sembunyikan turunan yang berulang (
R
) - Reset turunan (
U
) - Reset rekaman aktivitas (
T
) - Tambahkan skrip ke daftar yang diabaikan (
I
)
Tombol drop-down arrow_drop_down akan muncul di samping nama fungsi dengan turunan yang disembunyikan.
- Sembunyikan fungsi (
Untuk melihat jumlah turunan yang disembunyikan, arahkan kursor ke tombol drop-down arrow_drop_down.
Untuk mereset fungsi dengan turunan tersembunyi atau seluruh flame chart, pilih fungsi, lalu tekan
U
atau klik kanan fungsi apa pun, lalu pilih Reset trace.
Abaikan skrip dalam flame chart
Untuk menambahkan skrip ke daftar yang diabaikan, klik kanan skrip pada diagram, lalu pilih Tambahkan skrip ke daftar yang diabaikan.
Diagram menciutkan skrip yang diabaikan, menandainya sebagai Di daftar yang diabaikan, dan menambahkannya ke aturan Pengecualian kustom di setelan Setelan > Daftar yang diabaikan. Skrip yang diabaikan akan disimpan hingga Anda menghapusnya dari trace atau dari Aturan pengecualian kustom.
Melihat aktivitas dalam tabel
Setelah mencatat halaman, Anda tidak perlu hanya mengandalkan jalur Utama untuk menganalisis aktivitas. DevTools juga menyediakan tiga tampilan tabel untuk menganalisis aktivitas. Setiap tampilan memberi Anda perspektif yang berbeda tentang aktivitas:
- Jika Anda ingin melihat aktivitas root yang paling banyak menghasilkan pekerjaan, gunakan tab Call Tree.
- Jika Anda ingin melihat aktivitas yang menghabiskan waktu paling banyak secara langsung, gunakan tab Bottom-Up.
- Jika Anda ingin melihat aktivitas sesuai urutannya selama perekaman, gunakan tab Event Log.
Untuk membantu menemukan hal yang Anda cari dengan lebih cepat, ketiga tab memiliki tombol untuk pemfilteran lanjutan di sebelah panel Filter:
- match_case Cocokkan huruf besar/kecil.
- regular_expression Ekspresi reguler.
- match_word Mencocokkan seluruh kata.
Setiap tampilan tabel di panel Performa menampilkan link untuk aktivitas seperti panggilan fungsi. Untuk membantu Anda men-debug, DevTools menemukan deklarasi fungsi yang sesuai di file sumber. Selain itu, jika peta sumber yang sesuai ada dan diaktifkan, DevTools akan otomatis menemukan file asli.
Klik link untuk membuka file sumber di panel Sources.
Aktivitas root
Berikut adalah penjelasan konsep aktivitas root yang disebutkan di tab Hierarki Panggilan, tab Bottom-Up, dan Log Peristiwa.
Aktivitas root adalah aktivitas yang menyebabkan browser melakukan beberapa pekerjaan. Misalnya, saat Anda mengklik
suatu halaman, browser akan mengaktifkan aktivitas Event
sebagai aktivitas root. Event
tersebut kemudian dapat menyebabkan pengendali dieksekusi.
Dalam flame chart lagu Utama, aktivitas root berada di bagian atas diagram. Di tab Call Tree dan Event Log, aktivitas root adalah item level atas.
Lihat Tab Hierarki Panggilan untuk contoh aktivitas root.
Tab Hierarki Panggilan
Gunakan tab Call Tree untuk melihat aktivitas root mana yang paling banyak menghasilkan pekerjaan.
Tab Call Tree hanya menampilkan aktivitas selama bagian rekaman yang dipilih. Lihat Memilih bagian rekaman untuk mempelajari cara memilih bagian.
Dalam contoh ini, item tingkat atas dalam kolom Aktivitas, seperti Event
, Paint
, dan
Composite Layers
adalah aktivitas root. Penyusunan bertingkat (nesting) mewakili stack panggilan. Dalam
contoh ini, Event
menyebabkan Function Call
, yang menyebabkan button.addEventListener
, yang menyebabkan b
,
dan seterusnya.
Waktu Mandiri mewakili waktu yang dihabiskan langsung dalam aktivitas tersebut. Total Waktu merepresentasikan waktu yang dihabiskan dalam aktivitas tersebut atau turunannya.
Klik Self Time, Total Time, atau Activity untuk mengurutkan tabel berdasarkan kolom tersebut.
Gunakan kotak Filter untuk memfilter peristiwa berdasarkan nama aktivitas.
Secara default, menu Pengelompokan ditetapkan ke Tidak Ada Pengelompokan. Gunakan menu Pengelompokan untuk mengurutkan tabel aktivitas berdasarkan berbagai kriteria.
Klik Show Heaviest Stack untuk menampilkan tabel lain di sebelah kanan tabel Activity. Klik aktivitas untuk mengisi tabel Heaviest Stack. Tabel Heaviest Stack menunjukkan turunan aktivitas yang dipilih yang memerlukan waktu paling lama untuk dijalankan.
Tab Bottom-Up
Gunakan tab Bottom-Up untuk melihat aktivitas mana yang secara langsung menghabiskan waktu paling banyak secara agregat.
Tab Bottom-Up hanya menampilkan aktivitas selama bagian rekaman yang dipilih. Lihat Memilih bagian rekaman untuk mempelajari cara memilih bagian.
Dalam flame chart lagu Main pada contoh ini, Anda dapat melihat bahwa hampir seluruh
waktu yang dihabiskan untuk menjalankan tiga panggilan ke wait()
. Oleh karena itu, aktivitas teratas di tab
Bottom-Up adalah wait
. Dalam flame chart, warna kuning di bawah
panggilan ke wait
sebenarnya ribuan panggilan Minor GC
. Dengan demikian, Anda dapat melihat bahwa di
tab Bottom-Up, aktivitas yang paling mahal berikutnya adalah Minor GC
.
Kolom Waktu Mandiri mewakili waktu gabungan yang dihabiskan langsung dalam aktivitas tersebut, di semua kemunculannya.
Kolom Total Waktu menunjukkan waktu gabungan yang dihabiskan dalam aktivitas tersebut atau turunannya.
Tab {i>Event Log<i}
Gunakan tab Event Log untuk melihat aktivitas yang diurutkan sesuai urutannya selama perekaman.
Tab Event Log hanya menampilkan aktivitas selama bagian rekaman yang dipilih. Lihat Memilih bagian rekaman untuk mempelajari cara memilih bagian.
Kolom Waktu Mulai menunjukkan titik dimulainya aktivitas tersebut, relatif terhadap awal
rekaman. Waktu mulai 1573.0 ms
untuk item yang dipilih dalam contoh ini
berarti aktivitas dimulai 1573 md setelah perekaman dimulai.
Kolom Waktu Mandiri mewakili waktu yang dihabiskan langsung dalam aktivitas tersebut.
Kolom Total Waktu mewakili waktu yang dihabiskan langsung dalam aktivitas tersebut atau di turunannya.
Klik Start Time, Self Time, atau Total Time untuk mengurutkan tabel berdasarkan kolom tersebut.
Gunakan kotak Filter untuk memfilter aktivitas menurut nama.
Gunakan menu Durasi untuk memfilter aktivitas apa pun yang memerlukan waktu kurang dari 1 milidetik atau 15 milidetik. Secara default, menu Durasi disetel ke Semua, artinya semua aktivitas akan ditampilkan.
Nonaktifkan kotak centang Loading, Scripting, Rendering, atau Painting untuk memfilter semua aktivitas dari kategori tersebut.
Lihat pengaturan waktu
Pada jalur Waktu, lihat penanda penting seperti:
- Penerapan Pertama (FP)
- First Contentful Paint (FCP)
- Largest Contentful Paint (LCP)
- Peristiwa DOMContentLoaded (DCL)
- Peristiwa Pemuatan (R)
- Panggilan
performance.mark()
kustom Anda. Setiap tanda dengan tooltip ditampilkan di bawah ini dengan kecepatan 813,44 milidetik, dengan label Mulai menjalankan JavaScript. - Panggilan
performance.measure()
kustom Anda. Rentang kuning ditunjukkan di bawah ini, yang diberi label Interaksi Lambat.
Untuk melihat detail selengkapnya di tab Ringkasan, pilih penanda. Untuk melihat stempel waktu penanda, arahkan kursor ke atasnya di jalur Waktu.
Lihat interaksi
Lihat interaksi pengguna di jalur Interaksi untuk melacak potensi masalah responsivitas.
Untuk melihat interaksi:
- Buka DevTools, misalnya, di halaman demo ini.
- Buka panel Performa dan mulai perekaman.
- Klik elemen (kopi) dan hentikan perekaman.
- Temukan jalur Interaksi di linimasa.
Dalam contoh ini, jalur Interaksi menampilkan interaksi Pointer. Interaksi memiliki whisker yang menunjukkan penundaan input dan presentasi pada batas waktu pemrosesan. Arahkan kursor ke interaksi untuk melihat tooltip dengan penundaan input, waktu pemrosesan, dan penundaan presentasi.
Jalur Interactions juga menampilkan peringatan Interaction to Next Paint (INP) untuk interaksi yang berdurasi lebih dari 200 milidetik di tab Summary dan di tooltip saat kursor diarahkan:
Jalur Interaksi menandai interaksi lebih dari 200 milidetik dengan segitiga merah di sudut kanan atas.
Lihat aktivitas GPU
Lihat aktivitas GPU di bagian GPU.
Melihat aktivitas raster
Lihat aktivitas raster di bagian Kumpulan Thread.
Menganalisis frame per detik (FPS)
DevTools menyediakan berbagai cara untuk menganalisis frame per detik:
- Gunakan bagian Frame untuk melihat durasi frame tertentu.
- Gunakan pengukur FPS untuk mendapatkan perkiraan FPS secara real-time saat halaman berjalan. Lihat Melihat frame per detik secara real time dengan pengukur FPS.
Bagian Frames
Bagian Frame menunjukkan dengan tepat durasi frame tertentu.
Arahkan kursor ke bingkai untuk melihat tooltip dengan informasi selengkapnya tentang hal tersebut.
Contoh ini menunjukkan tooltip saat Anda mengarahkan kursor ke sebuah frame.
Bagian Frame dapat menampilkan empat jenis frame:
- Frame tidak ada aktivitas (putih). Tidak ada perubahan.
- Frame (hijau). Dirender sesuai harapan dan tepat waktu.
- Bingkai ditampilkan sebagian (kuning dengan pola garis putus-putus lebar yang jarang). Chrome melakukan yang terbaik untuk merender setidaknya beberapa pembaruan visual tepat waktu. Misalnya, jika pekerjaan thread utama dari proses perender (animasi kanvas) terlambat, tetapi thread compositor (scrolling) tepat waktu.
- Bingkai yang dilepas (merah dengan pola garis solid yang padat). Chrome tidak dapat merender frame dalam waktu yang wajar.
Contoh ini menunjukkan tooltip saat Anda mengarahkan kursor ke frame yang ditampilkan sebagian.
Klik frame untuk melihat informasi selengkapnya tentang frame di tab Ringkasan. DevTools menguraikan frame yang dipilih dengan warna biru.
Melihat permintaan jaringan
Luaskan bagian Jaringan untuk melihat waterfall permintaan jaringan yang terjadi selama perekaman.
Permintaan diberi kode warna sebagai berikut:
- HTML: Biru
- CSS: Ungu
- JS: Kuning
- Gambar: Hijau
Klik permintaan untuk melihat informasi selengkapnya tentang hal tersebut di tab Ringkasan. Pada contoh sebelumnya, tab Summary menampilkan informasi tentang permintaan hijau yang dipilih.
Persegi biru gelap di kiri atas permintaan berarti permintaan memiliki prioritas lebih tinggi. Persegi biru muda berarti prioritas lebih rendah. Pada contoh sebelumnya, permintaan yang dipilih memiliki prioritas tinggi, dan permintaan biru di atasnya memiliki prioritas tertinggi.
Bagian Ringkasan mencakup kolom Prioritas Awal dan Prioritas (final). Jika nilainya berbeda, prioritas pengambilan permintaan telah berubah selama perekaman. Untuk informasi selengkapnya, lihat Mengoptimalkan pemuatan resource dengan Fetch Priority API.
Pada contoh sebelumnya, permintaan untuk www.google.com
diwakili oleh garis di sebelah kiri, batang di
tengah dengan bagian gelap dan terang, serta garis di sebelah kanan. Screenshot berikutnya menunjukkan
representasi yang sesuai dari permintaan yang sama di tab Timing pada panel Network.
Berikut cara kedua representasi ini dipetakan satu sama lain:
- Baris kiri mencakup semuanya hingga grup peristiwa
Connection Start
, inklusif. Dengan kata lain, semua kata sebelumRequest Sent
, secara eksklusif. - Bagian terang dari batang adalah
Request Sent
danWaiting (TTFB)
. - Bagian gelap panel adalah
Content Download
. - Baris yang tepat pada dasarnya adalah waktu yang dihabiskan untuk menunggu thread utama. Waktu ini tidak ditampilkan di tab Timing.
Contoh ini menunjukkan representasi baris baris dari permintaan www.google.com
.
Contoh ini menunjukkan representasi tab Waktu dari permintaan www.google.com
.
Lihat metrik memori
Aktifkan kotak centang Memori untuk melihat metrik memori dari rekaman terakhir.
DevTools menampilkan diagram Memori baru, di atas tab Summary. Terdapat juga diagram baru di bawah diagram NET, yang disebut HEAP. Diagram HEAP memberikan informasi yang sama dengan baris JS Heap dalam diagram Memory.
Contoh ini menunjukkan metrik memori di atas tab Summary.
Garis berwarna pada bagan dipetakan ke kotak centang berwarna di atas bagan. Nonaktifkan kotak centang untuk menyembunyikan kategori tersebut dari diagram.
Diagram hanya menampilkan wilayah rekaman yang dipilih. Pada contoh sebelumnya, diagram Memori hanya menunjukkan penggunaan memori untuk awal perekaman, hingga sekitar 1.000 md.
Melihat durasi sebagian rekaman
Saat menganalisis bagian seperti Jaringan atau Utama, terkadang Anda memerlukan perkiraan yang lebih tepat tentang berapa lama peristiwa tertentu berlangsung. Tahan Shift, klik lama, lalu tarik ke kiri atau kanan untuk memilih bagian rekaman. Di bagian bawah pilihan Anda, DevTools akan menampilkan durasi waktu yang diperlukan.
Dalam contoh ini, stempel waktu 488.53ms
di bagian bawah bagian yang dipilih menunjukkan berapa lama
waktu yang diperlukan untuk bagian tersebut.
Melihat screenshot
Lihat Mengambil screenshot saat merekam untuk mempelajari cara mengaktifkan screenshot.
Arahkan kursor ke Ringkasan linimasa untuk melihat screenshot tampilan halaman selama momen rekaman tersebut. Ringkasan linimasa adalah bagian yang berisi diagram CPU, FPS, dan NET.
Anda juga dapat melihat screenshot dengan mengklik bingkai di bagian Frames. DevTools menampilkan versi kecil screenshot di tab Summary.
Contoh ini menampilkan screenshot untuk bingkai 195.5ms
di tab Summary saat Anda mengkliknya di bagian Frames.
Klik thumbnail di tab Ringkasan untuk memperbesar screenshot.
Contoh ini menampilkan screenshot yang diperbesar setelah Anda mengklik thumbnail-nya di tab Summary.
Lihat informasi lapisan
Untuk melihat informasi lapisan lanjutan tentang sebuah frame:
- Aktifkan instrumentasi paint lanjutan.
- Pilih bingkai di bagian Frame. DevTools menampilkan informasi tentang lapisannya di tab Layers baru, di samping tab Event Log.
Arahkan kursor ke lapisan untuk menandainya dalam diagram.
Contoh ini memperlihatkan lapisan #39 yang disorot saat Anda mengarahkan kursor ke atasnya.
Untuk memindahkan diagram:
- Klik Mode Geser untuk bergerak di sepanjang sumbu X dan Y.
- Klik Putar Mode untuk memutar di sepanjang sumbu Z.
- Klik Reset Transform untuk mereset diagram ke posisi aslinya.
Lihat cara kerja analisis lapisan:
Lihat paint profiler
Untuk melihat informasi lanjutan tentang peristiwa paint:
- Aktifkan instrumentasi paint lanjutan.
- Pilih peristiwa Paint di jalur Utama.
Menganalisis performa rendering dengan tab Rendering
Gunakan fitur tab Rendering untuk membantu memvisualisasikan performa rendering halaman Anda.
Melihat frame per detik secara real time dengan pengukur FPS
Statistik rendering frame adalah overlay yang muncul di sudut kanan atas area tampilan. Kode ini memberikan perkiraan FPS secara real-time saat halaman berjalan.
Lihat Statistik rendering frame.
Lihat peristiwa melukis secara real time dengan Paint Flashing
Gunakan Paint Flashing untuk mendapatkan tampilan real time semua peristiwa cat di halaman.
Lihat Flashing cat.
Melihat overlay lapisan dengan Batas Lapisan
Gunakan Batas Lapisan untuk melihat overlay batas lapisan dan ubin di bagian atas halaman.
Lihat Batas lapisan.
Menemukan masalah performa scroll secara real time
Gunakan Masalah Performa Scroll untuk mengidentifikasi elemen halaman yang memiliki pemroses peristiwa terkait scroll yang dapat membahayakan performa halaman. DevTools menguraikan elemen yang berpotensi menimbulkan masalah dalam warna hijau kebiruan.
Lihat Masalah performa scroll.