Überwachen Sie die Front-End-Leistung mithilfe der HTML5-API-H5-Tutorial-php.cn

Die User Timing API kann die Leistung zwischen zwei vordefinierten Markierungen in einer Webanwendung messen. Entwickler müssen lediglich die Start- und Endmarkierungen der Messung separat definieren. Die Zeitposition kann über die vom JavaScript-Objekt „“ bereitgestellte Funktion markiert werden.

var measuring_start = performance.now();

Nach dem Login kopieren

Mit der Funktion „“ können Sie den Timeout in der Webanwendung abrufen. Ähnlich dieser Funktion ist das Date-Objekt, das auch den aktuellen Zeitstempel abrufen kann. Der Hauptunterschied zwischen den beiden ist die Zeitgenauigkeit. Das w3c-Dokument für den Rückgabewert der Now-Funktion erfordert eindeutig, dass er einen Millisekundenwert mit einer Genauigkeit von Tausendstel Dezimalstellen darstellen kann. Darüber hinaus ist der von der Now-Funktion zurückgegebene Wert die Anzahl der Millisekunden vom „Navigationsstartereignis (navigationStart)“ des Browsers bis zur Gegenwart.

performance.now() 35438640.775000006 (new Date()).getTime() 1443063066478

Nach dem Login kopieren

Wenn Sie die Ladeleistung eines Bildes analysieren möchten, können Sie das zweite Tag im Ladeereignis des Bildes setzen. Die Zeit, die zum Laden eines Bildes benötigt wird, ist die Differenz (in Millisekunden) zwischen den beiden Variablen „measure_start“ und „measure_end“.

<html> 
<head> 
<meta charset="utf-8" /> 
<title>test timing</title> 
</head> 
<body> 
<img src="http://cdn3.infoqstatic.com/statics_s2_20150922 -0305u1/styles/i/logo_bigger.jpg" alt="image" > 
<script type="text/javascript"> 
var measure_start = performance.now(); 
document.getElementsByTagName("img")[0].addEventListener ("load", function() { 
var measure_end = performance.now(); 
console.log("image load time: " + (measure_end - measure_start) + "ms"); 
}, false); 
</script> 
</body> 
</html>

Nach dem Login kopieren

Nachdem Sie auf dieses HTML zugegriffen haben, können Sie die Ausgabe in der Konsole sehen:

image load time: 24.395ms

Nach dem Login kopieren

Gleichzeitig können Sie sie mit der Ladezeit der Registerkarte „Netzwerk“ vergleichen Chrome-Entwicklertools:

(Klicken Sie, um das Bild zu vergrößern)

Neben der Verwendung der Now-Funktion zum direkten Abrufen des Zeitstempels bietet die Performance-Schnittstelle auch Funktionen. Entwickler können überall dort Markierungen erstellen und löschen, wo sie Zeit erfassen müssen.

performance.mark("start"); … performance.mark("end");

Nach dem Login kopieren

Die Markierungsfunktion gibt keinen Wert zurück, aber die Markierungsdaten können später über den Namen der Markierung abgerufen werden. Wenn Sie die Differenz zwischen Markern berechnen möchten, können Sie dies mit der Funktion „Messen“ tun. Diese Funktion erfordert drei Parameter. Der erste Parameter definiert den Namen des Unterschieds und die zweite und dritte Variable geben den Namen des Markers an. Ebenso gibt diese Funktion keinen Wert zurück.

performance.measure("difference", "start", "end");

Nach dem Login kopieren

Das obige Beispiel berechnet die Differenz zwischen den beiden Tags „Start“ und „Ende“ und benennt die Differenz als „Differenz“. Es ist wichtig zu beachten, dass hier dieselben Namen erfasst und nicht überschrieben werden.

Wie bereits erwähnt, geben die beiden Funktionen Markieren und Messen keinen Wert zurück. Wenn Sie den Inhalt von Markern oder Messungen lesen möchten, müssen Sie ihn lesen, indem Sie „getEntries“, „getEntriesByType“ oder „getEntriesByName“ in der Performance-Schnittstelle aufrufen. Unter anderem gibt „getEntries“ alle Tags (einschließlich der von Webseiten geladenen Ressourcen) zurück und die Funktion „getEntriesByType“ ruft die entsprechenden Tags (oder Messergebnisse) ab die Namensdaten. Der Rückgabewert dieser Funktionen ist eine Liste, einschließlich Feldern wie Name, Startzeit, Zeitverbrauch usw.

Wenn Sie beispielsweise alle Marker oder Messergebnisse erhalten möchten, können Sie diese über die Funktion „getEntriesByType“ abrufen:

performance.mark("start"); 
performance.mark("end"); 
performance.measure("difference", "start", "end"); 
var marks = performance.getEntriesByType("mark"); 
var measures = performance.getEntriesByType("measure"); 
console.log("===marks===:") marks.forEach(function(mark) { 
console.log(mark.name + ": " + mark.startTime); }) 
console.log("===measures===:") measures.forEach(function(measure){ 
console.log(measure.name + ": " + measure.duration) })

Nach dem Login kopieren

Die Ausgabe nach der Ausführung im Browser (Chrome) Konsole ist:

===marks===: start: 6805479.590000001 end: 6805479.74 ===measures===: difference: 0.14999999944120646

Nach dem Login kopieren

