Découvrir l'API de synchronisation de l'utilisateur - SitePoint

API de synchronisation de l'utilisateur: Mesurer précisément les performances de l'application Web

Cet article plonge dans l'API de synchronisation de l'utilisateur, un outil puissant pour les développeurs Web pour évaluer méticuleusement les performances des applications. Il fournit des horodatages de haute précision, permettant une mesure précise et la déclaration de l'exécution du code JavaScript, particulièrement utile pour l'analyse comparative.

L'API se concentre sur deux concepts clés: marques et mesures . Une marque désigne un point spécifique dans le temps, tandis qu'une mesure calcule la durée entre deux points. Quatre méthodes sont disponibles: mark(name), clearMarks([name]), measure(name[, mark1[, mark2]]) et clearMeasures([name]).

La compatibilité des navigateurs est généralement bonne, avec un support dans les principaux navigateurs de bureau et mobiles (y compris Internet Explorer 10, Chrome 25 et Opera 15). Un polyfill, usertiming.js, est disponible pour les navigateurs non pris en charge.

L'API excelle à mesurer les opérations asynchrones. En plaçant des marques au début et à la fin de l'opération, les développeurs obtiennent des données de synchronisation précises, identifiant les goulots d'étranglement de performances et les zones d'optimisation, améliorant finalement la vitesse d'application et l'expérience utilisateur.

Comprendre les marques et mesures

L'API de synchronisation de l'utilisateur exploite les interfaces PerformanceMark (les deux étendants PerformanceMeasure). Une marque stocke un horodatage, tandis qu'une mesure calcule l'intervalle entre deux marques. Chaque entrée comprend: PerformanceEntry

• : un identifiant descriptif. name
• : indique "marque" ou "mesure". entryType
• : l'horodatage (pour les marques) ou l'horodatage de la marque de départ (pour les mesures). startTime
• : 0 pour les marques; le temps écoulé pour les mesures. duration

Méthodes API et récupération des données

L'API expose quatre méthodes dans l'objet

: window.performance

• : crée un horodatage avec le nom donné. mark(name)
• : supprime les marques (tout ou spécifique). clearMarks([name])
• : mesure le temps entre deux points. measure(name[, mark1[, mark2]])
• : supprime les mesures (tout ou spécifique). clearMeasures([name])

Remarque: les noms ne sont pas des ID uniques; L'utilisation du même nom plusieurs fois se traduit par un tableau d'entrées triées par

. startTime

Pour accéder aux données stockées, utilisez

(pour les marques ou les mesures) et getEntriesByType(type), les deux tableaux triés renvoyés. getEntriesByName(name)

Exemple: Mesurer le temps d'exécution de la fonction

performance.mark("startFoo");
foo(); // Time-consuming function
performance.mark("endFoo");
performance.measure("durationFoo", "startFoo", "endFoo");
performance.clearMarks();
performance.clearMeasure("durationFoo");

Prise en charge du navigateur et polyfills

L'API de synchronisation utilisateur bénéficie d'un support généralisé. Cependant, usertiming.js fournit un polyfill pour les navigateurs dépourvus de support natif, ne nécessitant que la méthode performance.now() de l'API à haute résolution

.

démo et conclusion

Une démo (lien omis pour la concision) présente la fonctionnalité de l'API, y compris la gestion des erreurs pour les navigateurs non pris en charge et l'affichage des données mesurées.

L'API de synchronisation de l'utilisateur est un outil précieux pour une mesure précise des performances, offrant un contrôle granulaire et aidant à identifier les goulots d'étranglement des performances pour une expérience utilisateur plus fluide. Son large support de navigateur et son polyfill disponible garantissent sa convivialité sur un large éventail de plates-formes.

Questions fréquemment posées (FAQ)

La section FAQ reste largement inchangée, offrant des réponses concises aux questions courantes sur la fonctionnalité, l'utilisation et les limitations de l'API de synchronisation de l'utilisateur.

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!