var start = new Date();

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

é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:

var start = new Date();

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

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.

function supportsNavigationTiming() {
  return !!(window.performance && window.performance.timing);
}

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!