Page de profilage charge avec l'API de synchronisation de navigation

Analyse approfondie des performances de chargement des pages Web: Explication détaillée de l'API de synchronisation de la navigation

Points de base

• L'API de synchronisation de navigation fournit des informations de synchronisation détaillées lors du chargement des pages Web, y compris la recherche DNS, l'établissement de connexion TCP, la redirection de la page, le temps de construction DOM et d'autres indicateurs. Il est intégré au navigateur et n'a pas de frais généraux supplémentaires.
• Actuellement, l'API de synchronisation de navigation ne prend en charge que Internet Explorer 9, Firefox et Chrome. Par conséquent, le support du navigateur doit être détecté avant d'utiliser l'API. L'API est définie dans l'objet window.performance.timing.
L'API
• enregistre les horodatages de nombreux événements marquants pendant le processus de chargement de la page, chaque événement est stocké comme une propriété de l'objet window.performance.timing. Si un événement ne se produit pas, sa valeur est nulle. L'API définit également une interface qui détermine comment les utilisateurs accèdent à des pages spécifiques.
• L'API de synchronisation de navigation peut être utilisée en conjonction avec les appels AJAX pour rapporter les données utilisateur réelles sur le serveur. Cela permet aux développeurs de comprendre comment la page se comporte dans un environnement réel. Ces données peuvent également être utilisées pour créer des graphiques visuels pour le processus de chargement de la page.

La vitesse de chargement de la page Web est l'un des facteurs clés qui affectent l'expérience utilisateur. Les vitesses de chargement lente peuvent frustrer les utilisateurs et le barattage. Cependant, le dépannage des causes du chargement lent n'est généralement pas facile, car de nombreux facteurs affectent le temps de chargement global, tel que le navigateur de l'utilisateur, les conditions du réseau, la charge du serveur et le code d'application, etc. Heureusement, l'API de synchronisation de navigation peut facilement nous aider à résoudre ce problème.

Dans le passé, les développeurs avaient un accès très limité aux données collectées dans ces domaines. De nombreux développeurs utilisent depuis longtemps les objets Date de JavaScript pour collecter des données de performance. Par exemple, le code suivant mesure le temps de chargement en comparant l'horodatage après l'appel du gestionnaire d'événements de chargement de page:

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

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

Il y a plusieurs problèmes avec cette méthode: Premièrement, la précision du temps de JavaScript n'est pas notoirement élevée; Le temps d'exécution après l'exécution dans le navigateur ne peut pas fournir de données sur le processus de chargement de page tels que le serveur, le réseau, etc. Date Date

Début de l'API de synchronisation de navigation

Pour fournir des données de chargement de page plus précises et complètes, W3C a proposé l'API de synchronisation de navigation. Cette API fournit des informations de synchronisation plus détaillées lors du chargement des pages. Contrairement aux objets

, l'API de synchronisation de navigation fournit des données de mesure liées à la recherche DNS, à l'établissement de connexion TCP, à la redirection de page, au temps de construction DOM et à diverses autres mesures. Le synchronisation de la navigation est également intégré au navigateur, ce qui signifie qu'aucune frais générale supplémentaire n'est engagée.

Date

Prise en charge du navigateur de détection

Actuellement, l'API de synchronisation de navigation ne prend en charge que Internet Explorer 9, Firefox et Chrome. Par conséquent, le support du navigateur doit être détecté avant d'utiliser l'API. L'API est définie dans l'objet window.performance.timing. Les fonctions suivantes détectent si l'API est prise en charge:

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

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

Événements enregistrés

L'API enregistre les horodatages de nombreux événements marquants lors du chargement de la page. Chaque événement est stocké comme un attribut de l'objet window.performance.timing. La liste suivante décrit chaque événement. Si un événement ne se produit pas (comme la redirection de page), sa valeur est nulle. (Remarque: Mozilla affirme que ces événements se produisent dans cet ordre.)

