Cara menjadikan laman web anda lebih cepat dengan API Prestasi

Tutorial ini menunjukkan cara memanfaatkan API Prestasi untuk menangkap metrik prestasi terperinci dari pengguna sebenar yang berinteraksi dengan aplikasi web anda. Walaupun penyemak imbas DevTools menawarkan pandangan prestasi, mereka tidak mencerminkan pengalaman pengguna yang pelbagai dunia dalam pelbagai peranti, lokasi, dan sambungan rangkaian.

Manfaat utama API Prestasi:

• ketepatan dunia nyata: API Prestasi memberikan gambaran prestasi aplikasi yang jauh lebih realistik berbanding dengan ujian DevTools yang terpencil.
• Metrik Komprehensif: Ia menangkap metrik sepanjang kitaran hayat halaman, termasuk navigasi, pemuatan sumber, rendering, dan masa pelaksanaan logik aplikasi tersuai. Masa resolusi tinggi:
Menggunakan pemasa resolusi tinggi, ia mencatatkan masa ke pecahan milisaat, menangkap butiran seperti redirect dan dns carian masa, mustahil dengan pemasa standard.
• Pengukuran yang disesuaikan: membenarkan masa yang tepat fungsi aplikasi anda, berfungsi dengan lancar di seluruh klien JavaScript, pekerja web, DENO, dan Node.js.
• Analisis Cross-Platform: Membolehkan pengukuran prestasi pada peranti dan rangkaian pengguna sebenar, memudahkan pengenalpastian kesesakan dan pengoptimuman prestasi.
• Memahami API Prestasi:

API Prestasi menggunakan penampan untuk menyimpan metrik prestasi sebagai objek pada peringkat utama kitaran hayat laman web:

Navigasi halaman:

Rekod Redirects, Sambungan, Jabat tangan, dan Acara DOM.

1. Memuatkan sumber: menjejaki masa pemuatan aset seperti imej, CSS, skrip, dan panggilan Ajax.
2. metrik cat: menangkap maklumat penyebaran penyemak imbas (mis., Cat contentful pertama).
3. Prestasi tersuai: membolehkan pengukuran masa pemprosesan aplikasi sewenang -wenang untuk menentukan fungsi perlahan.
4. Sokongan API boleh diperiksa dengan:

Nota: Sokongan Safari untuk semua kaedah tidak lengkap, walaupun melaksanakan majoriti API. (memerlukan

).

if ('performance' in window) {
  // Use Performance APIs
}

Beyond : perf_hooks --allow-hrtime

Walaupun

dapat mengukur masa berlalu, ketepatan milisaat dan pergantungan pada masa sistem (terdedah kepada pelarasan OS) mengehadkan ketepatannya. Pemasa resolusi tinggi API dan metrik tambahan (seperti redirect dan dns kali) memberikan perincian yang lebih baik. Date() Metrik Rakaman dan Pelaporan:

Data prestasi pihak klien memerlukan destinasi. Anda boleh menghantar data ini ke pelayan anda untuk analisis menggunakan AJAX, FETCH, XMLHTTPREQUEST, atau API Beacon. Banyak platform analisis juga menawarkan API acara tersuai untuk merakam masa (mis., Google Analytics Pengguna Pengguna API).

PAGE PAGE TIMING:

Ujian pada sambungan pantas tidak mencerminkan pengalaman pengguna sebenar. API masa navigasi menyediakan objek PerformanceNavigationTiming yang mengandungi maklumat terperinci mengenai pengalihan, masa beban, saiz fail, peristiwa DOM, dan banyak lagi, seperti yang diperhatikan oleh pengguna.

Akses objek ini menggunakan:

if ('performance' in window) {
  // Use Performance APIs
}

atau

const pagePerf = performance.getEntriesByType('navigation');

kedua-duanya mengembalikan array dengan objek tunggal yang mengandungi sifat baca sahaja (mis., startTime, duration, domComplete, pelbagai metrik masa).

PAGE PAGE PAGE PAGHT: API pemasaan sumber menyediakan

objek untuk setiap aset yang dimuatkan (imej, CSS, skrip, dan lain -lain). Gunakan:

PerformanceResourceTiming

Ini mengembalikan pelbagai objek, masing -masing dengan sifat masa yang serupa dengan masa navigasi, tetapi tanpa data navigasi dan data DOM. Sumber individu boleh diakses menggunakan

const pagePerf = performance.getEntriesByName(window.location);

.

getEntriesByName() Contoh: Menganalisis masa dan saiz beban fail CSS:

const resPerf = performance.getEntriesByType('resource');

Masa cat pelayar:

API Masa Cat menyediakan

objek untuk

dan PerformancePaintTiming, penting untuk menilai prestasi yang dirasakan. Akses mereka dengan: first-paint first-contentful-paint

Masa pengguna (metrik tersuai):

const css = performance.getEntriesByType('resource')
  .filter(r => r.initiatorType === 'link' && r.name.includes('.css'))
  .map(r => ({
    name: r.name,
    load: r.duration + 'ms',
    size: r.decodedBodySize + 'bytes'
  }));

API Prestasi membolehkan masa adat fungsi aplikasi menggunakan ,

, dan

. performance.now() Menyediakan cap waktu resolusi tinggi. .mark() mencipta penanda bernama dalam penampan prestasi, dan .measure() mengira tempoh antara penanda. performance.now() membolehkan pemerhatian asynchronous penyertaan prestasi. .mark() .measure() PerformanceObserver API sendiri Profil:

API yang berpengalaman sendiri (masih dalam pembangunan) memudahkan analisis prestasi dengan melaksanakan secara automatik, mengenal pasti kemungkinan kesesakan tanpa penempatan penanda manual.

Kesimpulan:

API Prestasi memberi kuasa kepada pemaju untuk mengukur dengan tepat dan meningkatkan prestasi aplikasi web berdasarkan data pengguna sebenar, membolehkan pengoptimuman yang disasarkan dan pengalaman pengguna yang unggul. Ingatlah untuk berunding dengan dokumentasi terperinci untuk maklumat yang paling terkini dan butiran harta tertentu.

Atas ialah kandungan terperinci Cara menjadikan laman web anda lebih cepat dengan API Prestasi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!