Die Profiling -Seite wird mit der Navigations -Timing -API geladen

Eingehende Analyse der Webseite Ladeleistung: Detaillierte Erläuterung der Navigations-Timing-API

Kernpunkte

Navigation Timing API bietet detaillierte Zeitinformationen beim Laden von Webseiten, einschließlich DNS -Lookup, TCP -Verbindungsaufbau, Seitenumleitung, DOM -Bauzeit und anderen Indikatoren. Es ist in den Browser eingebaut und hat keinen zusätzlichen Overhead.
• window.performance.timing Derzeit unterstützt die Navigations -Timing -API nur Internet Explorer 9, Firefox und Chrome. Daher sollte die Browserunterstützung vor der Verwendung der API erkannt werden. Die API ist im Objekt
definiert.
• Die window.performance.timing API zeichnet die Zeitstempel vieler Meilensteinereignisse während des Ladevorgangs der Seite auf. Jedes Ereignis wird als Eigenschaft des
-Objekts gespeichert. Wenn ein Ereignis nicht auftritt, ist sein Wert Null. Die API definiert auch eine Schnittstelle, die bestimmt, wie Benutzer auf bestimmte Seiten zugreifen.
Navigation Timing -API kann in Verbindung mit AJAX -Aufrufen verwendet werden, um tatsächliche Benutzerdaten an den Server zurück zu melden. Auf diese Weise können Entwickler verstehen, wie sich die Seite in einer realen Umgebung verhält. Diese Daten können auch verwendet werden, um visuelle Diagramme für den Ladeprozess der Seite zu erstellen.

Webseite Ladegeschwindigkeit ist einer der Schlüsselfaktoren, die die Benutzererfahrung beeinflussen. Langsame Ladegeschwindigkeiten können Benutzer und Abwanderung frustrieren. Die Fehlerbehebung der Ursachen für langsame Belastung ist jedoch normalerweise nicht einfach, da viele Faktoren die Gesamtladerzeit beeinflussen, wie z. B. Browser des Benutzers, Netzwerkbedingungen, Serverlast und Anwendungscode usw. Glücklicherweise kann die Navigations -Timing -API uns leicht helfen, dieses Problem zu lösen.

Date In der Vergangenheit hatten Entwickler nur sehr begrenzten Zugriff auf Daten, die in diesen Bereichen gesammelt wurden. Viele Entwickler haben seit langem JavaScripts

Objekte verwendet, um Leistungsdaten zu erfassen. Beispielsweise misst der folgende Code die Ladezeit, indem der Zeitstempel nach dem Lade -Ereignis -Handler -Anruf von Seite verglichen wird:

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

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

Date Es gibt mehrere Probleme mit dieser Methode: Erstens ist die Zeitgenauigkeit von JavaScript notorisch nicht hoch. Die Ausführungszeit nach dem Ausführen im Browser kann keine Daten zum Ladeprozess der Seite wie Server, Netzwerk usw. angeben. Date

Navigation Timing API -Debüt

Um genauere und umfassendere Seitenladedaten bereitzustellen, schlug W3C die Navigations -Timing -API vor. Diese API enthält detailliertere Zeitinformationen beim Laden von Seite. Im Gegensatz zu

Objekten enthält die Navigations -Timing -API Messdaten, die sich auf DNS -Lookup, TCP -Verbindungsaufbau, Seitenumleitung, DOM -Build -Zeit und verschiedene andere Metriken beziehen. Das Navigationszeitpunkt ist ebenfalls in den Browser eingebaut, was bedeutet, dass kein zusätzlicher Overhead anfallen. Date

Erkennungsbrowserunterstützung

Derzeit unterstützt die Navigations -Timing -API nur Internet Explorer 9, Firefox und Chrome. Daher sollte die Browserunterstützung vor der Verwendung der API erkannt werden. Die API ist im Objekt window.performance.timing definiert. Die folgenden Funktionen erkennen, ob die API unterstützt wird:

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

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

aufgezeichnete Ereignisse

