Quelle est l'API de synchronisation de navigation?
L'API de synchronisation de navigation aide les développeurs à mesurer les performances Web en fournissant des données de temps de chargement de page précises. Il utilise des objets de performance dans JavaScript pour enregistrer les horodatages de la navigation initiée par l'utilisateur vers la page pour charger complètement les étapes clés, telles que la recherche DNS, la réponse du serveur et le temps d'interaction de la page. Avec ces différences d'horodatage, des métriques telles que le temps de premier octet, le temps de chargement DOM et le temps de chargement pleine page peuvent être calculés. L'avantage est qu'il est standardisé entre les navigateurs, aucune bibliothèque supplémentaire n'est requise et la possibilité de capturer le processus de chargement complet. Cependant, il est nécessaire de prêter attention aux problèmes de soutien limité aux navigateurs plus âgés, aux restrictions intermédiaires et aux données manquantes possibles dans certains environnements.
L'API de synchronisation de navigation est un outil de navigateur qui aide les développeurs à mesurer à quelle vitesse une page Web se charge. Au lieu de deviner ou de s'appuyer sur des estimations approximatives, cette API donne des données de synchronisation de précision pour différentes parties du processus de chargement de la page - comme lorsque la recherche DNS commence, lorsque les réponses du serveur ou lorsque la page devient interactive. Il est intégré à des navigateurs modernes et ne nécessite aucune bibliothèque, ce qui en fait un moyen fiable de suivre les performances.
Comment fonctionne l'API de synchronisation de navigation?
Cette API collecte des informations de synchronisation détaillées via l'objet performance en JavaScript. Vous pouvez y accéder à l'aide de performance.timing , qui renvoie un tas de moments clés de marquage des moments clés pendant la navigation et le chargement.
Par exemple:
-
navigationStart: lorsque l'utilisateur initie une navigation (comme taper une URL ou cliquer sur un lien). -
responseEnd: lorsque le dernier octet de la réponse est reçu. -
domContentLoadedEventEnd: lorsque le document HTML initial a été complètement chargé et analysé.
En soustrayant ces horodatages les uns des autres, vous pouvez calculer des choses comme:
- Temps de premier octet (TTFB):
responseStart - domainLookupStart - Temps de chargement de la page:
loadEventEnd - navigationStart
Ces chiffres sont super utiles si vous essayez de comprendre ou d'améliorer les performances de votre site.
Que pouvez-vous mesurer avec?
Vous pouvez obtenir beaucoup d'idées de l'API de synchronisation de navigation. Voici quelques métriques communes Track:
- Temps de recherche DNS : combien de temps il faut pour résoudre le nom de domaine.
- Temps de connexion TCP : le temps pris pour établir une connexion avec le serveur.
- Temps de premier octet (TTFB) : Combien de temps avant que le navigateur ne reçoive le premier octet de la page.
- Temps de chargement DOM : à partir du moment où le document commence à se charger jusqu'à ce qu'il termine l'analyse.
- Temps de chargement complet : jusqu'à ce que tout (comme les images et les scripts) soit entièrement chargé.
Chacun d'eux vous donne une pièce du puzzle de performance. Par exemple, une recherche DNS lente peut indiquer des problèmes avec votre fournisseur DNS, tandis qu'un TTFB élevé pourrait signifier que votre serveur a besoin d'optimisation.
Pourquoi utiliser le calendrier de navigation au lieu d'autres méthodes?
Il existe d'autres moyens de mesurer la vitesse de la page - comme envelopper le code dans Date.now() appelle ou utiliser des outils tiers - mais ceux-ci ne vous donnent généralement pas l'image complète. Le timing de navigation est meilleur parce que:
- Il est standardisé entre les navigateurs.
- Il capture chaque étape de la navigation à pleine charge.
- C'est passif - pas besoin d'instrumenter chaque demande manuellement.
- Cela fonctionne même si JavaScript s'exécute en retard ou échoue.
De plus, comme il fait partie de l'API Performance, il fonctionne bien avec des outils plus récents comme PerformanceObserver , vous permettant de surveiller les changements de performance au fil du temps plus précisément.
Quelques choses à garder à l'esprit
Bien que l'API de synchronisation de navigation soit puissante, il y a quelques gotchas:
- Certains navigateurs plus anciens peuvent ne pas prendre en charge tous les champs.
- Si vous mesurez un employé de service ou un iframe, les données peuvent être limitées.
- Les fonctionnalités de confidentialité dans les navigateurs (comme les restrictions croisées d'origine) peuvent affecter les données disponibles.
Une erreur facile est de supposer que toutes les valeurs seront toujours là. Ainsi, lorsque vous lisez performance.timing .
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!
Outils d'IA chauds
Undress AI Tool
Images de déshabillage gratuites
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Clothoff.io
Dissolvant de vêtements AI
Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Inclusion du fichier CSS: meilleures options pour augmenter les performances
Jun 06, 2025 am 12:03 AM
Thebestpractices pour la fin de compteCSSFileStoboostwebSiteperFormanceAre: 1) ConsolidateCSSFilesInToonetomimizeHttprequests, 2)
Transformez les performances de votre page Web : progrès révolutionnaire dans la technologie de routage Lazy-Loading de Vue Router
Sep 15, 2023 pm 12:36 PM
Modifiez les performances de vos pages Web : progrès révolutionnaires dans la technologie de routage VueRouter Lazy-Loading Introduction : À l'ère d'Internet d'aujourd'hui, l'optimisation des performances des pages Web est largement discutée et valorisée. En tant que développeurs front-end, nous sommes souvent confrontés à des défis tels que l'augmentation de la vitesse de chargement des pages et la réduction de la charge du serveur. VueRouter est un plug-in extrêmement important dans le framework Vue.js. Il nous permet de créer une application monopage (SPA) via la configuration du routage. Et Lazy-Loading (chargement paresseux) est Vu
La maîtrise du mécanisme de mise en cache HTML est la clé pour améliorer les performances des pages Web
Jan 23, 2024 am 08:27 AM
La clé pour améliorer les performances des pages Web : maîtriser le mécanisme de mise en cache HTML nécessite des exemples de code spécifiques. À l'ère d'Internet, nous comptons de plus en plus sur le réseau pour obtenir des informations et effectuer diverses tâches. Les performances des pages Web sont l’un des indicateurs importants pour mesurer l’expérience utilisateur. Une page Web qui se charge lentement peut rendre les utilisateurs impatients et même quitter la page Web. Par conséquent, l’amélioration des performances des pages Web est devenue une tâche que les développeurs front-end ne peuvent ignorer. L'une des clés pour améliorer les performances des pages Web est de maîtriser le mécanisme de mise en cache HTML. Le mécanisme de mise en cache HTML peut réduire l'accès au serveur et améliorer
Comparez les stratégies d'optimisation pour la redistribution, le redessinage et la redistribution afin d'améliorer les performances des pages Web.
Dec 26, 2023 pm 03:37 PM
Optimisation des performances des pages Web : pour discuter des avantages et des inconvénients de la redistribution, du redessinage et de la redistribution, des exemples de code spécifiques sont nécessaires. Avec le développement d'Internet, l'optimisation des performances des pages Web est devenue un problème important auquel tout développeur front-end doit faire face. Dans le processus d'optimisation des performances des pages Web, nous devons comprendre et optimiser différentes opérations. Parmi eux, la redistribution, le redessinage et la redistribution sont des problèmes courants qui entraînent une réduction des performances des pages Web. Cet article explorera leurs avantages et leurs inconvénients et donnera quelques exemples de code spécifiques. Tout d'abord, nous devons comprendre le sens de ces trois concepts : reflow : quand
Comprendre l'impact des normes Web sur les performances des pages Web et l'expérience utilisateur
Jan 13, 2024 pm 01:45 PM
Comprendre l'impact des normes Web sur les performances des pages Web et l'expérience utilisateur nécessite des exemples de code spécifiques. À l'ère actuelle du développement Internet, les performances des pages Web et l'expérience utilisateur sont devenues de plus en plus importantes. Alors que les exigences des utilisateurs en matière de vitesse de chargement des pages Web et d'expérience interactive continuent d'augmenter, les développeurs doivent prêter attention et optimiser les performances des pages Web pour offrir une meilleure expérience utilisateur. Les normes Web sont un ensemble de spécifications convenues qui garantissent l'uniformité et la compatibilité des pages Web sur différents navigateurs et appareils. Connaître et suivre les pratiques de développement standard du Web contribue non seulement à améliorer l'efficacité du développement, mais également
Optimisation du chargement des polices pour les performances Web
Jul 18, 2025 am 03:55 AM
La vitesse de chargement de la page Web peut être améliorée en optimisant le chargement des polices. 1. Utilisez Font-Display: Swap, permettant à la police système d'être affiché d'abord, puis remplacé par des polices personnalisées pour éviter le texte vide; 2. Préchargement de la police de mot-clé de premier écran pour raccourcir le retard de chargement; 3. Réduire le nombre de variantes de police et de formats, ne chargez que les poids de police nécessaires et donnez la priorité à l'utilisation du format WOFF2; 4. En réponse au problème des polices chinoises excessives, vous pouvez charger le jeu de caractères au besoin ou utiliser des alternatives de police du système pour améliorer le premier temps de dessin et l'expérience de lecture.
Quelle est l'API de synchronisation de navigation?
Jun 22, 2025 am 12:24 AM
L'API de synchronisation de navigation aide les développeurs à mesurer les performances Web en fournissant des données de temps de chargement de page précises. Il utilise des objets de performance dans JavaScript pour enregistrer les horodatages de la navigation initiée par l'utilisateur à la page pleine de chargement des étapes clés, telles que la recherche DNS, la réponse du serveur et le temps d'interaction de la page. Avec ces différences d'horodatage, des métriques telles que le temps de premier octet, le temps de chargement DOM et le temps de chargement pleine page peuvent être calculés. L'avantage est qu'il est standardisé entre les navigateurs, aucune bibliothèque supplémentaire n'est requise et la possibilité de capturer le processus de chargement complet. Cependant, il est nécessaire de prêter attention aux problèmes de soutien limité aux navigateurs plus âgés, aux restrictions intermédiaires et aux données manquantes possibles dans certains environnements.
Optimisation du chargement des polices et des performances sur le Web
Jul 26, 2025 am 04:17 AM
Preloadonly1–2CriticalfontusSingRel = "preload" withas = "font", type = "font / woff2", et CrossorigIntospeeDupDelivery withoutBlockingotherResources.2.Usefont-Display: swapin @ font-facetoenSureTexurces
