Découvrir l'API Temps haute résolution

Points de base

• L'API de temps haute résolution est une interface JavaScript qui fournit un temps actuel avec une résolution submillisise, non affectée par la déviation ou le réglage de l'horloge du système, et fournit des options de mesure des performances plus fiables et plus fiables que les méthodes traditionnelles Date.now().
• L'API de temps haute résolution n'est pas largement pris en charge par tous les navigateurs, en prenant principalement l'Explorateur Internet 10, Firefox 15 (non préfixé) et Chrome 20 (avec le préfixe "WebKit"). Il est recommandé d'utiliser des fonctions pour tester la prise en charge du navigateur et l'utilisation du préfixe.
• Les développeurs peuvent facilement intégrer les API de temps haute résolution dans leur code en remplaçant Date.now() par performance.now(), améliorant ainsi la précision de mesure sans modifications majeures à la structure du code.

Dans le monde d'aujourd'hui, la performance est cruciale. Les développeurs doivent être en mesure de mesurer avec précision les performances de leur logiciel. Pour les personnes engagées dans le développement Web, W3C fournit une toute nouvelle API au nombre de temps de manière fiable, qui est l'API de temps haute résolution. Cet article explorera l'API à temps haute résolution et montrera comment l'utiliser. Pour mesurer les performances des fonctions, les développeurs Web utilisés pour utiliser la méthode JavaScript. Habituellement, le code de synchronisation ressemble à ceci:

Date.now()

La méthode récupère l'horodatage actuel en fonction du temps du système. Malheureusement, sa précision varie entre les différents agents utilisateur et n'est donc pas très fiable. Pour résoudre ce problème, W3C standardise l'API à temps haute résolution. L'API est décrite comme "

<code class="language-javascript">var startTime = Date.now();

// 一个耗时的函数
foo();
var test1 = Date.now();

// 另一个耗时的函数
bar();
var test2 = Date.now();

// 打印结果
console.debug("Test1 time: " + (test1 - startTime));
console.debug("Test2 time: " + (test2 - test1));</code>

une interface JavaScript qui fournit l'heure actuelle de la résolution submilliseconde et n'est pas affectée par la déviation ou les ajustements d'horloge système

". Le 23 octobre 2012, la spécification est devenue la recommandation de recommandation du W3C - la dernière étape avant qu'elle ne devienne la recommandation. Le 17 décembre, il est devenu la recommandation du W3C (mise à jour le 17 décembre). Date.now() Comment travailler avec API de temps haute résolution

Je dois admettre qu'il s'agit de l'API la plus simple que j'ai jamais lue car elle ne contient qu'une seule méthode. Cette API étend l'interface de performance, qui est également utilisée par l'API de synchronisation de navigation. Si vous n'en avez jamais entendu parler, consultez l'API de synchronisation de navigation: comment analyser efficacement le chargement des pages. La seule façon d'être exposée est now(), qui renvoie un DOMHighResTimeStamp indiquant l'heure actuelle en millisecondes. L'horodatage est très précis, avec une précision d'un millième de millisecondes. Notez que bien que Date.now() renvoie le nombre de millisecondes écoulées depuis 00:00:00 UTC le 1er janvier 1970, performance.now() Renvoie le nombre de millisecondes invoquées de performance.timing.navigationStart() (la navigation du document commence) à performance.now(), la La partie fractionnaire est des microsecondes. Une autre différence importante entre Date.now() et performance.now() est que ce dernier augmente monotone, donc la différence entre les deux appels ne sera jamais négative. Peut-être que vous vous demandez comment l'API Time haute résolution modifiera votre code. La bonne nouvelle est que cela ne changera rien. Vous pouvez améliorer la précision de vos mesures en remplaçant simplement Date.now() par performance.now(). Dans cet esprit, le code précédent sera réécrit comme suit:

<code class="language-javascript">var startTime = Date.now();

// 一个耗时的函数
foo();
var test1 = Date.now();

// 另一个耗时的函数
bar();
var test2 = Date.now();

// 打印结果
console.debug("Test1 time: " + (test1 - startTime));
console.debug("Test2 time: " + (test2 - test1));</code>

Compatibilité

Actuellement, seuls quelques navigateurs prennent en charge les API de temps haute résolution. Les seuls navigateurs de bureau qui prennent en charge cette API sont Internet Explorer 10, Firefox 15 (non préfixés) et Chrome 20 (avec préfixe "webkit", performance.webkitNow()). Chrome semble utiliser la version non préfixée à partir de la version 24. Au moment de la rédaction du moment de la rédaction, aucun navigateur mobile ne prend en charge cette API. Étant donné que la plage de support n'est pas large, une fonction est d'abord nécessaire pour tester la situation de support du navigateur et s'il est préfixé. La fonction suivante renvoie une chaîne vide lorsque le navigateur utilise la version non préfixée de l'API. Si une version préfixée est utilisée, le préfixe est renvoyé. Si l'API n'est pas prise en charge, retournez NULL.

<code class="language-javascript">var startTime = performance.now();

// 一个耗时的函数
foo();
var test1 = performance.now();

// 另一个耗时的函数
bar();
var test2 = performance.now();

// 打印更精确的结果
console.debug("Test1 time: " + (test1 - startTime));
console.debug("Test2 time: " + (test2 - test1));</code>

Pour les navigateurs qui ne prennent pas en charge cette API, vous pouvez utiliser une cale. L'auteur de Shim, Tony Gentilcore, est l'un des contributeurs de l'API. Dans son article intitulé "A Better Timer for Javascript", Gentilcore a écrit du code qui recherche d'abord la prise en charge native et utilise ensuite la méthode Date.getTime() comme se replie. Le code ressemble à ceci:

<code class="language-javascript">function getPrefix() {
  var prefix = null;
  if (window.performance !== undefined) {
    if (window.performance.now !== undefined)
      prefix = "";
    else {
      var browserPrefixes = ["webkit","moz","ms","o"];
      // 测试所有厂商前缀
      for(var i = 0; i < browserPrefixes.length; i++) {
        if (window.performance[browserPrefixes[i] + "Now"] != undefined) {
          prefix = browserPrefixes[i];
          break;
        }
      }
    }
  }
  return prefix;
}</code>

Intégrer tous les contenus

Cette section vous guidera à travers une page de démonstration simple. La démo testera d'abord la prise en charge du navigateur, puis utilisera une fonction appelée doBenchmark qui repose sur deux fonctions virtuelles pour comparer la méthode performance.now(). Notez que j'ai introduit une fonction getTime() indépendante de l'API. Son seul but est d'éviter la duplication inutile et de rendre le code plus concis. Le code source de la démonstration est le suivant: (Le long échantillon de code est omis ici car il ne correspond pas aux exigences de la question et est trop long)

Conclusion

Dans cet article, j'ai couvert ce qu'est l'API de temps haute résolution et comment l'utiliser. Comme je l'ai mentionné, il n'a pas encore été largement pris en charge, donc pour tester avec précision votre application Web, vous devrez attendre un certain temps. Cependant, comme vous pouvez le voir, l'API est très simple car elle ne contient qu'une seule méthode. Par conséquent, une fois que le support du navigateur est amélioré, la migration vers le temps de haute résolution sera rapide et facile.

(La partie FAQ est omise ici car elle ne correspond pas aux exigences de la question et est trop longue)

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!