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:

setiap objek

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

Penggunaan API dan Keserasian Pelayar:

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
}

Demo asas yang mempamerkan fungsi API boleh dibuat dengan memuatkan sumber (mis., Imej dan skrip) dan kemudian, pada beban halaman, meleleh melalui objek PerformanceResourceTiming untuk memaparkan data yang dikumpulkan.

Kesimpulan:

API masa sumber menawarkan mekanisme yang mantap untuk analisis prestasi terperinci. Dengan mengenal pasti kesesakan dalam pemuatan sumber, pemaju dapat meningkatkan kelajuan laman web dan pengalaman pengguna dengan ketara. Walaupun sokongan penyemak imbas pada umumnya baik, sangat penting untuk menguji keserasian sebelum bergantung pada API ini. Batasan mengenai sumber pihak ketiga juga harus dipertimbangkan.

Soalan Lazim (Soalan Lazim):

Seksyen Soalan Lazim dari teks asal masih tidak berubah dan memberikan maklumat tambahan yang berharga. Adalah disyorkan untuk memasukkannya di sini untuk kesempurnaan. (Bahagian FAQS terlalu lama untuk menghasilkan semula di sini, tetapi ia harus disalin terus dari teks input.)

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