• navigationStart: Le temps après la fin du navigateur termine l'invite pour désinstaller le document précédent. S'il n'y a pas de document précédent, navigationStart est égal à fetchStart. C'est le début du temps de chargement de la page que l'utilisateur perçoit.
• fetchStart: Le moment avant que le navigateur ne commence à chercher des URL. Le processus de recherche consiste à vérifier le cache d'application ou à demander des fichiers au serveur s'il n'est pas mis en cache.
• domainLookupStart: Le moment avant le navigateur commence à rechercher les DN URL. Si la recherche DNS n'est pas requise, la valeur est la même que fetchStart.
• domainLookupEnd: l'heure instantanée une fois la recherche DNS terminée. Si la recherche DNS n'est pas requise, la valeur est la même que fetchStart.
• connectStart: Le moment où le navigateur se connecte au serveur. Si l'URL est mise en cache ou la ressource locale, la valeur est égale à domainLookupEnd.
• connectEnd: l'heure instantanée après avoir établi une connexion avec le serveur. Si l'URL est mise en cache ou la ressource locale, la valeur est la même que domainLookupEnd.
• secureConnectionStart: Si vous utilisez le protocole HTTPS, secureConnectionStart définit l'heure instère avant le début de la poignée de main sécurisée. Si le navigateur ne prend pas en charge HTTPS, cette valeur doit être undefined.
• requestStart: L'heure instantanée avant que le navigateur n'envoie la demande d'URL. API UNDEFINED requestEnd Valeur.
• redirectStart: L'heure de début de l'URL va-t-elle qui initie la redirection.
• redirectEnd: S'il existe des redirections, redirectEnd représente le temps après le dernier octet de la dernière réponse de redirection reçue.
• responseStart: L'heure instantanée après que le navigateur a reçu le premier octet de la réponse.
• responseEnd: L'heure instantanée après que le navigateur reçoive le dernier octet de la réponse.
• unloadEventStart: L'heure instantanée avant l'événement unload du document précédent a été déclenchée. Cette valeur est nulle s'il n'y a pas de document précédent ou si le document précédent provient d'une source différente.
• unloadEventEnd: L'heure instantanée après l'événement unload du document précédent est déclenchée. Cette valeur est nulle s'il n'y a pas de document précédent ou si le document précédent provient d'une source différente. S'il y a une redirection vers une source différente, unloadEventStart et unloadEventEnd sont nuls.
• domLoading: document.readyState L'heure instantanée avant que la valeur ne soit définie sur le "chargement".
• domInteractive: document.readyState L'heure instantanée avant que la valeur ne soit définie sur "Interactive".
• domContentLoadedEventStart: L'heure instantanée avant l'événement téléchargé DomContent est déclenchée.
• domContentLoadedEventEnd: L'heure instantanée après le déclenchement de l'événement téléchargé DomContent est déclenchée.
• domComplete: document.readyState L'heure instantanée avant que la valeur ne soit définie sur "complète".
• loadEventStart: L'heure instantanée avant l'événement de chargement de la fenêtre est déclenchée. Si l'événement n'a pas été licencié, la valeur est nulle.
• loadEventEnd: L'heure instantanée après le déclenchement de l'événement de charge de la fenêtre. Si l'événement n'a pas été licencié ou est toujours en cours d'exécution, la valeur est nulle.

Type de navigation

L'API de synchronisation de navigation définit également une interface pour déterminer comment les utilisateurs accèdent à des pages spécifiques. L'objet window.performance contient également un objet navigation qui contient deux propriétés - type et redirectCount. La propriété type> fournit un moyen à l'utilisateur de naviguer vers la page actuelle. La liste suivante décrit les valeurs enregistrées par type:

• Si l'utilisateur navigue vers la page en tapant une URL, en cliquant sur un lien, en soumettant un formulaire ou en utilisant des actions de script, la valeur de type est 0.
• Si l'utilisateur recharge / actualise la page, type est égal à 1.
• Si l'utilisateur navigue vers la page via l'historique (bouton arrière ou avant), type est égal à 2.
• pour tout autre cas, type équivaut à 255.

redirectCount Les propriétés contiennent le nombre de redirectes qui ont été navigués vers la page actuelle. Si aucune redirection ne se produit, ou si des redirectes proviennent d'une source différente, redirectCount est nul. L'exemple suivant montre comment accéder aux données de navigation:

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

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

Interprétation des données

L'API de synchronisation de navigation peut être utilisée pour calculer certains composants du temps de chargement des pages. Par exemple, le temps nécessaire pour effectuer une recherche DNS peut être calculé en soustrayant timing.domainLookupEnd de timing.domainLookupStart. L'exemple suivant calcule plusieurs mesures utiles. "USIME" correspond au délai de chargement de la page totale de l'expérience utilisateur. Les variables "DNS" et "Connexion" représentent le temps nécessaire pour effectuer des recherches DNS et se connecter respectivement au serveur. "RequestTime" stocke le temps total envoyé au serveur et a reçu la réponse. Enfin, "FetchTime" stocke le temps total pour terminer l'acquisition de documents (y compris l'accès à n'importe quel cache, etc.). Notez que la fonction setTimeout() est appelée dans le gestionnaire d'événements de charge de fenêtre. Cela garantit que les données de synchronisation de navigation sont utilisées uniquement au moment où l'événement de chargement est terminé. Si les données de synchronisation sont accessibles à partir du gestionnaire d'événements de charge, la valeur de timing.loadEventEnd sera nulle.

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

L'API de synchronisation de navigation peut être utilisée en conjonction avec les appels AJAX pour rapporter les données utilisateur réelles sur le serveur. Ceci est utile car il permet aux développeurs de comprendre comment la page se comporte dans un environnement réel. Ces données peuvent également être utilisées pour créer des graphiques visuels pour le processus de chargement de la page. En fait, Google Analytics a inclus des données de synchronisation de navigation dans ses rapports.

Points clés pour se souvenir

• > L'objet Date de JavaScript ne peut pas mesurer avec précision les données de chargement de page car elle ne connaît pas la demande avant d'exécuter dans le navigateur.
• L'API de synchronisation de navigation est intégrée au navigateur et fournit des mesures de synchronisation plus détaillées.
• L'API suit également la façon dont les utilisateurs naviguent vers les pages.
• Les données de synchronisation de navigation peuvent être envoyées au serveur pour analyse.

(La section FAQ sur l'API de synchronisation de navigation peut être ajoutée ici, et le contenu peut être extrait et réécrit du document d'origine selon les besoins)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!