react perf devtool
vtool
Mencari pengelola
Devtool untuk memeriksa kinerja komponen reaksi
Perkenalan
Demo
Penggunaan
Memasang
Penggunaan
Keterangan
Fase
Pelaksanaan
Berkontribusi
Lisensi
React Performance DevTool adalah ekstensi browser untuk memeriksa kinerja komponen React. Secara statistik meneliti kinerja komponen reaksi berdasarkan pada langkah -langkah yang dikumpulkan dengan bereaksi menggunakan window.performance API.
Seiring dengan ekstensi browser, langkah -langkah tersebut juga dapat diperiksa di konsol. Lihat bagian Penggunaan untuk lebih jelasnya.
Proyek ini dimulai dengan tujuan memperluas pekerjaan yang dilakukan oleh Will Chen pada proposal untuk Tabel Kinerja React. Anda dapat membaca lebih lanjut tentang itu di sini.
Demo ekstensi yang digunakan untuk memeriksa kinerja komponen React di situs web saya.
Ukuran kinerja juga dapat dicatat ke konsol. Dengan setiap render ulang, langkah-langkah diperbarui dan dicatat ke konsol.
Hapus atau lepaskan instance komponen yang tidak digunakan.
Periksa apa yang memblokir atau mengambil lebih banyak waktu setelah operasi dimulai.
Periksa tabel dan lihat komponen mana, Anda perlu menulis harus componentupdate hook siklus hidup.
Periksa komponen mana yang membutuhkan lebih banyak waktu untuk memuat.
Untuk menggunakan DevTool ini, Anda harus menginstal modul NPM yang akan mendaftarkan pendengar (baca lebih lanjut tentang ini di bagian penggunaan) dan ekstensi browser.
Menginstal ekstensi
Ekstensi di bawah ini mewakili rilis stabil saat ini.
Menginstal Modul NPM
npm install react-perf-devtool
Build umd juga tersedia melalui UNPKG
< script crossorigin src = "https://unpkg.com/[email protected]/lib/npm/hook.js" > </ script >Ekstensi dan paket ini juga tergantung pada React. Pastikan Anda telah diinstal juga.
Catatan - Modul NPM penting dan diperlukan untuk menggunakan DevTool. Jadi pastikan Anda menginstalnya sebelum menggunakan ekstensi browser.
Bagian dokumentasi ini menjelaskan penggunaan DevTool dan API untuk mendaftarkan pengamat di aplikasi React.
react-perf-devtool bergantung pada window.PerformanceObserver asli. PerformanceObserver API yang ditambahkan dalam Chrome V52 dan Firefox V57 . Untuk informasi lebih lanjut, lihat Mozilla Docs resmi di sini.
Untuk menggunakan ekstensi DevTool ini, Anda harus mendaftarkan pengamat di aplikasi Anda yang akan mengamati kumpulan data (ukuran kinerja) selama beberapa waktu.
Daftar pengamat
Mendaftarkan pengamat sangat sederhana dan hanya satu fungsi panggilan. Mari kita lihat caranya!
const { registerObserver } = require ( 'react-perf-devtool' )
// assign the observer to the global scope, as the GC will delete it otherwise
window . observer = registerObserver ( ) Anda dapat menempatkan kode ini di dalam file index.js Anda (disarankan) atau file lain di aplikasi Anda.
Catatan - Ini hanya boleh digunakan dalam mode pengembangan ketika Anda perlu memeriksa kinerja komponen reaksi. Pastikan untuk menghapusnya saat membangun untuk produksi.
Mendaftarkan pengamat mengaitkan objek yang berisi informasi tentang peristiwa dan ukuran kinerja komponen reaksi ke objek jendela, yang kemudian dapat diakses di dalam jendela yang diinspeksi menggunakan eval ().
Dengan setiap render ulang, objek ini diperbarui dengan langkah-langkah dan acara baru diperhitungkan. Ekstensi menangani membersihkan memori dan juga cache.
Anda juga dapat melewati objek option dan callback opsional yang menerima argumen yang berisi langkah -langkah yang diuraikan dan dikumpulkan
Menggunakan panggilan balik
Panggilan balik opsional juga dapat diteruskan ke registerObserver yang menerima langkah -langkah parsed sebagai argumennya.
Anda dapat menggunakan panggilan balik ini untuk memeriksa langkah -langkah yang diuraikan dan dikumpulkan, atau Anda dapat mengintegrasikannya dengan kasus penggunaan lainnya. Anda juga dapat memanfaatkan langkah -langkah kinerja ini menggunakan Google Analytics dengan mengirimkan langkah -langkah ini ke dasbor analitik. Proses ini didokumentasikan di sini.
Contoh -
const { registerObserver } = require ( 'react-perf-devtool' )
function callback ( measures ) {
// do something with the measures
}
// assign the observer to the global scope, as the GC will delete it otherwise
window . observer = registerObserver ( { } , callback ) Setelah Anda mendaftarkan pengamat, mulai server pengembangan lokal Anda dan pergi ke http://localhost:3000/ .
CATATAN - Ekstensi ini hanya berfungsi untuk versi bereaksi 16 atau di atasnya.
Setelah Anda menginstal ekstensi dengan sukses, Anda akan melihat tab yang disebut React Performance di Chrome Developer Tools.
Ukuran kinerja juga dapat dicatat ke konsol. Namun, proses pencetakan tindakan tidak langsung. Anda harus mengatur server yang akan mendengarkan langkah -langkah tersebut. Untuk ini, Anda dapat menggunakan Micro oleh Zeit yang merupakan HTTP Microservice.
npm install --save micro
Anda dapat meneruskan objek opsi sebagai argumen untuk registerObserver untuk mengaktifkan penebangan dan mengatur nomor port.
Menggunakan Objek Opsi
{
shouldLog : boolean , // default value: false
port : number // default value: 8080
timeout : number // default value: 2000
} Anda dapat meneruskan tiga properti ke objek option , shouldLog dan port .
shouldLog - Dibutuhkan nilai boolean . Jika diatur ke True, langkah -langkah akan dicatat ke konsol.
port - Nomor port untuk server di mana tindakan akan dikirim
timeout - Nilai batas waktu untuk menunda inisialisasi ekstensi.
Jika aplikasi Anda membutuhkan waktu untuk memuat, lebih baik untuk menunda inisialisasi ekstensi dengan menentukan nilai batas waktu melalui properti timeout . Ini memastikan bahwa ekstensi akan dimuat hanya setelah aplikasi Anda dimuat dengan benar di browser sehingga tindakan yang diperbarui dapat diberikan. Namun, Anda dapat melewatkan properti ini jika aplikasi Anda dalam ukuran kecil.
Contoh
// index.js file in your React App
const React = require ( 'react' )
const ReactDOM = require ( 'react-dom' )
const { registerObserver } = require ( 'react-perf-devtool' )
const Component = require ( './Component' ) // Some React Component
const options = {
shouldLog : true ,
port : 8080 ,
timeout : 12000 // Load the extension after 12 sec.
}
function callback ( measures ) {
// do something with the measures
}
// assign the observer to the global scope, as the GC will delete it otherwise
window . observer = registerObserver ( options , callback )
ReactDOM . render ( < Component /> , document . getElementById ( 'root' ) ) // server.js
const { json } = require ( 'micro' )
module . exports = async req => {
console . log ( await json ( req ) )
return 200
} // package.json
{
"main" : "server.js" ,
"scripts" : {
"start-micro" : "micro -p 8080"
}
}Skema tindakan
Di bawah ini adalah skema dari ukuran kinerja yang dicatat ke konsol.
{
componentName ,
mount : { // Mount time
averageTimeSpentMs ,
numberOfTimes ,
totalTimeSpentMs ,
} ,
render : { // Render time
averageTimeSpentMs ,
numberOfTimes ,
totalTimeSpentMs ,
} ,
update : { // Update time
averageTimeSpentMs ,
numberOfTimes ,
totalTimeSpentMs ,
} ,
unmount : { // Unmount time
averageTimeSpentMs ,
numberOfTimes ,
totalTimeSpentMs ,
} ,
totalTimeSpent , // Total time taken by the component combining all the phases
percentTimeSpent , // Percent time
numberOfInstances , // Number of instances of the component
// Time taken in lifecycle hooks
componentWillMount : {
averageTimeSpentMs ,
numberOfTimes ,
totalTimeSpentMs ,
}
componentDidMount: {
averageTimeSpentMs ,
numberOfTimes ,
totalTimeSpentMs ,
}
componentWillReceiveProps : {
averageTimeSpentMs ,
numberOfTimes ,
totalTimeSpentMs ,
} ,
shouldComponentUpdate : {
averageTimeSpentMs ,
numberOfTimes ,
totalTimeSpentMs ,
} ,
componentWillUpdate : {
averageTimeSpentMs ,
numberOfTimes ,
totalTimeSpentMs ,
} ,
componentDidUpdate : {
averageTimeSpentMs ,
numberOfTimes ,
totalTimeSpentMs ,
} ,
componentWillUnmount : {
averageTimeSpentMs ,
numberOfTimes ,
totalTimeSpentMs ,
}
}komponen
Anda juga dapat memeriksa kinerja komponen spesifik menggunakan opsi melalui properti components .
Contoh -
const options = {
shouldLog : true ,
port : 3000 ,
components : [ 'App' , 'Main' ] // Assuming you've these components in your project
}
function callback ( measures ) {
// do something with measures
}
// assign the observer to the global scope, as the GC will delete it otherwise
window . observer = registerObserver ( options , callback ) Bagian Ikhtisar mewakili ikhtisar total waktu (%) yang diambil oleh semua komponen dalam aplikasi Anda.
Waktu yang diambil oleh semua komponen - menunjukkan waktu yang dibutuhkan oleh semua komponen (menggabungkan semua fase).
Durasi waktu untuk melakukan perubahan - menunjukkan waktu yang dihabiskan untuk melakukan perubahan. Baca lebih lanjut tentang ini di sini
Durasi waktu untuk melakukan efek host - menunjukkan waktu yang dihabiskan untuk melakukan efek host yaitu berkomitmen ketika pohon baru dimasukkan (pembaruan) dan tidak. efek inang (jumlah efek dalam komit).
Durasi Waktu untuk Memanggil Metode Siklus Hidup - melaporkan durasi waktu panggilan siklus hidup dan total tidak ada metode yang dipanggil, ketika siklus hidup menjadwalkan pembaruan cascading.
Total waktu
CLEAR - Tombol Clear menghapus langkah -langkah dari tabel dan juga menyeka hasilnya.
Muat Ulang Jendela yang Diinspeksi - Tombol ini memuat ulang jendela yang diperiksa dan menampilkan langkah -langkah baru.
Peristiwa yang tertunda - Ini menunjukkan langkah -langkah yang tertunda (React Performance Data).
Bagian ini menunjukkan waktu yang dibutuhkan oleh komponen dalam fase, jumlah contoh komponen dan total waktu yang menggabungkan semua fase dalam MS dan %
Diberikan di bawah ini adalah fase berbeda yang bereaksi mengukur kinerja:
React Tree Reconsiliation - Dalam fase ini, bereaksi membuat simpul akar dan membuat karya dalam kemajuan serat. Jika ada beberapa pembaruan yang mengalir saat mendamaikan, itu akan menghentikan pengukuran aktif apa pun dan akan melanjutkannya dalam loop yang ditangguhkan. Ini disebabkan ketika pembaruan tingkat atas mengganggu render sebelumnya. Jika kesalahan dilemparkan selama fase render maka ia menangkap kesalahan dengan menemukan batas kesalahan terdekat atau menggunakan root jika tidak ada batas kesalahan.
Perubahan Komit - Dalam fase ini, pekerjaan yang selesai dilakukan. Juga, ia memeriksa apakah simpul root memiliki efek samping. Jika memiliki efek maka tambahkan ke daftar (baca lebih lanjut struktur data daftar ini di sini) atau lakukan semua efek samping di pohon. Jika ada pembaruan yang dijadwalkan dalam komit saat ini, maka itu memberikan peringatan tentang pembaruan cascading di Lifecycle Hook . Selama fase komit, pembaruan dijadwalkan dalam komit saat ini. Selain itu, pembaruan dijadwalkan jika fase/tahap bukan komponenwillmount atau komponenwillreceiveProps.
Komit Efek Host - Efek inang dilakukan setiap kali pohon baru dimasukkan. Dengan setiap pembaruan baru yang dijadwalkan, total efek host dihitung. Proses ini dilakukan dalam dua fase, fase pertama melakukan semua penyisipan simpul host, penghapusan, pembaruan dan Ref unmounts dan fase lainnya melakukan semua siklus hidup dan callback ref.
Siklus hidup berkomitmen - Ketika umpan pertama selesai saat melakukan efek inang, pekerjaan dalam kemajuan pohon menjadi pohon saat ini. Jadi pekerjaan yang sedang berjalan adalah saat ini selama ComponentDidMount/Update . Dalam fase ini, semua siklus hidup dan panggilan balik REF berkomitmen. Melakukan siklus hidup terjadi sebagai izin terpisah sehingga semua penempatan, pembaruan, dan penghapusan di seluruh pohon telah dipanggil .
Dalam versi sebelumnya dari DevTool ini, metrik kinerja ditanya alih -alih mendengarkan jenis acara. Ini diperlukan untuk mengomentari baris di dalam paket react-dom ( react-dom.development.js ) sehingga metrik ini dapat ditangkap oleh alat ini.
Tetapi sekarang, dengan bantuan API Pengamat Kinerja, seorang pengamat dapat didaftarkan untuk mendengarkan peristiwa jenis tertentu dan mendapatkan entri (ukuran kinerja). react-perf-devtool menyediakan API di atas pengamat kinerja, fungsi yang mendaftarkan pengamat.
const { registerObserver } = require ( 'react-perf-devtool' )
// assign the observer to the global scope, as the GC will delete it otherwise
window . observer = registerObserver ( )Pengamat ini mendengarkan peristiwa pengukuran kinerja React. Ini mengaitkan objek yang berisi informasi tentang peristiwa dan ukuran kinerja komponen reaksi ke objek jendela yang kemudian dapat diakses di dalam jendela yang diinspeksi menggunakan eval ().
Dengan setiap render ulang, objek ini diperbarui dengan langkah-langkah dan acara baru diperhitungkan. Ekstensi menangani membersihkan memori dan juga cache.
Objek option dan callback opsional juga dapat diteruskan ke registerObserver . Objek option berguna ketika ukuran kinerja harus dicatat ke konsol. callback menerima hasil yang diuraikan dan agregat (metrik) sebagai argumennya yang kemudian dapat digunakan untuk analisis.
Menghitung dan mengumpulkan hasil terjadi di dalam bingkai aplikasi dan tidak di Devtool. Itu memiliki manfaatnya sendiri.
Baca panduan yang berkontribusi
Mit
