Surveiller les performances front-end à l'aide de l'API HMTL5-Tutoriel H5-php.cn

L'API User Timing peut mesurer les performances entre deux marqueurs prédéfinis dans une application Web. Les développeurs doivent uniquement définir séparément les marqueurs de début et de fin de la mesure. La position temporelle peut être marquée grâce à la fonction fournie par l'objet JavaScript "".

var measuring_start = performance.now();

Copier après la connexion

Grâce à la fonction "", vous pouvez obtenir le timeout dans l'application web. L'objet Date est similaire à cette fonction, qui peut également obtenir l'horodatage actuel. La principale différence entre les deux est la précision temporelle. Le document w3c pour la valeur de retour de la fonction now exige clairement qu'elle soit capable de représenter une valeur en millisecondes précise au millième de décimale. De plus, la valeur renvoyée par la fonction now est le nombre de millisecondes écoulées entre « l'événement de début de navigation (navigationStart) » du navigateur et aujourd'hui.

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

Copier après la connexion

Si vous souhaitez analyser les performances de chargement d'une image, vous pouvez définir la deuxième balise dans l'événement de chargement de l'image. Le temps nécessaire pour charger une image est la différence (en millisecondes) entre les deux variables "measure_start" et "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>

Copier après la connexion

Après avoir accédé à ce html, vous pouvez voir le résultat dans la console :

image load time: 24.395ms

Copier après la connexion

En même temps, vous pouvez le comparer avec le temps de chargement de l'onglet réseau dans Outils de développement Chrome :

(Cliquez pour agrandir l'image)

En plus d'utiliser la fonction now pour obtenir directement l'horodatage, l'interface Performance propose également des fonctions. Les développeurs peuvent créer et effacer des marqueurs partout où ils ont besoin d'enregistrer le temps.

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

Copier après la connexion

La fonction mark ne renvoie aucune valeur, mais les données de la marque peuvent être obtenues ultérieurement via le nom de la marque. Si vous souhaitez calculer la différence entre les marqueurs, vous pouvez le faire avec la fonction « mesurer ». Cette fonction nécessite trois paramètres, le premier paramètre définit le nom de la différence et les deuxième et troisième variables spécifient le nom du marqueur. De même, cette fonction ne renvoie aucune valeur.

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

Copier après la connexion

L'exemple ci-dessus calcule la différence entre les deux balises "start" et "end" et nomme la différence comme "différence". Il est important de noter que les mêmes noms seront enregistrés ici et ne seront pas écrasés.

Comme mentionné précédemment, les deux fonctions marquer et mesurer ne renverront aucune valeur. Si vous souhaitez lire le contenu des marqueurs ou des mesures, vous devez le lire en appelant "getEntries", "getEntriesByType" ou "getEntriesByName" dans l'interface Performance. Parmi eux, « getEntries » renvoie toutes les balises (y compris les ressources chargées par les pages Web) et les résultats de mesure enregistrés dans l'objet de performance actuel ; la fonction « getEntriesByType » obtient les balises correspondantes ; la fonction « getEntriesByName » obtient les balises correspondantes (ou les résultats de mesure) via les données de nom. La valeur de retour de ces fonctions est une liste comprenant des champs tels que le nom, l'heure de début, la consommation de temps, etc.

Par exemple, si vous souhaitez obtenir tous les marqueurs ou résultats de mesure, vous pouvez l'obtenir via la fonction "getEntriesByType":

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

Copier après la connexion

La sortie après exécution dans le navigateur (Chrome) console est :

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

Copier après la connexion

Comme vous pouvez le voir, dans l'objet renvoyé, le champ name est le nom de la marque définie (résultat de la mesure). Pour la marque, vous pouvez obtenir l'heure de la marque via startTime (). la même chose que la fonction now mentionnée ci-dessus, renvoyée ici L'heure est également relative à l'événement navigationStart). Pour les résultats du calcul, les résultats du calcul peuvent être obtenus via le champ de durée. En plus des types « mark » et « mesure » utilisés dans l'exemple ci-dessus, les navigateurs (Chrome, Firefox, etc.) supportent déjà le type « ressource ». En d’autres termes, ces navigateurs nous ont aidé par défaut à mesurer le temps nécessaire au chargement de toutes les ressources externes. Pour le html de l'exemple précédent (contenant une référence à une image), si vous exécutez le code js suivant dans la console du navigateur, vous pouvez voir directement le temps nécessaire au chargement de l'image :

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

Copier après la connexion

La sortie du code ci-dessus (Chrome) est :

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

Copier après la connexion

Ces données sont exactement les mêmes que le temps pris pour cette demande enregistrée dans l'onglet Réseau des outils de développement Chrome.

Si vous souhaitez obtenir des données directement via des marqueurs et des noms de résultats de mesure, vous pouvez les obtenir via la fonction getEntriesByName. Il convient de noter que cette fonction renvoie également un tableau d'objets PerformanceEntry et qu'elle doit être itérée pour obtenir des données spécifiques.

De même, l'interface Performance fournit également une interface pour supprimer les balises. Les marques et les résultats de mesure précédemment créés peuvent être supprimés via les fonctions clearMarks et clearMeasures. Les deux fonctions reçoivent un paramètre de nom facultatif. Si un nom est transmis, les données portant le nom spécifié sont supprimées, sinon les résultats de marquage/mesure sont effacés.

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

Copier après la connexion

Le résultat après l'exécution du code ci-dessus est :

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

Copier après la connexion

En d'autres termes, après l'exécution de performance.clearMarks("start");, la marque "start" est effacée .

API Browsing Timing

L'API Browsing Timing compte l'horodatage de chaque nœud dans l'ensemble du processus, du début à la fin du chargement d'une page Web. Contrairement à l'API de synchronisation de l'utilisateur, l'heure de l'API de synchronisation du navigateur est un horodatage standard. L'horodatage de chaque nœud est enregistré dans l'objet performance.timing. Pour chaque nœud inclus, vous pouvez vous référer à la figure ci-dessous :

(Cliquez pour agrandir l'image)

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

Copier après la connexion

Par exemple, vous pouvez obtenir domComplete (la construction du DOM est terminée) et domLoading (Début de la construction du DOM) La différence est utilisée pour calculer le temps nécessaire à la construction de l'arborescence DOM.

En plus des horodatages de chargement de chaque nœud enregistrés dans l'objet timing, l'objet performance enregistre également les objets et . Il enregistre le type de chargement et les temps de redirection de la page actuelle. Parmi eux, les types de types de chargement sont :

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

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

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

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

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

console.log(performance.navigation.type);

Copier après la connexion

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

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

浏览器支持

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

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