Heim >Web-Frontend >js-Tutorial >So machen Sie Ihre Website mit der Performance -API schneller
Dieses Tutorial zeigt, wie Sie die Leistungs -API nutzen, um detaillierte Leistungsmetriken von echten Benutzern zu erfassen, die mit Ihrer Webanwendung interagieren. Während Browser Devtools Performance-Erkenntnisse bieten, spiegeln sie nicht genau die vielfältigen realen Bedingungen wider, die Benutzer über verschiedene Geräte, Standorte und Netzwerkverbindungen erfahren.
Schlüsselvorteile der Leistungs -API:
Verständnis der Leistungs -API:
Die Performance -API verwendet einen Puffer, um Leistungsmetriken als Objekte in den wichtigsten Phasen des Lebenszyklus einer Webseite zu speichern:
API -Unterstützung kann überprüft werden mit:
<code class="language-javascript">if ('performance' in window) { // Use Performance APIs }</code>
Hinweis: Die Unterstützung von Safari für alle Methoden ist trotz der meisten APIs nicht vollständig. (erfordert ). perf_hooks
--allow-hrtime
: Date()
Während
Date()
Client-Seite-Leistungsdaten benötigen ein Ziel. Sie können diese Daten mithilfe von AJAX, Fetch, XMLHTTPrequest oder der Beacon -API an Ihren Server zur Analyse senden. Viele Analyseplattformen bieten auch benutzerdefinierte Ereignis -APIs für die Aufzeichnungszeit (z. B. Google Analytics User Timings API). Page Navigation Timing: Tests an schnellen Verbindungen spiegeln die Real-User-Erfahrungen nicht wider. Die Navigations -Timing -API enthält ein Zugriff dieses Objekt mit: oder Beide geben ein Array mit einem einzelnen Objekt zurück, das nur schreibgeschützte Eigenschaften enthält (z. B. Page -Ressourcen -Timing: Die Ressourcen -Timing -API enthält Dies gibt ein Array von Objekten zurück, von denen jeweils zeitliche Eigenschaften ähnlich dem Navigationszeitpunkt, jedoch ohne Navigations- und DOM -Ereignisdaten ähneln. Auf individuelle Ressourcen kann mit Beispiel: Analyse der Ladezeiten und -größen der CSS -Datei: Browserfarbe Timing: Die Lack -Timing -API enthält Benutzer Timing (benutzerdefinierte Metriken): Die Leistungs -API ermöglicht benutzerdefinierte Zeitpunkte von Anwendungsfunktionen mit Selbstprofilierende API:
Schlussfolgerung:
PerformanceNavigationTiming
-Objekt, das detaillierte Informationen zu Umleitungen, Ladezeiten, Dateigrößen, DOM -Ereignissen und mehr enthält, wie vom Benutzer beobachtet. <code class="language-javascript">if ('performance' in window) {
// Use Performance APIs
}</code>
<code class="language-javascript">const pagePerf = performance.getEntriesByType('navigation');</code>
startTime
, duration
, domComplete
, verschiedene Zeitmetriken). PerformanceResourceTiming
Objekte für jeden geladenen Asset (Bilder, CSS, Skripte usw.). Verwendung: <code class="language-javascript">const pagePerf = performance.getEntriesByName(window.location);</code>
getEntriesByName()
zugegriffen werden. <code class="language-javascript">const resPerf = performance.getEntriesByType('resource');</code>
PerformancePaintTiming
Objekte für first-paint
und first-contentful-paint
entscheidend für die Bewertung der wahrgenommenen Leistung. Greifen Sie mit: <code class="language-javascript">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'
}));</code>
performance.now()
, .mark()
und .measure()
. performance.now()
bietet hochauflösende Zeitstempel. .mark()
erstellt benannte Marker im Leistungspuffer und berechnet die Dauer zwischen Markern. .measure()
ermöglicht eine asynchrone Beobachtung von Leistungseinträgen. PerformanceObserver
Das obige ist der detaillierte Inhalt vonSo machen Sie Ihre Website mit der Performance -API schneller. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!