Halaman profil dimuat dengan API Masa Navigasi

analisis mendalam mengenai prestasi pemuatan laman web: Penjelasan terperinci mengenai API masa navigasi

mata teras

API Masa Navigasi menyediakan maklumat masa terperinci semasa memuatkan laman web, termasuk Lookup DNS, penubuhan sambungan TCP, pengalihan halaman, masa pembinaan DOM dan petunjuk lain. Ia dibina ke dalam penyemak imbas dan tidak mempunyai overhead tambahan.
Pada masa ini, API masa navigasi hanya menyokong Internet Explorer 9, Firefox, dan Chrome. Oleh itu, sokongan penyemak imbas perlu dikesan sebelum menggunakan API. API ditakrifkan dalam objek
• . window.performance.timing API
merekodkan timestamps banyak peristiwa penting semasa proses pemuatan halaman, setiap acara disimpan sebagai harta objek
• . Jika peristiwa tidak berlaku, nilainya adalah sifar. API juga mentakrifkan antara muka yang menentukan bagaimana pengguna mengakses halaman tertentu. window.performance.timing
API pemasaan navigasi boleh digunakan bersempena dengan panggilan AJAX untuk melaporkan data pengguna sebenar kembali ke pelayan. Ini membolehkan pemaju memahami bagaimana halaman berkelakuan dalam persekitaran yang sebenar. Data ini juga boleh digunakan untuk membuat carta visual untuk proses pemuatan halaman.

Kelajuan pemuatan laman web adalah salah satu faktor utama yang mempengaruhi pengalaman pengguna. Kelajuan pemuatan perlahan boleh menggagalkan pengguna dan churn. Walau bagaimanapun, penyelesaian masalah penyebab pemuatan perlahan biasanya tidak mudah, kerana banyak faktor mempengaruhi masa pemuatan keseluruhan, seperti penyemak imbas pengguna, keadaan rangkaian, beban pelayan dan kod aplikasi, dll. Nasib baik, API masa navigasi dapat membantu kami menyelesaikan masalah ini.

Pada masa lalu, pemaju mempunyai akses yang sangat terhad kepada data yang dikumpulkan di kawasan ini. Ramai pemaju telah lama menggunakan objek JavaScript

untuk mengumpul data prestasi. Sebagai contoh, kod berikut mengukur masa pemuatan dengan membandingkan cap waktu selepas panggilan halaman handle handler panggilan: Date

<code class="language-javascript">var start = new Date();

window.addEventListener("load", function() {
  var elapsed = (new Date()).getTime() - start.getTime();
}, false);</code>

Terdapat beberapa masalah dengan kaedah ini: Pertama, ketepatan masa JavaScript terkenal tidak tinggi; Masa pelaksanaan selepas berjalan di penyemak imbas tidak dapat memberikan data mengenai proses pemuatan halaman seperti pelayan, rangkaian, dll.

Date Date debut API masa navigasi

Untuk menyediakan data pemuatan halaman yang lebih tepat dan komprehensif, W3C mencadangkan API masa navigasi. API ini menyediakan maklumat masa yang lebih terperinci semasa memuatkan halaman. Tidak seperti objek , API masa navigasi menyediakan data pengukuran yang berkaitan dengan carian DNS, penubuhan sambungan TCP, pengalihan halaman, masa membina dom, dan pelbagai metrik lain. Masa navigasi juga dibina ke dalam penyemak imbas, yang bermaksud tiada overhead tambahan ditanggung.

Date Sokongan penyemak imbas pengesanan

Pada masa ini, API masa navigasi hanya menyokong Internet Explorer 9, Firefox, dan Chrome. Oleh itu, sokongan penyemak imbas perlu dikesan sebelum menggunakan API. API ditakrifkan dalam objek window.performance.timing. Fungsi berikut mengesan sama ada API disokong:

<code class="language-javascript">var start = new Date();

