Les performances du Web sont importantes car les utilisateurs s'attendent à une expérience de réponse rapide. 1. L'API de synchronisation de navigation fournit des horodatages pour chaque étape du chargement des pages, tels que la recherche DNS, le chargement DOM, etc.; 2. Obtenez des mesures clés en calculant le décalage horaire, tel que le temps de chargement des pages, le temps de prêt DOM et le temps d'attente du serveur; 3. Vous pouvez enregistrer ces données avec les scripts et les intégrer dans des outils d'analyse; 4. D'autres API telles que l'observateur de performance, le synchronisation des ressources et les taches longues peuvent analyser en profondeur les goulots d'étranglement de performance; 5. Il est recommandé de commencer à suivre les métriques de base et d'optimiser l'expérience utilisateur avec les informations de chargement des ressources.

Les performances du Web sont importantes car les utilisateurs s'attendent à des expériences rapides et réactives. L'une des meilleures fa?ons de mesurer la rapidité avec laquelle une page se charge et fonctionne est d'utiliser des API du navigateur comme l'API de synchronisation de navigation. Ces outils vous donnent accès à des données de synchronisation détaillées directement depuis le navigateur, afin que vous puissiez voir ce qui se passe réellement lorsque votre page se charge.

Quelle est l'API de synchronisation de navigation?

L' API de synchronisation de navigation offre aux développeurs des informations de synchronisation à grain fin sur la durée de chargement pour une page Web. Il est intégré à des navigateurs modernes et expose des horodatages pour différentes phases du processus de chargement de la page - des choses comme lorsque la recherche DNS commence, lorsque la page commence à se charger, lorsque le DOM est prêt, etc.

Vous n'avez pas besoin d'installer quoi que ce soit de plus pour l'utiliser. Ouvrez simplement la console performance.getEntriesByType('navigation') navigateur et vérifiez performance.timing .

Certains horodatages clés comprennent:

• fetchStart : lorsque le navigateur commence à récupérer la page
• responseEnd : lorsque le serveur termine l'envoi de la réponse
• domContentLoadedEventEnd : lorsque le Dom est entièrement chargé et analysé
• loadEventEnd : lorsque la page entière (y compris les actifs) est effectuée le chargement

Ces valeurs sont toutes en millions de dollars depuis l'époque Unix, vous les soustriez donc généralement les uns des autres pour obtenir des durées.

Comment calculer les mesures significatives avec elle

En utilisant ces horodatages, vous pouvez calculer plusieurs mesures de performances utiles qui reflètent une véritable expérience utilisateur.

Par exemple:

• Temps de chargement de la page : loadEventEnd - fetchStart
• Temps pour Dom Ready : domContentLoadedEventEnd - fetchStart
• Temps passé à attendre le serveur : responseEnd - requestStart

Une fois que vous avez ces chiffres, vous pouvez les enregistrer aux outils d'analyse ou surveiller les tendances au fil du temps.

Une approche commune consiste à écrire un petit script qui s'exécute après que la page charge et rapporte ces valeurs:

 window.addeventListener ('Load', function () {
  const per perfdata = performance.geTentriesByType ("navigation") [0];
  Console.log ('Temps de chargement complet:', perfdata.Loadeverend - perfdata.fetchStart);
});

Cela vous aide à suivre les performances sans avoir besoin d'outils complexes.

Autres API du navigateur à considérer

Bien que l'API de synchronisation de navigation soit idéale pour les informations de charge de page de haut niveau, il existe d'autres API de navigateur qui offrent des looks plus profonds sur des aspects spécifiques des performances.

• API Performance Observer : vous permet de surveiller les nouvelles entrées de performances car elles sont ajoutées à la chronologie des performances.
• API de synchronisation des ressources : donne des informations de synchronisation réseau détaillées pour chaque ressource (comme les images, les scripts, etc.) chargés sur la page.
• API des taches longues : aide à détecter les taches qui bloquent le fil principal pendant plus de 50 ms - ce qui peut provoquer Jank ou la non-respect.

Ensemble, ces API forment une bo?te à outils puissante pour comprendre les goulots d'étranglement des performances directement du navigateur de l'utilisateur.

Où aller d'ici

Si vous souhaitez commencer à suivre les performances dès aujourd'hui, commencez par enregistrer des mesures de base comme le temps de chargement et le temps prêt à l'emploi à l'aide de l'API de synchronisation de navigation. à partir de là, explorez le synchronisation des ressources pour comprendre comment les actifs individuels affectent la vitesse de charge.

Et rappelez-vous - mesurer les performances ne consiste pas seulement à obtenir des chiffres. Il s'agit de comprendre où les retards se produisent et d'améliorer l'expérience utilisateur réelle.

Fondamentalement, c'est tout.

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!