Wie Sie sehen können, ist das Namensfeld im zurückgegebenen Objekt der Name der gesetzten Markierung (Messergebnis). Für die Markierung können Sie die Markierungszeit über startTime () abrufen. Dasselbe wie die oben erwähnte Now-Funktion, die hier zurückgegeben wird. Die Zeit ist auch relativ zum navigationStart-Ereignis. Für Berechnungsergebnisse können die Berechnungsergebnisse über das Dauerfeld abgerufen werden. Zusätzlich zu den im obigen Beispiel verwendeten Typen „Mark“ und „Measure“ unterstützen Browser (Chrome, Firefox usw.) bereits den Typ „Ressource“. Mit anderen Worten: Diese Browser haben uns standardmäßig dabei geholfen, die Zeit zu messen, die zum Laden aller externen Ressourcen benötigt wird. Wenn Sie für den HTML-Code im vorherigen Beispiel (der einen Verweis auf ein Bild enthält) den folgenden js-Code in der Browserkonsole ausführen, können Sie direkt sehen, wie lange es dauert, das Bild zu laden:

performance.getEntriesByType("resource").forEach(function(r) { console.log(r.name + ": " + r.duration) })

Nach dem Login kopieren

Die obige Codeausgabe (Chrome) lautet:

http://cdn3.infoqstatic.com/statics_s2_20150922- 0305u1/styles/i/logo_bigger.jpg: 21.696999901905656

Nach dem Login kopieren

Diese Daten stimmen genau mit der für diese Anfrage benötigten Zeit überein, die auf der Registerkarte „Netzwerk“ in den Chrome-Entwicklertools aufgezeichnet wird.

Wenn Sie Daten direkt über Markierungen und Messergebnisnamen erhalten möchten, können Sie diese über die Funktion getEntriesByName abrufen. Es ist zu beachten, dass diese Funktion auch ein Array von PerformanceEntry-Objekten zurückgibt und iteriert werden muss, um bestimmte Daten zu erhalten.

In ähnlicher Weise bietet die Performance-Schnittstelle auch eine Schnittstelle zum Entfernen von Tags. Zuvor erstellte Markierungen und Messergebnisse können über die Funktionen „clearMarks“ und „clearMeasures“ gelöscht werden. Beide Funktionen erhalten einen optionalen Namensparameter. Wenn ein Name übergeben wird, werden die Daten mit dem angegebenen Namen gelöscht, andernfalls werden die Markierungs-/Messergebnisse gelöscht.

performance.clearMarks(); 
performance.mark("start"); 
performance.mark("end"); 
var marks = performance.getEntriesByType("mark"); 
console.log("before clear:") marks.forEach(function(mark) { 
console.log(mark.name + ": " + mark.startTime); }) 
performance.clearMarks("start"); 
marks = performance.getEntriesByType("mark"); 
console.log("after clear:") marks.forEach(function(mark) { 
console.log(mark.name + ": " + mark.startTime); })

Nach dem Login kopieren

Die Ausgabe nach der Ausführung des obigen Codes lautet:

before clear: start: 9080690.565000001 end: 9080690.575000001 after clear: end: 9080690.575000001

Nach dem Login kopieren

Mit anderen Worten: Nach der Ausführung von performance.clearMarks("start"); wird die „Start“-Markierung gelöscht .

Browsing Timing API

Browsing Timing API zählt den Zeitstempel jedes Knotens im gesamten Prozess vom Anfang bis zum Abschluss des Ladens einer Webseite. Im Gegensatz zur Benutzer-Timing-API ist die Zeit der Browser-Timing-API ein Standardzeitstempel. Der Zeitstempel jedes Knotens wird im performance.timing-Objekt gespeichert. Für jeden enthaltenen Knoten können Sie sich auf die folgende Abbildung beziehen:

(Klicken Sie, um das Bild zu vergrößern)

console.log(performance.timing.domLoading); console.log(performance.timing.domComplete); 
console.log("load time: " + (performance.timing.domComplete - performance.timing.domLoading ));

Nach dem Login kopieren

Zum Beispiel können Sie domComplete (DOM-Konstruktion ist abgeschlossen) und domLoading erhalten (DOM-Konstruktion beginnt) Die Differenz wird verwendet, um die Zeit zu berechnen, die zum Erstellen des DOM-Baums benötigt wird.

Zusätzlich zu den im Timing-Objekt gespeicherten Ladezeitstempeln jedes Knotens speichert das Performance-Objekt auch die und-Objekte. Es speichert den Ladetyp und die Umleitungszeiten der aktuellen Seite. Darunter sind die Ladetyptypen:

TYPE_NAVIGATE（type == 0）：通过点击链接、输入地址、表单提交、脚本初开启等方式加载

TYPE_RELOAD（type == 1）：通过重新加载或者location.reload()操作加载

TYPE_BACK_FORWARD（type == 2）：通过浏览器历史遍历操作加载

TYPE_RESERVED（type == 255）：上面没有定义的其他方式

如直接打开一个页面，在控制台中执行：

console.log(performance.navigation.type);

Nach dem Login kopieren

上述脚本执行后，控制台会输出0，表示这是直接打开的一个页面。再次刷新页面，重新执行上面的JavaScript片段，则会输出1，表示这是一次重新加载。

performance.timing.redirectCount 记录了当前页面经历的重定向次数。

浏览器支持

用户计时API已经支持，如IE10+、Chrome 25+、Firefox 15+等，但是Safari等浏览器还不支持。对于浏览计时API，更多的浏览器已经，包括Chrome、Firefox、IE9+、Safari 8+等等。

以上就是使用HMTL5 API监控前端性能的内容，更多相关内容请关注PHP中文网（m.sbmmt.com）！