performance timeline
1.0.0
Spesifikasi PerformanceTimeline mendefinisikan cara -cara di mana pengembang web dapat mengukur aspek spesifik dari aplikasi web mereka untuk membuatnya lebih cepat. Ini memperkenalkan dua cara utama untuk mendapatkan pengukuran ini: melalui metode pengambil dari antarmuka kinerja dan melalui antarmuka kinerjaobserver. Yang terakhir adalah cara yang disarankan untuk mengurangi dampak kinerja dari permintaan pengukuran ini.
Objek PerformanceEntry dapat meng -host data kinerja metrik tertentu. PerformanceEntry memiliki 4 atribut: name , entryType , startTime , dan duration . Spesifikasi ini tidak mendefinisikan objek Conembre PerformanceEntry. Contoh spesifikasi yang mendefinisikan jenis konkret baru dari objek CinampinyEntry adalah waktu cat, waktu pengguna, waktu sumber daya, dan waktu navigasi.
Antarmuka kinerja ditambah dengan tiga metode baru yang dapat mengembalikan daftar objek PerformanceEntry:
getEntries() : Mengembalikan semua entri yang tersedia untuk objek kinerja.getEntriesByType(type) : Mengembalikan semua entri yang tersedia untuk objek kinerja yang tipe entryType cocok.getEntriesByName(name, type) : Mengembalikan semua entri yang tersedia untuk objek Kinerja yang name cocok dengan nama . Jika tipe parameter opsional ditentukan, ia hanya mengembalikan entri yang jenis entryType cocok. Contoh berikut menunjukkan bagaimana getEntriesByName() dapat digunakan untuk mendapatkan informasi cat pertama:
// Returns the FirstContentfulPaint entry, or null if it does not exist.
function getFirstContentfulPaint ( ) {
// We want the entry whose name is "first-contentful-paint" and whose entryType is "paint".
// The getter methods all return arrays of entries.
const list = performance . getEntriesByName ( "first-contentful-paint" , "paint" ) ;
// If we found the entry, then our list should actually be of length 1,
// so return the first entry in the list.
if ( list . length > 0 )
return list [ 0 ] ;
// Otherwise, the entry is not there, so return null.
else
return null ;
} Objek PerformanceoBServer dapat memberi tahu objek Kinerja baru, sesuai dengan nilai entryType mereka. Konstruktor objek harus menerima panggilan balik, yang akan dijalankan setiap kali agen pengguna mengirimkan entri baru yang nilai entryType cocok dengan salah satu yang diamati oleh pengamat. Panggilan balik ini tidak dijalankan sekali per kinerja atau segera setelah penciptaan PerformanceEntry. Sebaliknya, entri 'antri' di PerformanceoBServer, dan agen pengguna dapat menjalankan panggilan balik nanti. Ketika callback dieksekusi, semua entri yang antri diteruskan ke fungsi, dan antrian untuk performanceObserver diatur ulang. PerformanceoBServer awalnya tidak mengamati apa pun: metode observe() harus dipanggil untuk menentukan jenis objek yang ada di mana harus diamati. Metode observe() dapat dipanggil dengan array 'entriTypes' atau dengan string 'tipe' tunggal, seperti yang dirinci di bawah ini. Mode -mode itu tidak dapat dicampur, atau pengecualian akan dilemparkan.
Callback diteruskan ke PerformanceObserver pada konstruksi adalah PerformanceObserverCallback . Ini adalah callback void dengan parameter berikut:
entries : Objek PerformanceObserverEntryList yang berisi daftar entri yang dikirim dalam panggilan balik.observer : Objek PerformanceObserver yang menerima entri di atas.hasDroppedEntries : boolean yang menunjukkan apakah observer saat ini mengamati entryType yang setidaknya satu entri telah hilang karena buffer yang sesuai dipenuhi. Lihat bagian Bendera Buffered. supportedEntryTypes Static PerformanceObserver.supportedEntryTypes Mengembalikan array dari nilai entryType yang didukung oleh agen pengguna, diurutkan dalam urutan abjad. Ini dapat digunakan untuk mendeteksi dukungan untuk jenis tertentu.
observe(entryTypes) Dalam hal ini, PerformanceoBServer dapat menentukan berbagai nilai entryTypes dengan satu panggilan untuk observe() . Namun, tidak ada parameter tambahan yang diizinkan dalam kasus ini. Panggilan observe() Multiple akan mengesampingkan jenis objek yang diamati. Contoh panggilan: observer.observe({entryTypes: ['resource', 'navigation']}) .
observe(type) Dalam hal ini, PerformanceoBServer hanya dapat menentukan satu jenis per panggilan ke metode observe() . Parameter tambahan diizinkan dalam kasus ini. Multiple observe() panggilan akan menumpuk, kecuali panggilan untuk mengamati type yang sama telah dilakukan di masa lalu, dalam hal ini akan mengganti. Contoh panggilan: observer.observe({type: "mark"}) .
buffered Salah satu parameter yang dapat digunakan dengan observe(type) didefinisikan dalam spesifikasi ini: bendera buffered , yang tidak disetel secara default. Ketika bendera ini ditetapkan, agen pengguna mengirimkan mencatat bahwa ia telah buffer sebelum kreasi PerformanceoBserver, dan dengan demikian mereka diterima dalam panggilan balik pertama setelah panggilan observe() ini terjadi. Ini memungkinkan pengembang web untuk mendaftarkan kinerja yang lebih besar ketika lebih mudah untuk melakukannya tanpa kehilangan entri yang dikirim lebih awal selama pemuatan halaman. Contoh panggilan menggunakan bendera ini: observer.observe({type: "measure", buffered: true}) .
Setiap entryType memiliki karakteristik khusus seputar buffering, dijelaskan dalam registri. Secara khusus, perhatikan bahwa ada batasan jumlah entri dari masing -masing jenis yang buffered. Ketika buffer entryType menjadi penuh, tidak ada entri baru yang disangga. PerformanceoBserver dapat meminta apakah suatu entri dijatuhkan (tidak buffered) karena buffer yang penuh melalui parameter hasDroppedEntry dari panggilan baliknya.
disconnect()Metode ini dapat dipanggil ketika PerformanceoBServer seharusnya tidak lagi diberitahu tentang entri lagi.
takeRecords() Metode ini mengembalikan daftar entri yang telah antri untuk PerformanceoBServer tetapi yang belum dijalankan oleh panggilan balik. Antrian entri juga dikosongkan untuk performanceoBserver. Ini dapat digunakan bersama -sama dengan disconnect() untuk memastikan bahwa semua entri hingga titik waktu tertentu diproses.
Contoh berikut mencatat semua waktu pengguna, entri waktu sumber daya dengan menggunakan performanceObserver yang ditandai dan diukur oleh pengamat.
// Helper to log a single entry.
function logEntry ( entry => {
const objDict = {
"entry type" : , entry . entryType ,
"name" : entry . name ,
"start time" : , entry . startTime ,
"duration" : entry . duration
} ;
console . log ( objDict ) ;
} ) ;
const userTimingObserver = new PerformanceObserver ( list => {
list . getEntries ( ) . forEach ( entry => {
logEntry ( entry ) ;
} ) ;
} ) ;
// Call to log all previous and future User Timing entries.
function logUserTiming ( ) {
if ( ! PerformanceObserver . supportedEntryTypes . includes ( "mark" ) ) {
console . log ( "Marks are not observable" ) ;
} else {
userTimingObserver . observe ( { type : "mark" , buffered : true } ) ;
}
if ( ! PerformanceObserver . supportedEntryTypes . includes ( "measure" ) ) {
console . log ( "Measures are not observable" ) ;
} else {
userTimingObserver . observe ( { type : "measure" , buffered : true } ) ;
}
}
// Call to stop logging entries.
function stopLoggingUserTiming ( ) {
userTimingObserver . disconnect ( ) ;
}
// Call to force logging queued entries immediately.
function flushLog ( ) {
userTimingObserver . takeRecords ( ) . forEach ( entry => {
logEntry ( entry ) ;
} ) ;
}
