Mesurer les fonctions JavaScript & # x27; Performance

Les performances de l'application Web sont toujours cruciales, en particulier dans le développement Web. En tant que développeurs frontaux professionnels, nous devons prêter attention à l'optimisation des performances. De nombreuses méthodes d'optimisation des performances Web traditionnelles, telles que la réduction des demandes, l'utilisation des CDN et l'évitement d'écrire des rendus de blocage, sont toujours valables aujourd'hui. Cependant, à mesure que de plus en plus d'applications Web utilisent JavaScript, la validation de l'efficacité du code est devenue cruciale.

Supposons que vous ayez une fonction qui est fonctionnelle mais soupçonne qu'elle n'est pas efficace et que vous prévoyez de faire des améliorations. Comment prouver cette hypothèse? Quelles sont les meilleures pratiques pour tester les performances de la fonction JavaScript? Généralement, la meilleure façon est d'utiliser la fonction performance.now() intégrée pour mesurer l'heure avant et après l'exécution de la fonction. Cet article discutera de la façon de mesurer le temps d'exécution du code et les astuces pour éviter certains pièges courants.

Points clés

• Les performances du développement Web sont essentielles et peuvent être améliorées en vérifiant la vitesse du code. La meilleure façon de tester les performances des fonctions JavaScript est d'utiliser la fonction intégrée performance.now() pour mesurer l'heure avant et après l'exécution de la fonction.
L'API de temps haute résolution fournit une fonction appelée
• qui renvoie un objet now(). Cela fournit une description précise du temps passé, ce qui le rend plus précis que l'objet DOMHighResTimeStamp intégré. Date
Lorsque vous mesurez le temps d'exécution de la fonction, veillez à ne pas mesurer accidentellement un contenu sans importance. Assurez-vous que la seule opération à mesurer entre deux
• est l'exécution de la fonction en question. performance.now()
C'est une erreur courante de mesurer le temps d'exécution de la fonction une seule fois. Le temps d'exécution varie considérablement en fonction de divers facteurs, il est donc recommandé de répéter la fonction et de calculer le temps moyen ou médian.
Le contexte est important lors de la comparaison de la vitesse des différentes fonctions. La vitesse d'une fonction varie en fonction de la tâche spécifique qu'elle effectue. Par conséquent, afin d'écrire des applications Web plus rapides, il est important de faire des mesures et des comparaisons.

performance.now () L'API de temps haute résolution fournit une fonction appelée