API zeichnet die Zeitstempel vieler Meilensteinereignisse während des Ladens auf. Jedes Ereignis wird als Attribut des window.performance.timing -Objekts gespeichert. Die folgende Liste beschreibt jedes Ereignis. Wenn ein Ereignis nicht auftritt (z. B. Umleitung von Seiten), ist sein Wert Null. (Hinweis: Mozilla behauptet, dass diese Ereignisse in dieser Reihenfolge auftreten.)

• navigationStart: Die Zeit nach dem Browser, das die Eingabeaufforderung abgeschlossen hat, das vorherige Dokument zu deinstallieren. Wenn es kein Dokument gibt, ist navigationStart gleich fetchStart. Dies ist der Beginn der Ladezeit, die der Benutzer wahrnimmt.
• fetchStart: Der Moment, bevor der Browser nach URLs sucht. Mit dem Suchprozess werden der Anwendungs ​​-Cache überprüft oder Dateien vom Server angefordert, wenn er nicht zwischenstrahlt wird.
• domainLookupStart: Der Moment bevor der Browser beginnt, die URL -DNS zu durchsuchen. Wenn nicht die DNS -Suche erforderlich ist, ist der Wert der gleiche wie fetchStart.
• domainLookupEnd: Die Instantzeit nach Abschluss der DNS -Suche. Wenn nicht die DNS -Suche erforderlich ist, ist der Wert der gleiche wie fetchStart.
• connectStart: In dem Moment, in dem der Browser mit dem Server verbunden ist. Wenn die URL zwischengespeichert oder lokale Ressource ist, ist der Wert gleich domainLookupEnd.
• connectEnd: Die sofortige Zeit nach der Erstellung einer Verbindung mit dem Server. Wenn die URL zwischengespeichert oder lokale Ressource ist, ist der Wert der gleiche wie domainLookupEnd.
• secureConnectionStart: Wenn das HTTPS -Protokoll verwendet wird, legt secureConnectionStart die sofortige Zeit vor Beginn des sicheren Handshake fest. Wenn der Browser HTTPS nicht unterstützt, sollte dieser Wert undefined sein.
• requestStart: Die sofortige Zeit vor dem Browser sendet die URL -Anfrage. API undefined requestEnd Wert.
• redirectStart: Die Startzeit des URL -Abrufs, der die Umleitung initiiert.
• redirectEnd: Wenn existierende Ausleitungen vorhanden sind, repräsentiert redirectEnd die Zeit nach dem letzten Byte der letzten Ausleitungsantwort.
• responseStart: Die sofortige Zeit nach dem Erhalt des Browsers das erste Byte der Antwort.
• responseEnd: Die sofortige Zeit nach dem Erhalt des Browsers das letzte Byte der Antwort.
• unloadEventStart: Die sofortige Zeit vor dem Auslöser des unload Ereignisses des vorherigen Dokuments. Dieser Wert ist Null, wenn es kein vorheriges Dokument gibt oder wenn das vorherige Dokument aus einer anderen Quelle stammt.
• unloadEventEnd: Die sofortige Zeit nach dem ausgelösten unload -Erfalt des vorherigen Dokuments. Dieser Wert ist Null, wenn es kein vorheriges Dokument gibt oder wenn das vorherige Dokument aus einer anderen Quelle stammt. Wenn es eine Umleitung zu einer anderen Quelle gibt, sind sowohl unloadEventStart als auch unloadEventEnd Null.
• domLoading: document.readyState Die Instantzeit vor dem Wert wird auf "Laden" gesetzt.
• domInteractive: document.readyState Die Instantzeit vor dem Wert wird auf "interaktiv" gesetzt.
• domContentLoadedEventStart: Die sofortige Zeit vor dem Auslöser des Domcontent -Ereignisses.
• domContentLoadedEventEnd: Die Instantzeit nach dem Auslösten des Domcontent -Ereignisses.
• domComplete: document.readyState Die Instantzeit vor dem Wert wird auf "komplett" gesetzt.
• loadEventStart: Die sofortige Zeit vor dem Auslöser des Fensters wird ausgelöst. Wenn das Ereignis nicht abgefeuert wurde, ist der Wert Null.
• loadEventEnd: Die Instantzeit nach dem Auslösen des Ladungsereignisses des Fensters. Wenn das Ereignis nicht abgefeuert wurde oder noch läuft, ist der Wert Null.