window.addEventListener("load", function() {
  var elapsed = (new Date()).getTime() - start.getTime();
}, false);</code>

Peristiwa yang direkodkan

API merekodkan timestamps banyak peristiwa penting semasa memuatkan halaman. Setiap peristiwa disimpan sebagai atribut objek window.performance.timing. Senarai berikut menerangkan setiap acara. Jika peristiwa tidak berlaku (seperti pengalihan halaman), nilainya adalah sifar. (Nota: Mozilla mendakwa bahawa peristiwa -peristiwa ini berlaku dalam perintah ini.)

• navigationStart: Masa selepas penyemak imbas melengkapkan prompt untuk menyahpasang dokumen sebelumnya. Jika tidak ada dokumen terdahulu, navigationStart sama dengan fetchStart. Ini adalah permulaan masa pemuatan halaman yang dilihat oleh pengguna.
• fetchStart: saat sebelum penyemak imbas mula mencari URL. Proses carian melibatkan memeriksa cache aplikasi, atau meminta fail dari pelayan jika ia tidak di -cache.
• domainLookupStart: saat sebelum penyemak imbas mula mencari URL DNS. Jika carian DNS tidak diperlukan, nilai adalah sama seperti fetchStart.
• domainLookupEnd: Masa segera selepas carian DNS selesai. Jika carian DNS tidak diperlukan, nilai adalah sama seperti fetchStart.
• connectStart: Ketika penyemak imbas menyambung ke pelayan. Jika URL adalah cache atau sumber tempatan, nilai adalah sama dengan domainLookupEnd.
• connectEnd: Masa segera selepas mewujudkan sambungan dengan pelayan. Jika URL adalah cache atau sumber tempatan, nilainya adalah sama dengan domainLookupEnd.
• secureConnectionStart: Jika menggunakan protokol HTTPS, secureConnectionStart menetapkan masa segera sebelum permulaan jabat tangan yang selamat. Jika penyemak imbas tidak menyokong HTTPS, nilai ini harus undefined.
• requestStart: Masa segera sebelum penyemak imbas menghantar permintaan URL. API Undefined nilai. requestEnd
• : Masa permulaan url mengambil yang memulakan pengalihan semula. redirectStart
• : Jika ada pengalihan semula, redirectEnd mewakili masa selepas bait terakhir respons redirect terakhir yang diterima. redirectEnd
• : Masa segera selepas penyemak imbas menerima bait pertama respons. responseStart
• : Masa segera selepas penyemak imbas menerima bait terakhir respons. responseEnd
• : Masa segera sebelum peristiwa unloadEventStart dokumen terdahulu dicetuskan. Nilai ini adalah sifar jika tidak ada dokumen terdahulu, atau jika dokumen sebelumnya datang dari sumber yang berbeza. unload
• : Masa segera selepas peristiwa unloadEventEnd dokumen terdahulu dicetuskan. Nilai ini adalah sifar jika tidak ada dokumen terdahulu, atau jika dokumen sebelumnya datang dari sumber yang berbeza. Sekiranya terdapat pengalihan ke sumber yang berbeza, kedua -dua unload dan unloadEventStart adalah sifar. unloadEventEnd
• : domLoading Masa segera sebelum nilai ditetapkan untuk "memuatkan". document.readyState
• : domInteractive Masa segera sebelum nilai ditetapkan kepada "interaktif". document.readyState
• : Masa segera sebelum acara domcontentloaded dicetuskan. domContentLoadedEventStart
• : Masa segera selepas acara domcontentloaded dicetuskan.
• domComplete: document.readyState Masa segera sebelum nilai ditetapkan untuk "lengkap".
• loadEventStart: Masa segera sebelum peristiwa beban tetingkap dicetuskan. Sekiranya acara itu belum dipecat, nilai adalah sifar.
• loadEventEnd: Masa segera selepas peristiwa beban tetingkap dicetuskan. Sekiranya acara itu belum dipecat atau masih berjalan, nilai adalah sifar.