qui renvoie un objet now(). Il s'agit d'un numéro de point flottant qui reflète l'heure actuelle en millisecondes, et est exact à un millième de millisecondes. Individuellement, ce nombre n'est pas très précieux pour votre analyse, mais la différence entre deux de ces nombres peut décrire avec précision combien de temps s'est écoulé. En plus d'être plus précis que l'objet DOMHighResTimeStamp intégré, il est également "monotone". Cela signifie que, tout simplement, il n'est pas affecté par le système (comme le système d'exploitation de votre ordinateur portable) corriger périodiquement le temps du système. Pour le dire simplement, définir deux instances de et le calcul de la différence ne représente pas le temps écoulé. La définition mathématique de "monotone" est que (pour les fonctions ou les quantités) changent de telle manière qu'il ne diminue jamais ou n'augmente jamais Date. Une autre façon de l'expliquer est d'imaginer l'utiliser pendant une période de temps pendant laquelle l'horloge se bascule vers l'avant ou vers l'arrière. Par exemple, lorsque les horloges de votre pays acceptent toutes de sauter une heure pour maximiser le soleil pendant la journée. Si vous souhaitez créer une instance Date une heure avant que l'horloge ne soit recommante, puis une autre instance par la suite, regardez la différence, cela montrera quelque chose comme "1 heure 3 secondes 123 millisecondes". En utilisant les deux instances de , la différence sera "3 secondes 123 millisecondes et 456789 millièmes de milliseconde". Dans cette section, je n'entrerai pas dans les détails de cette API. Donc, si vous voulez en savoir plus et en voir quelques exemples en utilisant, je vous suggère de lire l'article découvrant l'API Time haute résolution. Maintenant que vous avez appris ce qu'est l'API Time à haute résolution et comment l'utiliser, plongeons dans certains pièges potentiels. Mais avant de le faire, définissons une fonction appelée Date, que nous utiliserons pour le reste de cet article. Date performance.now() makeHash() L'exécution de cette fonction peut être mesurée comme suit:

<code class="language-javascript">function makeHash(source) {
  var hash = 0;
  if (source.length === 0) return hash;
  for (var i = 0; i < source.length; i++) {
    var char = source.charCodeAt(i);
    hash = ((hash << 5) - hash) + char;
    hash = hash & hash; // Convert to 32bit integer
  }
  return hash;
}</code>

Si vous exécutez ce code dans votre navigateur, vous devriez voir quelque chose comme les suivants:

<code class="language-javascript">var t0 = performance.now();
var result = makeHash('Peter');
var t1 = performance.now();
console.log('Took', (t1 - t0).toFixed(4), 'milliseconds to generate:', result);</code>

Ce qui suit montre une démonstration en direct de ce code:

<code>Took 0.2730 milliseconds to generate: 77005292</code>

[Le lien Codepen doit être inséré ici, car je ne peux pas accéder aux sites Web externes, il ne peut pas être fourni]

Avec cet exemple à l'esprit, commençons la discussion.

Trail # 1 - Contenu sans importance

Dans l'exemple ci-dessus, vous pouvez remarquer qu'entre un

et un autre

, la seule chose que nous faisons est d'appeler la fonction

et d'attribuer sa valeur à la variable performance.now(). Cela nous donne le temps nécessaire pour exécuter la fonction sans rien d'autre. Cette mesure peut également être effectuée comme suit: performance.now() makeHash() result Il y a une démonstration en direct de cet extrait de code ci-dessous:

<code class="language-javascript">var t0 = performance.now();
console.log(makeHash('Peter'));  // 不好的主意！
var t1 = performance.now();
console.log('Took', (t1 - t0).toFixed(4), 'milliseconds');</code>

[Le lien Codepen doit être inséré ici, car je ne peux pas accéder aux sites Web externes, il ne peut pas être fourni]

Mais dans ce cas, nous mesurerons le temps nécessaire pour appeler la fonction makeHash('Peter') et le temps nécessaire pour envoyer et imprimer cette sortie sur la console. Nous ne savons pas combien de temps il faut pour que ces deux opérations prennent. Vous ne connaissez que le temps de combinaison. De plus, le temps nécessaire pour envoyer et imprimer varie considérablement en fonction de ce qui se passe dans le navigateur ou même dans le navigateur à ce moment-là. peut-être que vous savez exactement à quel point c'est lent. Cependant, l'exécution de plusieurs fonctions est également erronée, même si chaque fonction n'implique aucune E / S. Par exemple:

console.log De même, nous ne savons pas comment le temps d'exécution est alloué. Est-ce une affectation variable, un appel

ou un appel

<code class="language-javascript">function makeHash(source) {
  var hash = 0;
  if (source.length === 0) return hash;
  for (var i = 0; i < source.length; i++) {
    var char = source.charCodeAt(i);
    hash = ((hash << 5) - hash) + char;
    hash = hash & hash; // Convert to 32bit integer
  }
  return hash;
}</code>

?

toLowerCase() Trail # 2 - Mesurer une seule fois toString()

Une autre erreur courante consiste à faire une mesure une seule fois, à résumer le temps pris et à tirer des conclusions sur la base de cette période. À différents moments, cela est probablement complètement différent. Le temps d'exécution dépend en grande partie de divers facteurs:

Temps d'échauffement du compilateur (par exemple, le temps où le code est compilé en bytecode)

Le fil principal est occupé à gérer d'autres choses que nous ne réalisons pas, c'est en cours
Les processeurs de votre ordinateur sont occupés avec certaines choses qui ralentiront le navigateur entier
• Une méthode d'amélioration incrémentielle consiste à exécuter la fonction à plusieurs reprises, comme suit:

Ce qui suit montre une démonstration en direct de cet exemple:

<code class="language-javascript">var t0 = performance.now();
var result = makeHash('Peter');
var t1 = performance.now();
console.log('Took', (t1 - t0).toFixed(4), 'milliseconds to generate:', result);</code>

[Le lien Codepen doit être inséré ici, car je ne peux pas accéder aux sites Web externes, il ne peut pas être fourni]

Le risque de cette approche est que notre moteur JavaScript de navigateur peut effectuer des optimisations secondaires, ce qui signifie que la deuxième fois que la fonction est appelée avec la même entrée, il peut bénéficier de la rappel de la première sortie et de l'utiliser simplement. Pour résoudre ce problème, vous pouvez utiliser de nombreuses chaînes d'entrée différentes au lieu d'envoyer à plusieurs reprises la même chaîne d'entrée (comme "Peter"). De toute évidence, le problème avec les tests avec différentes entrées est que la fonction que nous mesurons prend naturellement du temps. Peut-être que certaines entrées entraîneront un temps d'exécution plus long que d'autres.

Trail # 3 - sur-dépendance en moyenne

Dans la section précédente, nous avons appris que c'est une bonne habitude de répéter quelque chose et d'emprunter idéalement différentes entrées. Cependant, nous devons nous rappeler que le problème avec différentes entrées est que le temps d'exécution peut être beaucoup plus long que toutes les autres entrées. Alors prenons du recul et envoyons la même entrée. Supposons que nous envoyions la même entrée dix fois et imprimons le temps qu'il faut à chaque temps. La sortie peut ressembler à ceci:

<code class="language-javascript">function makeHash(source) {
  var hash = 0;
  if (source.length === 0) return hash;
  for (var i = 0; i < source.length; i++) {
    var char = source.charCodeAt(i);
    hash = ((hash << 5) - hash) + char;
    hash = hash & hash; // Convert to 32bit integer
  }
  return hash;
}</code>

Notez que la première fois, le nombre est complètement différent des neuf autres fois. Cela est probablement parce que le moteur JavaScript de notre navigateur a fait des optimisations et nécessite un peu d'échauffement. Nous pouvons à peine éviter cela, mais nous pouvons considérer de bons remèdes pour éviter de fausses conclusions. Une façon consiste à calculer la moyenne du temps pour les neuf dernières fois. Une autre approche plus pratique consiste à collecter tous les résultats et à calculer la médiane. Fondamentalement, ce sont tous les résultats dans l'ordre et sélectionnez le milieu. C'est là que performance.now() est si utile, car vous pouvez obtenir un numéro que vous pouvez utiliser comme vous le souhaitez. Essayons à nouveau, mais cette fois, nous utiliserons une fonction médiane:

<code class="language-javascript">var t0 = performance.now();
var result = makeHash('Peter');
var t1 = performance.now();
console.log('Took', (t1 - t0).toFixed(4), 'milliseconds to generate:', result);</code>

Trail # 4 - Comparez les fonctions dans l'ordre prévisible

Nous avons appris que c'est toujours une bonne idée de mesurer quelque chose plusieurs fois et de le faire en moyenne. De plus, le dernier exemple nous indique qu'il vaut mieux utiliser la médiane plutôt que la moyenne. Maintenant, en fait, une bonne utilisation pour mesurer le temps d'exécution d'une fonction est de comprendre laquelle de plusieurs fonctions est plus rapide. Supposons que nous ayons deux fonctions qui prennent le même type d'entrée et produisent le même résultat, mais en interne, ils fonctionnent différemment. Supposons que nous voulons une fonction qui renvoie True ou Faux si une chaîne existe dans un tableau d'autres chaînes, mais cela est insensible à la casse. En d'autres termes, nous ne pouvons pas utiliser Array.prototype.indexOf car il est insensible à la casse. Ceci est une implémentation comme celle-ci:

<code>Took 0.2730 milliseconds to generate: 77005292</code>

Nous avons immédiatement remarqué que cela peut être amélioré car la boucle haystack.forEach traverse toujours tous les éléments, même si nous avons un match précoce. Essayons d'écrire une meilleure version en utilisant un bon vieux pour Loop.

<code class="language-javascript">var t0 = performance.now();
console.log(makeHash('Peter'));  // 不好的主意！
var t1 = performance.now();
console.log('Took', (t1 - t0).toFixed(4), 'milliseconds');</code>

Voyons lequel est plus rapide maintenant. Nous le faisons en exécutant chaque fonction 10 fois et en collectant toutes les mesures:

<code class="language-javascript">var t0 = performance.now();
var name = 'Peter';
var result = makeHash(name.toLowerCase()).toString();
var t1 = performance.now();
console.log('Took', (t1 - t0).toFixed(4), 'milliseconds to generate:', result);</code>

Nous l'exécutons et obtenons la sortie suivante:

<code class="language-javascript">var t0 = performance.now();
for (var i = 0; i < 10; i++) {
  makeHash('Peter');
}
var t1 = performance.now();
console.log('Took', ((t1 - t0) / 10).toFixed(4), 'milliseconds to generate');</code>

Ce qui suit montre une démonstration en direct de cet exemple:

[Le lien Codepen doit être inséré ici, car je ne peux pas accéder aux sites Web externes, il ne peut pas être fourni]

Que s'est-il passé exactement? La première fonction est trois fois plus rapide. Cela n'aurait pas dû arriver!

L'explication est simple, mais subtile. La première fonction utilisant haystack.forEach bénéficie de certaines optimisations de bas niveau dans le moteur JavaScript du navigateur, et nous n'obtenons pas ces optimisations lorsque nous utilisons des techniques d'indexation du tableau. Cela prouve notre point: vous ne le saurez jamais à moins que vous ne le mesurez!

Conclusion

Pendant que nous essayions de démontrer comment obtenir un temps d'exécution précis en JavaScript en utilisant performance.now(), nous sommes tombés sur un scénario de référence où notre intuition était exactement l'opposé des conclusions dont nous venons avec nos résultats empiriques. Le fait est que si vous souhaitez écrire des applications Web plus rapides, votre code JavaScript doit être optimisé. Parce que les ordinateurs sont (presque) des êtres vivants, ils sont imprévisibles et surprenants. La façon la plus fiable de savoir que nos améliorations de code entraîneront des vitesses d'exécution plus rapides est la mesure et la comparaison. Nous ne savons jamais quel morceau de code est plus rapide, et si nous avons plusieurs façons de faire la même chose, une autre raison est que le contexte est important. Dans la section précédente, nous avons effectué une recherche de chaîne insensible à la casse, à la recherche d'une chaîne dans 26 autres chaînes. Si nous devions rechercher une ficelle dans 100 000 autres chaînes, la conclusion serait très probablement complètement différente. La liste ci-dessus n'est pas exhaustive, car il y a plus de pièges à connaître. Par exemple, mesurer des scénarios impraticables ou prendre uniquement des mesures sur un moteur JavaScript. Mais il est certain que performance.now() est un énorme atout pour les développeurs JavaScript qui souhaitent écrire des applications Web plus rapides et meilleures. Enfin et surtout, n'oubliez pas que la mesure du temps d'exécution ne produit qu'une seule dimension de "meilleur code". La complexité de la mémoire et du code doit également être considérée. Et toi? Avez-vous déjà utilisé cette fonction pour tester les performances de votre code? Sinon, comment procédez-vous à ce stade? Veuillez partager vos réflexions dans les commentaires ci-dessous. Commençons la discussion!

(La partie FAQ est omise, car elle est fortement dupliquée avec le contenu ci-dessus, gardez simplement les points clés.)

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!