Navigationstyp

Navigation Timing -API definiert auch eine Schnittstelle, um festzustellen, wie Benutzer auf bestimmte Seiten zugreifen. Das Objekt window.performance enthält auch ein navigation -Objekt, das zwei Eigenschaften enthält - type und redirectCount. Die Eigenschaft type bietet dem Benutzer eine Möglichkeit, zur aktuellen Seite zu navigieren. Die folgende Liste beschreibt die Werte, die durch type:

gespeichert werden

• Wenn der Benutzer zur Seite navigiert, indem er eine URL eingreift, auf einen Link klickt, ein Formular einreicht oder Skriptaktionen verwendet, beträgt der Wert von type 0.
• Wenn der Benutzer die Seite neu lädt/aktualisiert, ist type gleich 1.
• Wenn der Benutzer durch die Historie (zurück oder vorwärts) zur Seite navigiert, ist type gleich 2.
• für einen anderen Fall ist type gleich 255.

redirectCount Eigenschaften enthalten die Anzahl der Umleitungen, die auf die aktuelle Seite navigiert wurden. Wenn keine Weiterleitungen auftreten oder wenn Ausleitungen aus einer anderen Quelle stammen, ist redirectCount Null. Das folgende Beispiel zeigt, wie Sie auf Navigationsdaten zugreifen:

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

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

Dateninterpretation

Navigations -Timing -API kann verwendet werden, um bestimmte Komponenten der Seitenladezeit zu berechnen. Beispielsweise kann die Zeit, die für die Durchführung einer DNS -Suche benötigt wird, durch Subtrahieren von timing.domainLookupEnd von timing.domainLookupStart berechnet werden. Das folgende Beispiel berechnet mehrere nützliche Metriken. "Usertime" entspricht der Ladeverzögerung der Benutzererfahrung der Gesamtseite. Die Variablen "DNS" und "Verbindungen" repräsentieren die Zeit, die für die Durchführung von DNS -Lookups und eine Verbindung zum Server benötigt wird. "RequestTime" speichert die Gesamtzeit, die an den Server gesendet wurde, und empfangen die Antwort. Schließlich speichert "FetchTime" die Gesamtzeit für die Vervollständigung der Dokumente (einschließlich Zugriff auf jeden Cache usw.). Beachten Sie, dass die setTimeout() -Funktion im Fensterlastereignis Handler aufgerufen wird. Dadurch wird sichergestellt, dass die Navigations -Timing -Daten nur in dem Moment verwendet werden, in dem das Ladeereignis abgeschlossen ist. Wenn auf die Timing -Daten aus dem Last -Ereignis -Handler zugegriffen werden, ist der Wert von timing.loadEventEnd Null.

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

Navigation Timing -API kann in Verbindung mit AJAX -Aufrufen verwendet werden, um tatsächliche Benutzerdaten an den Server zurück zu melden. Dies ist nützlich, da Entwickler verstehen, wie sich die Seite in einer realen Umgebung verhält. Diese Daten können auch verwendet werden, um visuelle Diagramme für den Ladeprozess der Seite zu erstellen. Tatsächlich hat Google Analytics Navigations -Timing -Daten in seine Berichte aufgenommen.

Schlüsselpunkte, um sich zu merken

• JavaScripts Date Objekt kann die Seitenladedaten nicht genau messen, da es die Anforderung vor dem Ausführen im Browser nicht kennt.
Die Timing -API der Navigation ist in den Browser eingebaut und bietet detailliertere Zeitmessungen.
Die API verfolgt auch, wie Benutzer auf Seiten navigieren.
Timing -Navigationsdaten können zur Analyse an den Server gesendet werden.

(Der FAQ -Abschnitt zur Navigations -Timing -API kann hier hinzugefügt werden, und der Inhalt kann nach Bedarf aus dem Originaldokument extrahiert und umgeschrieben werden)

Das obige ist der detaillierte Inhalt vonDie Profiling -Seite wird mit der Navigations -Timing -API geladen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!