Comment améliorer les performances de l'opérateur spread en javascript ?

Dans cet article, nous allons effectuer un test intéressant pour voir comment nous pouvons améliorer les performances de l'opérateur de spread.

Commençons par une brève introduction au fonctionnement de l'opérateur de propagation dans les tableaux.

Les opérateurs d'expansion, les trois couramment utilisés, permettent d'étendre le tableau dans chaque petit bloc. Utilisez ensuite la syntaxe entre crochets [] pour réassembler ces petits morceaux afin de construire un nouveau tableau. L'opérateur de propagation

peut être placé n'importe où entre crochets [].

const numbers = [1, 2, 3];
[0, ...numbers];    // => [0, 1, 2, 3]
[0, ...numbers, 4]; // => [0, 1, 2, 3, 4]
[...numbers, 4];    // => [1, 2, 3, 4]

Pour répondre à la question que nous avons posée au début, le positionnement de l'opérateur spread au sein du tableau littéral améliore-t-il les performances ? Explorons plus loin.

Ajouter aux fonctions head et tail

Avant de commencer la comparaison des performances, définissons deux fonctions.

Le premier est appendToTail() :

function appendToTail(item, array) {
  return [...array, item];
}

const numbers = [1, 2, 3];
appendToTail(10, numbers); // => [1, 2, 3, 10]

appendToTail() permet d'insérer une valeur à la fin du tableau. Cette fonction utilise la méthode d'écriture suivante [...array, item].

La seconde est appendToHead() :

function appendToHead(item, array) {
  return [item, ...array];
}

const numbers = [1, 2, 3];
appendToHead(10, numbers); // => [10, 1, 2, 3]

appendToHead() est une fonction pure qui renvoie un nouveau tableau avec la valeur ajoutée insérée en tête du tableau d'origine. Il utilise [item, ...array].

Pour être honnête, sur la base des performances des deux fonctions ci-dessus, il n'y a aucune raison de penser que ces fonctions auront des efficacités différentes. Mais la réalité est peut-être différente de ce que nous imaginions. Continuons les tests.

Test de performances

J'ai utilisé MacBook Pro pour tester [... array, item] et [item, ...array] sur un ordinateur portable avec les 3 navigateurs suivants pour comparer les performances des deux :

• Chrome 76
• Firefox 68
• Safari 12.1

Voici les résultats des tests de performances :

Comme prévu, [...array, item] et [item, ...array] ont les mêmes performances dans Firefox et Safari.

Cependant, dans Chrome, [...array, item] fonctionne deux fois plus vite que [item, ...array]. C'est un résultat utile.

Pour améliorer les performances de l'opérateur spread dans Chrome, utilisez l'opérateur spread au début d'un littéral de tableau :

const result = [...array, item];

Mais une autre question se pose : quelle est la cause de ce problème ?

À partir de la version 7.2 du moteur V8, la prise en charge de l'exécution de JavaScript dans Chrome permet de nouvelles optimisations pour l'opérateur de diffusion : Optimisation du chemin rapide.

Décrivez son fonctionnement en quelques phrases, comme suit :

Sans cette optimisation, lorsque le moteur rencontre l'opérateur spread [...iterable, item]时, il appellera l'itérateur de l'objet itérableiterator.next(). A chaque itération, la mémoire du tableau de résultats est augmentée et les résultats de l'itération sont ajoutés au tableau de résultats.

Mais l'optimisation du chemin rapide détecte les itérables connus (comme les tableaux d'entiers) et ignore complètement la création d'objets itérateurs. Le moteur lit ensuite la longueur du tableau étendu et alloue de la mémoire une seule fois pour le tableau résultant. Le tableau est ensuite propagé par index, en ajoutant chaque élément au tableau résultant.

L'optimisation du chemin rapide ignorera la création d'objets d'itération et n'allouera de la mémoire qu'une seule fois pour les résultats. Les performances sont ainsi améliorées.

Structures de données prises en charge

L'optimisation du chemin rapide fonctionne avec les structures de données JavaScript standard suivantes.

Tableau

const numbers = [1, 2, 3, 4];

[...numbers, 5]; // => [1, 2, 3, 4, 5]

Chaîne

const message = 'Hi';

[...message, '!']; // => ['H', 'i', '!']

Ensembles

const colors = new Set(['blue', 'white']);

[...colors, 'green'];          // => ['blue', 'white', 'green']
[...colors.values(), 'green']; // => ['blue', 'white', 'green']
[...colors.keys(), 'green'];   // => ['blue', 'white', 'green']

Maps

Dans les objets Map, seules les méthodes map.keys() et map.values() sont supportées :

const names = new Map([[5, 'five'], [7, 'seven']]);

[...names.values(), 'ten']; // => ['five', 'seven', 'ten']
[...names.keys(), 10];      // => [5, 7, 10]

Conclusion

quand Quand le tableau étendu se trouve au début du tableau, vous pouvez obtenir une amélioration des performances grâce à l'optimisation du chemin rapide. Il fonctionne avec la version 7.2 du moteur V8 (une fonctionnalité livrée avec Chrome v72 et NodeJS v12).

Avec cette optimisation, les tests de performances montrent que [... array, item] fonctionne au moins deux fois plus vite que [item, ...array].

Veuillez noter que même si le chemin rapide est certainement utile, il est recommandé de l'utiliser lorsque les performances sont importantes ou lorsqu'il s'agit de grands tableaux.

Car, dans la plupart des cas, en forçant l’optimisation, l’utilisateur final ne ressentira probablement aucune différence.

Quelles autres optimisations de performances intéressantes connaissez-vous en JavaScript ? Pouvez-vous me le dire dans les commentaires ci-dessous ?

Si l'article peut vous apporter de l'aide ou de l'inspiration, ne soyez pas avare de vos likes et de vos étoiles. C'est pour moi la force motrice et la plus grande affirmation pour aller de l'avant

Lien original : https://dmitripavlutin.com/javascript-spread-operator-performance-optimization/

Pour plus de connaissances liées à la programmation, veuillez visiter : Vidéo de programmation ! !

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!