Einführung in die Ressourcen -Timing -API

Ressourcen -Timing -API: Ein tiefes Eintauchen in die Messung der Webleistung

In diesem Artikel wird die Ressourcen -Timing -API untersucht, ein leistungsstarkes Tool zum Sammeln detaillierter Timing -Informationen zu Ressourcen, die von einer Webseite geladen werden. Das Verständnis dieser Daten ist entscheidend für die Optimierung der Webseitenleistung und zur Reduzierung der Benutzerlatenz.

Schlüsselkonzepte:

• umfassende Zeitdaten: Die API liefert granuläre Timing-Informationen für jede Ressource, die weit über hohe Metriken überschreitet. Dies ermöglicht eine präzise Identifizierung von Leistungs Engpässen.
• Zugriff über window.performance: auf die API wird über die Eigenschaft performance des window -Objekts mit der Methode getEntriesByType() mit dem Argument 'Ressource' zugegriffen.
.
• PerformanceResourceTiming Objekte: getEntriesByType() Die Methode PerformanceResourceTiming gibt ein Array von
Objekten zurück, wobei jeder den Ladevorgang einer einzelnen Ressource beschreibt.
• Broad Browser -Unterstützung:
Die API unterstützt gute Unterstützung für wichtige Browser (Chrome, Internet Explorer, Opera und andere). Überprüfung der Unterstützung ist jedoch erforderlich.
• Überlegungen zur Ressourcen von Ressourcen: Timing-Allow-Origin: * Während die API sowohl mit Ressourcen für Erstanbieter als auch mit Ressourcen von Drittanbietern funktioniert, erfordert detaillierte Zeitdaten für Ressourcen von Drittanbietern den HTTP-Header
HTTP. Ohne sie ist nur die Gesamtdauer verfügbar.

Verständnis der Daten:

PerformanceResourceTiming Jedes

• name
: Die URL der Ressource.
• startTime
: Zeit, bevor der Browser die Ressource abruft.
• duration
: Gesamtzeit zum Laden der Ressource.
• initiatorType img: Zeigt das Element an, das die Ressourcenanforderung initiiert hat (z. B. script, css, xmlhttprequest,
).
• redirectStartOther attributes detail specific stages: redirectEnd, fetchStart, domainLookupStart, domainLookupEnd, connectStart, connectEnd, secureConnectionStart, requestStart, responseStart, responseEnd,
. Eine visuelle Darstellung dieser Zeitstufen ist unten dargestellt:

API -Verwendung und Browserkompatibilität:

Tests für die API -Unterstützung erfordert die Überprüfung auf die Existenz von window.performance und window.performance.getEntriesByType() und zu überprüfen, ob window.performance.getEntriesByType('resource') ein Array zurückgibt. Ein einfacher Code -Snippet für diese Prüfung ist:

if (!('performance' in window) ||
    !('getEntriesByType' in window.performance) ||
    !(window.performance.getEntriesByType('resource') instanceof Array)) {
    // API not supported
} else {
    // API supported
}

Eine grundlegende Demo, die die Funktionalität der API zeigt, kann erstellt werden, indem Ressourcen (z. B. ein Bild und ein Skript) geladen werden, und dann nach dem Laden von Seite die PerformanceResourceTiming -Objekte, um die gesammelten Daten anzuzeigen.

Schlussfolgerung:

Die Ressourcen -Timing -API bietet einen robusten Mechanismus für eine detaillierte Leistungsanalyse. Durch die Identifizierung von Engpässen beim Laden von Ressourcen können Entwickler die Geschwindigkeit und die Benutzererfahrung der Website erheblich verbessern. Während die Browserunterstützung im Allgemeinen gut ist, ist es wichtig, die Kompatibilität zu testen, bevor sie sich auf diese API verlassen. Die Einschränkungen in Bezug auf Ressourcen von Drittanbietern sollten ebenfalls berücksichtigt werden.

häufig gestellte Fragen (FAQs):

Der FAQS -Abschnitt aus dem Originaltext bleibt weitgehend unverändert und liefert wertvolle zusätzliche Informationen. Es wird empfohlen, es hier zur Vollständigkeit einzubeziehen. (Der FAQS -Abschnitt ist zu lang, um sich hier zu reproduzieren, aber er sollte direkt aus dem Eingabetxt kopiert werden.)

Das obige ist der detaillierte Inhalt vonEinführung in die Ressourcen -Timing -API. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!