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:

• Genauigkeit der realen Welt: Die Leistungs-API bietet ein weitaus realistischeres Bild der Anwendungsleistung im Vergleich zu isolierten Devtools-Tests.
• umfassende Metriken: Es erfasst Metriken während des gesamten Seitenlebenszyklus, einschließlich Navigation, Ressourcenbelastung, Rendern und benutzerdefinierten Anwendungslogikausführungszeiten.
• Hochauflösendes Timing: Verwenden eines hochauflösenden Timers zeichnet die Timings auf Brüche einer Millisekunde fest, wobei Details wie Umleitungs- und DNS-Suchzeiten erfasst werden, unmöglich mit Standardtimern.
• Anpassbare Messung: Ermöglicht eine präzise Zeitung der Funktionen Ihrer Anwendung und arbeitet nahtlos über clientseitige JavaScript, Webarbeiter, Deno und Node.js.
• plattformübergreifende Analyse: Ermöglicht die Leistungsmessung auf tatsächlichen Benutzergeräten und -netzwerken, Vereinfachung der Identifizierung und Leistungsoptimierung der Engpässe.

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:

1. Seitennavigation: Datensätze Umleitungen, Verbindungen, Handshakes und DOM -Ereignisse.
2. Ressource Laden: verfolgt die Ladezeiten von Assets wie Bildern, CSS, Skripten und Ajax -Aufrufen.
3. Farbmetriken: erfasst die Browser -Rendering -Informationen (z. B. erste inhaltliche Farbe).
4. benutzerdefinierte Leistung: Ermöglicht die Messung beliebiger Anwendungsverarbeitungszeiten, um langsame Funktionen zu bestimmen.

API -Unterstützung kann überprüft werden mit:

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

Hinweis: Die Unterstützung von Safari für alle Methoden ist trotz der meisten APIs nicht vollständig. (erfordert ). perf_hooks --allow-hrtime

jenseits

: Date() Während

die verstrichene Zeit messen kann, begrenzt seine Millisekunden -Präzision und Vertrauen in die Systemzeit (anfällig für OS -Anpassungen) deren Genauigkeit. Der hochauflösende Timer der Performance-API und zusätzliche Metriken (wie Umleitung und DNS-Zeiten) liefern überlegene Details.

Date()

Aufzeichnungs- und Berichterstattungsmetriken:

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 PerformanceNavigationTiming -Objekt, das detaillierte Informationen zu Umleitungen, Ladezeiten, Dateigrößen, DOM -Ereignissen und mehr enthält, wie vom Benutzer beobachtet.

Zugriff dieses Objekt mit:

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

oder

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

Beide geben ein Array mit einem einzelnen Objekt zurück, das nur schreibgeschützte Eigenschaften enthält (z. B. startTime, duration, domComplete, verschiedene Zeitmetriken).

Page -Ressourcen -Timing:

Die Ressourcen -Timing -API enthält PerformanceResourceTiming Objekte für jeden geladenen Asset (Bilder, CSS, Skripte usw.). Verwendung:

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

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 getEntriesByName() zugegriffen werden.

Beispiel: Analyse der Ladezeiten und -größen der CSS -Datei:

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

Browserfarbe Timing:

Die Lack -Timing -API enthält PerformancePaintTiming Objekte für first-paint und first-contentful-paint entscheidend für die Bewertung der wahrgenommenen Leistung. Greifen Sie mit:

auf sie zu

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'
  }));

Benutzer Timing (benutzerdefinierte Metriken):

Die Leistungs -API ermöglicht benutzerdefinierte Zeitpunkte von Anwendungsfunktionen mit 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

Selbstprofilierende API:

Die selbstprofilierende API (noch in der Entwicklung) vereinfacht die Leistungsanalyse durch automatische Abtastung der Ausführung und identifiziert potenzielle Engpässe ohne manuelle Markierungsplatzierung.

Schlussfolgerung:

Die Leistungs-API ermöglicht Entwickler, die Leistung von Webanwendungen auf der Grundlage von Real-User-Daten genau zu messen und zu verbessern, wodurch gezielte Optimierung und eine überlegene Benutzererfahrung ermöglicht werden. Denken Sie daran, die detaillierte Dokumentation für die aktuellsten Informationen und spezifischen Eigenschaftendetails zu konsultieren.

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!