Pengenalan kepada API Masa Sumber

API Masa Sumber: menyelam mendalam ke dalam pengukuran prestasi web

Artikel ini meneroka API Masa Sumber, alat yang berkuasa untuk mengumpul maklumat masa terperinci mengenai sumber yang dimuatkan oleh laman web. Memahami data ini adalah penting untuk mengoptimumkan prestasi laman web dan mengurangkan latensi pengguna.

Konsep Utama:

• Data masa yang komprehensif: API menyediakan maklumat masa granular untuk setiap sumber, jauh melebihi metrik peringkat tinggi. Ini membolehkan pengenalpastian tepat kesesakan prestasi.
• Akses melalui window.performance: API diakses melalui sifat performance objek window, menggunakan kaedah getEntriesByType() dengan argumen 'sumber'.
• PerformanceResourceTiming Objek: Kaedah getEntriesByType() mengembalikan pelbagai objek PerformanceResourceTiming, masing -masing memperincikan proses pemuatan sumber tunggal.
• Sokongan pelayar luas: API menikmati sokongan yang baik di seluruh pelayar utama (Chrome, Internet Explorer, Opera, dan lain -lain). Walau bagaimanapun, pengesahan sokongan diperlukan.
• Pertimbangan sumber pihak ketiga: Walaupun API berfungsi dengan sumber pihak pertama dan pihak ketiga, data masa terperinci untuk sumber pihak ketiga memerlukan pengepala HTTP . Tanpa itu, hanya jumlah tempoh yang tersedia. Timing-Allow-Origin: *

Memahami data:

menyediakan banyak atribut, termasuk: PerformanceResourceTiming

• : URL sumber. name
• : Masa sebelum penyemak imbas mula mengambil sumber. startTime
• : Jumlah masa yang diambil untuk memuatkan sumber. duration
• : Menunjukkan elemen yang memulakan permintaan sumber (mis., initiatorType, img, script, css). xmlhttprequest
atribut lain yang terperinci tahap khusus:
• , redirectStart, redirectEnd, fetchStart, domainLookupStart, domainLookupEnd, connectStart, connectEnd, secureConnectionStart, requestStart, responseStart. Perwakilan visual tahap masa ini ditunjukkan di bawah: responseEnd

Ujian untuk sokongan API memerlukan pemeriksaan untuk kewujudan window.performance dan window.performance.getEntriesByType(), dan mengesahkan bahawa window.performance.getEntriesByType('resource') mengembalikan array. Coretan kod mudah untuk cek ini ialah:

if (!('performance' in window) ||
    !('getEntriesByType' in window.performance) ||
    !(window.performance.getEntriesByType('resource') instanceof Array)) {
    // API not supported
} else {
    // API supported
}

Atas ialah kandungan terperinci Pengenalan kepada API Masa Sumber. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!