Jenis navigasi

API masa navigasi juga mentakrifkan antara muka untuk menentukan bagaimana pengguna mengakses halaman tertentu. Objek window.performance juga mengandungi objek navigation yang mengandungi dua sifat - type dan redirectCount. Hartanah type menyediakan cara bagi pengguna untuk menavigasi ke halaman semasa. Senarai berikut menerangkan nilai -nilai yang disimpan oleh type:

• Jika pengguna menavigasi ke halaman dengan menaip URL, mengklik pautan, mengemukakan borang, atau menggunakan tindakan skrip, nilai type adalah 0.
• Jika pengguna memuatkan semula/menyegarkan halaman, type sama dengan 1.
• Jika pengguna menavigasi ke halaman melalui sejarah (butang belakang atau ke hadapan), type sama dengan 2.
• untuk mana -mana kes lain, type sama dengan 255.

redirectCount Ciri -ciri mengandungi bilangan pengalihan yang telah dilayari ke halaman semasa. Jika tiada pengalihan berlaku, atau jika ada pengalihan datang dari sumber yang berbeza, redirectCount adalah sifar. Contoh berikut menunjukkan cara mengakses data navigasi:

<code class="language-javascript">var start = new Date();

window.addEventListener("load", function() {
  var elapsed = (new Date()).getTime() - start.getTime();
}, false);</code>

Interpretasi data

API masa navigasi boleh digunakan untuk mengira komponen masa pemuatan halaman tertentu. Sebagai contoh, masa yang diperlukan untuk melakukan carian DNS boleh dikira dengan menolak timing.domainLookupEnd dari timing.domainLookupStart. Contoh berikut mengira beberapa metrik berguna. "Usertime" sepadan dengan kelewatan pemuatan halaman jumlah pengalaman pengguna. Pembolehubah "DNS" dan "sambungan" mewakili masa yang diperlukan untuk melakukan carian DNS dan menyambung ke pelayan, masing -masing. "Requesttime" menyimpan jumlah masa yang dihantar ke pelayan dan menerima respons. Akhirnya, "Fetchtime" menyimpan jumlah masa untuk menyelesaikan pemerolehan dokumen (termasuk akses kepada sebarang cache, dll.). Ambil perhatian bahawa fungsi setTimeout() dipanggil dalam pengendali acara beban tetingkap. Ini memastikan bahawa data masa navigasi hanya digunakan ketika acara pemuatan selesai. Jika data masa diakses dari pengendali acara beban, nilai timing.loadEventEnd akan menjadi sifar.

<code class="language-javascript">function supportsNavigationTiming() {
  return !!(window.performance && window.performance.timing);
}</code>

API pemasaan navigasi boleh digunakan bersempena dengan panggilan AJAX untuk melaporkan data pengguna sebenar kembali ke pelayan. Ini berguna kerana ia membolehkan pemaju memahami bagaimana halaman berkelakuan dalam persekitaran yang sebenar. Data ini juga boleh digunakan untuk membuat carta visual untuk proses pemuatan halaman. Malah, Google Analytics telah memasukkan data masa navigasi dalam laporannya.

Mata Utama untuk Ingat

Objek JavaScript
• JavaScript tidak dapat mengukur data beban halaman dengan tepat kerana ia tidak mengetahui permintaan sebelum berjalan di penyemak imbas. Date
API masa navigasi dibina ke dalam penyemak imbas dan menyediakan pengukuran masa yang lebih terperinci.
API juga menjejaki bagaimana pengguna menavigasi ke halaman.
Data masa navigasi boleh dihantar ke pelayan untuk analisis.

(bahagian FAQ mengenai API masa navigasi boleh ditambah di sini, dan kandungannya boleh diekstrak dan ditulis semula dari dokumen asal yang diperlukan)

Atas ialah kandungan terperinci Halaman profil dimuat dengan API Masa Navigasi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!