Optimisation JavaScript

Ramón SACOTE

Écrit par Ramón Saquet

avec Le passage des utilisateurs d’appareils de bureau aux périphériques mobiles, l’optimisation des pages Web du client devient plus d’intérêt que par le passé, ce qui équivaut à des optimisations sur le serveur. Et il est de faire une analyse Web rapide sur des périphériques plus lents et des connexions qui, selon la couverture, peuvent être mauvaises ou même des coupes, ce n’est pas une tâche facile, mais il est nécessaire, car ils ont une vitesse plus élevée impliquera Utilisateurs plus satisfaits qui nous rendra visite plus souvent et mieux se positionnement dans les recherches de Mobile.

Dans cet article, je vais essayer certains des points dans lesquels vous devez accorder plus d’attention au moment de l’optimisation du JavaScript qui fonctionne sur le client. Tout d’abord, nous verrons comment optimiser votre téléchargement et votre compilation, et deuxièmement, comme optimisation de son exécution afin que la page ait une bonne performance. Comprendre la performance, la définition donnée par le modèle de rail de Google. Ces acronymes signifient:

interface interface en moins de 100 ms.
animations avec entièrement dessinés tous les 16 ms qui sont 60 fps ou 60 images par seconde.
Désactivé: lorsque l’utilisateur n’interagit pas avec la page, ce qui fonctionne en arrière-plan, il ne doit pas durer plus de 50 ms.
charge: la page doit charger à 1000 ms.

Ces moments, nous devons les atteindre dans le pire des cas (lorsque le Web est exécuté sur un ancien mobile), avec peu de ressources de processeur et de mémoire.

temps de chargement Web par rapport au bureau. — Comparaison de la charge d’un site mobile et sur le bureau obtenu à partir du rapport d’expérience utilisateur de la base de données public. L’histogramme montre le nombre d’utilisateurs ayant obtenu chaque temps de réponse. Comme vous pouvez le voir, le pic maximum sur mobile est de 2.5SY sur le bureau en 1.5s.

Suivant, d’abord, les actions nécessaires pour optimiser la décharge et la compilation et, deuxièmement, les actions nécessaires à optimiser l’exécution du code, cette partie étant plus technique, mais non moins.

actions Pour optimiser le téléchargement et la compilation du code JavaScript

Cachear dans le navigateur

Nous avons deux options. Le premier consiste à utiliser l’API d’API Cache JavaScript, à partir duquel nous pouvons utiliser en installant un travailleur de service. La seconde consiste à utiliser le cache de protocole HTTP. Si nous utilisons l’API de cache, notre application pourrait avoir la possibilité de fonctionner en mode déconnecté. Si nous utilisons le cache de protocole HTTP, à peu près, nous devons la configurer à l’aide du paramètre de contrôle du cache avec des valeurs publiques et max-Âge, avec une grande heure de cache, telle qu’un an. Ensuite, si nous voulons invalider ce cache, nous modifierons le nom du fichier.

Compresser avec Brotli Q11 et GZIP

Lors de la compression du code JavaScript, nous réduisons les bits qui sont transmis par le réseau et, par conséquent, le temps de transmission, mais il faut garder à l’esprit que nous augmentons le temps de traitement sur le serveur et le client, car le premier doit compresser le fichier et le second décompressez-le. Nous pouvons enregistrer la première fois si nous avons un cache de fichiers compressés sur le serveur, mais le temps de décompression du client et le temps de transmission compressé peut être supérieur à la durée de transmission du fichier décompressé, ce qui rend cette technique à télécharger plus lentement. Cela ne se produira qu’avec des fichiers très petits et avec des vitesses de transmission élevées. La vitesse de transmission de l’utilisateur ne peut pas savoir, mais on peut dire à notre serveur qui ne comprend pas les très petits fichiers, par exemple, vous indiquer qu’il ne comprend pas les fichiers inférieurs à 280 octets. Dans les connexions avec des vitesses élevées, supérieures à 100 Mb / s, cette valeur devrait être beaucoup plus élevée, mais il s’agit d’optimiser pour ceux qui ont des connexions mobiles avec peu de couverture, où la perte de performance est plus prononcée, bien que dans des connexions rapides, passez un peu plus lentement.

Le nouvel algorithme de compression de Brotli améliore la compression par rapport à la GZIP de 17%. Si le navigateur envoie, à l’en-tête du protocole HTTP, la valeur « BR » dans le paramètre de codage ACECT, cela signifie que le serveur peut envoyer le fichier au format Brotli au lieu de gzip.

Minimiser

Il consiste à utiliser un outil automatique pour éliminer les commentaires, les espaces, les onglets et remplacer les variables pour que le code occupe moins d’espace.Les fichiers minimisés doivent être encombrés sur le serveur ou générés déjà minimisé lors de leur téléchargement, car si le serveur doit les minimiser avec chaque demande, il aura une performance négative.

Unify the JavaScript Code

Il s’agit d’une technique d’optimisation qui n’est pas très importante si notre site Web fonctionne avec HTTPS et HTTP2, car ce protocole envoie les fichiers comme s’ils n’étaient qu’un, mais si notre site Web fonctionne avec http1.1 ou nous espérons Avoir de nombreux clients avec des navigateurs anciens qui utilisent ce protocole, l’unification est nécessaire pour optimiser le téléchargement. Mais ne devez pas être passés et unifiez tout le code Web dans le fichier unique, car si seul le code dont vous avez besoin, l’utilisateur de chaque page est envoyé, les octets peuvent être plutôt réduits. Pour ce faire, nous séparerons le code de base nécessaire à l’ensemble du portail de ce qui va être exécuté sur chaque page individuelle. De cette manière, nous aurons deux fichiers JavaScript pour chaque page, une avec les bibliothèques de base qui seront courantes pour toutes les pages et une autre avec le code spécifique de la page. Avec un outil comme WebPack, nous pouvons unifier et minimiser ces deux groupes de fichiers de notre projet de développement. Essayez que l’outil que vous utilisez pour cela générera les «cartes source». Ce sont des fichiers .MAP associés à l’en-tête du fichier final et dans lequel la relation entre le code minimisé et unifié et les fichiers de code source réels sont établis. De cette façon, nous pouvons déboguer le code sans problèmes.

L’option d’unifier tout dans un seul fichier plus grand, a le bon côté que vous pouvez gifler tout le code JavaScript sur le Web dans le navigateur, sur La première visite et, dans la charge suivante, l’utilisateur n’aura pas à télécharger tout le code JavaScript. Donc, cette option que je ne le recommande que si la sauvegarde des octets est pratiquement méprisable par rapport à l’art antérieur et nous avons un faible taux de rebond.

marquer le JavaScript comme asynchrone

Nous devons Inclure le JavaScript comme suit:

<script async src="/codigo.js" />

De cette façon, nous empêchons l’apparition de l’étiquette de script bloquant la phase de document de la page de la page.

N’utilisez pas JavaScript intégré à la page

Lorsque vous utilisez la balise de script pour incorporer le code de la page, la construction DOM est également bloquée et encore plus si la fonction Document.write est utilisée () . En d’autres termes, il est interdit:

< script

= « 9f321e3aef »>

document.write (« Bonjour World! ») ; < / script >

chargez le JavaScript à l’en-tête de la page avec ASYNC

Avant d’avoir la balise ASYNC, il a été recommandé de mettre toutes les étiquettes de script au bas de la page pour éviter de bloquer la construction de celle-ci. Ce n’est plus nécessaire, en fait, il est préférable qu’il soit à l’intérieur de l’étiquette <, de sorte que le JavaScript commence à télécharger, analyser et compiler dans les meilleurs délais, car ces phases sont ceux qui vont le plus prendre. Si cet attribut n’est pas utilisé, le JavaScript doit être à la fin.

Supprimer JavaScript qui n’est pas utilisé

à ce stade, nous ne réduisons pas seulement le temps de transmission, mais également le Temps qui vous emmène au navigateur analysez et compilez le code. Pour ce faire, nous devons prendre en compte les points suivants:

S’il est détecté qu’une fonctionnalité n’est pas utilisée par les utilisateurs, nous pouvons la supprimer avec tout son code JavaScript associé, de sorte que le Web facturera plus vite et les utilisateurs l’apprécieront.
Nous pouvons également être inclus par erreur une bibliothèque qui n’est pas nécessaire ou que nous avons des bibliothèques qui offrent certaines fonctionnalités à partir desquelles nous avons déjà de manière native dans tous les navigateurs, pas besoin de Pour utiliser un code supplémentaire et plus rapidement.
Enfin, si nous voulons optimiser la fin, quel que soit le temps que vous portez, nous devrions éliminer le code que nous n’utilisons pas dans les bibliothèques. Mais je ne le recommande pas, parce que nous ne savons jamais quand vous pourrez avoir besoin d’être nécessaire.

reporter la charge JavaScript qui n’est pas nécessaire:

devrait être Fait avec ces fonctionnalités qui ne sont pas nécessaires pour le tirage initial de la page. Ce sont des fonctionnalités pour lesquelles l’utilisateur doit effectuer une certaine action pour l’exécuter. De cette façon, nous évitons de charger et de compiler le code JavaScript qui retarderait la visualisation initiale. Une fois la page complètement chargée, nous pouvons commencer la charge de ces fonctionnalités afin qu’elles soient immédiatement disponibles lorsque l’utilisateur commence à interagir.Google dans le modèle ferroviaire recommande que cette charge reportée soit faite en blocs de 50 ms de manière à ne pas influencer l’interaction de l’utilisateur avec la page. Si l’utilisateur interagit avec une fonctionnalité qui n’a pas encore été chargé, nous devons le charger à ce moment-là.

actions Pour optimiser l’exécution du code JavaScript

Évitez d’utiliser trop de mémoire

Vous ne pouvez pas dire à quel point la mémoire sera trop importante, mais vous pouvez dire que nous devrions toujours essayer de ne pas utiliser plus que nécessaire, car nous ne savons pas combien de mémoire aura le périphérique qui sera exécuté la toile. Lorsque le collecteur de déchets du navigateur est exécuté, il est destiné à l’exécution de JavaScript, et cela arrive à chaque fois que notre code demande au navigateur de réserver une nouvelle mémoire. Si cela se produit fréquemment, la page fonctionnera lentement.

dans l’onglet « Mémoire » des outils de développeur chrome, nous pouvons voir la mémoire occupée par chaque fonction JavaScript:

Mémoire réservée par la fonction JavaScript. — Mémoire réservée par fonction

Évitez les fuites de mémoire

Si nous avons une fuite de mémoire dans une boucle, la page sera réservée de plus en plus de mémoire occupant tout le périphérique disponible et de tout faire de plus en plus lent. Cette défaillance est généralement donnée dans des carrousels et des curseurs d’images.

Chrome Nous pouvons analyser si notre site Web a des fuites de mémoire avec l’enregistrement d’une timeline sur l’onglet Performance des outils de développement:

Affichage de la fuite de mémoire sur l'onglet Performances Google Chrome. — Il s’agit de l’aspect qui a une fuite de mémoire dans « performance » de la mémoire dans l’onglet « Performances » de Google Chrome où Nous pouvons observer une croissance constante des nœuds JS DOM et des tas.

Les fuites de mémoire sont généralement éliminées de la page, mais qu’ils ont Toute variable qui les fait référence et, par conséquent, le collecteur des ordures ne peut pas les éliminer et ne pas comprendre comment la portée des variables et des fermetures dans le travail JavaScript.

Arbres Dom Dom Doming. — Dom Dom Dom Arbres (Dom Dom Dom) qui occupent une mémoire car il y a des variables qui les rendent en référence.

USA web ouvriers lorsque vous devez exécuter le code Vous avez besoin d’un lot d’exécution

Tous les processeurs d’aujourd’hui sont multi-cellules et multi-nœuds, mais JavaScript est traditionnellement une langue monohyllique et, bien qu’il ait des timers, ceux-ci sont exécutés dans le même thread d’exécution, dans lequel, De plus, l’interaction avec l’interface est exécutée, alors que JavaScript exécute l’interface est bloquée et que plus de 50 ms sera notable. Les ouvriers et les ouvriers du Web nous apportent l’exécution multi-fan à JavaScript, bien qu’ils ne permettent pas d’accéder directement au dimanche. Nous devrons donc penser à retarder l’accès à celui-ci, afin d’appliquer des travailleurs Web dans des cas que nous avoir un code qui après-midi de plus de 50 ms à exécuter.

à l’aide de la fetch API (AJAX)

L’utilisation de l’API de FETCH ou AJAX est également un bon moyen pour l’utilisateur de percevoir une durée de charge plus rapide, mais nous ne devrions pas l’utiliser dans la charge initiale, mais dans la navigation ultérieure et d’une manière indexable. Pour ce faire, le meilleur moyen de mettre en œuvre est d’utiliser un cadre qui utilise Universal JavaScript.

priorise l’accès aux variables locales

JavaScript Voir d’abord si la variable existe localement et suit la recherche Dans les zones supérieures, les dernières variables globales étant. JavaScript Accédez aux variables locales plus rapidement car vous n’avez pas à rechercher la variable dans des ambitimes plus élevés pour le trouver, c’est donc une bonne stratégie d’économie dans les variables locales Ces variables d’une superficie supérieure à celle que nous allons accéder plusieurs fois et, en outre, Ne créez pas de nouvelles zones avec des fermetures ou avec l’aide et essayez des déclarations de capture, sans qu’il soit nécessaire.

Si vous accédez plusieurs fois à un article DOM pour l’enregistrer dans une variable locale

Accès au DOM est lent. Donc, si nous allons lire plusieurs fois le contenu d’un article, mieux l’enregistrer dans une variable locale, de sorte que le JavaScript n’aura donc pas à rechercher l’élément au soleil chaque fois que vous souhaitez accéder à son contenu. Mais faites attention, si vous gardez un morceau de DOM dans une variable que vous supprimez ultérieurement de la page et que vous n’utilisez plus, essayez ensuite d’attribuer à «NULL» la variable où vous l’aviez sauvegardée afin de ne pas causer de fuite de mémoire .

groupe et minimiser les lectures et les scripts DOM et CSSOM

Lorsque le navigateur tire une page exécute le chemin de représentation critique qui suit les étapes suivantes:

le HTML est reçu.
commence à construire le DOM.
Bien que le DOM soit construit, des ressources externes sont demandées (CSS et JS).
Le CCSOM (Mélange DOM et le CSS) est construit.
L’arborescence de représentation est créée (ce sont les parties du CSSOM qui seront tirées).
De l’arborescence de représentation est calculé la géométrie de chaque partie visible de l’arborescence dans une couche. Cette étape est appelée mise en page ou refusion.
Dans la dernière étape de la peinture, les couches d’étape 6 sont peintes et composent une sur une autre pour afficher la page à l’utilisateur.
Si vous avez fini de compiler le JavaScript, il fonctionne (en réalité, cette étape pourrait survenir à tout moment après l’étape 3, étant meilleure dès que possible).
Si lors de l’étape précédente, le code JavaScript force Pour redonner une partie du DOM ou le CSSOM, nous renvoyons plusieurs étapes derrière cela seront exécutées jusqu’au point 7.

Construction de l'arbre de rendu ou de l'arbre de rendu. — Construction de l’arborescence de représentation

Bien que les navigateurs collent les changements de la Arbre de représentation et décider quand faire la repeinte, si nous avons une boucle dans laquelle nous lisons le DOM et / ou le CSSOM et le modifiez dans la ligne suivante, le navigateur peut voir F ESTADO Pour exécuter le reflet ou repeindre la page plusieurs fois, surtout si la lecture suivante dépend de l’écriture précédente. C’est pourquoi il est recommandé:

Séparez toutes les lectures dans une boucle distincte et faites toutes les écritures à la fois avec la propriété CSstext s’il s’agit du CSSOM ou de l’innerhtml si c’est le Sunder, alors Le navigateur n’aura que je ne devrai que lancer un repeindre.
Si les lectures dépendent des Écritures précédentes, demandez un moyen de réécrire l’algorithme afin que cela ne soit pas comme ça.
Si Vous n’avez pas d’autre choix appliquer de nombreux changements à un élément du dimanche, enlevez-le du dimanche, apportez les changements et retournez-le à introduire où c’était.
sur Google Chrome, nous pouvons analyser ce qui se passe sur la voie de représentation critique avec l’outil de phare de l’onglet « Audits » ou sur l’onglet « Performances » en enregistrant ce qui se passe lorsque la page est chargée.

Analyse de la performance de l'outil de phare. — Dans cette analyse de performance du phare de la page d’accueil de Google Nous pouvons voir quelles ressources bloquer la voie de représentation critique.

Utilisez la fonction RestostanimationFrame (rappel) dans les animations et les effets qu’ils dépendent de la défilation

La fonction RestostanimationFrame (), provoque la fonction transmise en tant que paramètre ne provoque pas de repeindre, jusqu’à la prochaine planification. Ceci, en plus d’éviter de repeindre inutile, a pour effet que les animations s’arrêtent pendant que l’utilisateur est dans un autre onglet, sauvegarder la CPU et la batterie de l’appareil.

Les effets qui dépendent de défilement sont les plus lents, car le DOM suivant Les propriétés forcent une refusion (étape 7 du point précédent) lors de leur accès:

offsetTop, offsetLeft, offsetWidth, offsetHeightscrollTop, scrollLeft, scrollWidth, scrollHeightclientTop, clientLeft, clientWidth, clientHeightgetComputedStyle() (currentStyle en IE)

si en plus d’accéder à l’une de ces propriétés, ensuite sur elles, en fonction de la base. Nous peignons une bannière ou un menu qui vous suive en déplaçant le défilement ou un effet de défilement, plusieurs couches repeignez chaque fois que vous déplacez le défilement, affectant négativement le temps de réponse de l’interface, avec lequel nous pouvons avoir un rouleau qui donne un saut à la place. de glisser doucement. Par conséquent, avec ces effets, la dernière position du défilement dans l’événement Onscroll doit être enregistrée dans une variable globale et, après avoir utilisé la fonction RestostanimationFrame () uniquement si l’animation précédente est terminée.

S’il y a De nombreux événements similaires AGRIC IT

Si vous avez 300 boutons que lorsque vous cliquez sur Fabrication de la même manière, nous pouvons affecter un événement à l’élément parent des 300 boutons au lieu d’attribuer 300 événements à chacun d’eux. En cliquant sur un bouton, l’événement « Bubble » au parent et à partir de celui-ci, nous pouvons savoir quel bouton l’utilisateur a cliqué et modifier le comportement en conséquence.

méfiez-vous des événements qui tirent plusieurs fois suivi

événements tels que Onmousemove ou Onscroll, tirer plusieurs fois de suite tandis que l’action est effectuée. Essayez donc de contrôler que le code associé ne fonctionne pas plus de fois que les éléments nécessaires, car il s’agit d’une erreur assez courante.

Évitez l’exécution du code avec le code avec Eval (), Fonction (), SetTimeOut () et seinterval ()

Le fait de l’introduction de code dans un littéral à analyser et de compiler Au cours de l’exécution du reste du code est assez lent, par exemple: Eval (« C = A + B »); Vous pouvez toujours refaire le programme pour éviter de devoir faire cela.

Implémentez les optimisations que vous appliqueriez dans n’importe quel autre langage de programmation

utilise toujours les algorithmes avec la complexité la moins de calcul o Complexité cyclomatique pour que la tâche soit résolue.
utilise les structures de données optimales pour atteindre le point précédent.
réécrit l’algorithme pour obtenir le même résultat avec moins de calculs.
Évitez les appels récursifs, en modifiant l’algorithme par un équivalent qui utilise une pile.
Créez une fonction avec un coût élevé et des appels répétés selon différents blocs de code Enregistrer dans la mémoire le résultat de la mémoire. appel suivant.
Mettez les calculs et les appels à des fonctions répétées dans des variables.
Lorsque vous marchez une boucle, stockez la taille de la boucle dans une variable en premier, pour éviter de le calculer à nouveau. , dans son état d’achèvement, dans chaque itération.
Factorizar et simplifie les formules mathématiques.
remplace les calculs qui ne dépendent pas de variables par constantes et laisse le calcul commenté.
utilise des tableaux de recherche: ils servent à obtenir une valeur basée sur une autre. d’utiliser un bloc de commutation.
Faites que les conditions toujours plus susceptibles de tirer parti de l’exécution spéculative du processeur, car la prédiction des sauts échouera moins.
Simplifiez les expressions booléennes Avec les règles de la logique booléenne ou mieux encore avec Karnaugh Maps.
utilise des opérateurs au niveau du bit lorsque vous pouvez les utiliser pour remplacer certaines opérations, car ces opérateurs utilisent moins de cycles de processeur. L’utilisation de la connaissance arithmétique binaire, par exemple: étant une valeur XA d’une variable entière, nous pouvons mettre « y = x > 1 ; » au lieu de « y = x / 2; » ou « y = x & 0xff; » Au lieu de « Y = x% 256 ».

Ce sont quelques-uns de mes favoris, le plus important étant les trois premiers et la plus d’étude et de pratique. Ces derniers sont des micro-optimisations qui ne valent que la peine si vous effectuez uniquement lorsque vous écrivez le code ou s’il s’agit d’un éditeur de vidéos ou d’un jeu vidéo, bien que dans ces cas, vous serez meilleur que le WebAsscript au lieu de JavaScript au lieu de JavaScript. .

Outils pour détecter les problèmes

Nous avons déjà vu plusieurs. Parmi tous, le phare est le plus facile à interpréter, car il nous donne simplement une série de points à améliorer, comme cela peut également nous donner les perspectives Google PagesPeed ou, beaucoup d’autres, comme Gtmetrix. En Chrome, nous pouvons également utiliser, dans l’option « Plus d’outils » dans le menu principal, le gestionnaire de tâches, pour voir la mémoire et la CPU utilisée par chaque onglet. Pour une analyse encore plus technique, nous avons les outils pour les développeurs Firefox et Google Chrome, où nous avons l’onglet appelé « performance » et qui nous permet d’analyser les temps de chaque phase, des fuites de mémoire, etc. Voyons un exemple:

Analyse de performance de chrome Google. — dans l’analyse de performance de Google Chrome, dans l’outil Menu Cela nous permet de simuler un processeur et un réseau plus lent, et nous voyons, entre autres choses, les images ou les tables par seconde (rappelons-nous qu’il doit être inférieur à 16 ms) et les phases de la voie de représentation critique avec des couleurs: En bleu, le temps de chargement des fichiers, en jaune la durée de fonctionnement des scripts, en violet le temps de construction de l’arborescence de représentation (y compris les réflexions ou la construction de la disposition) et en vert le temps de peinture. En outre, le temps qui a conduit à peindre chaque image apparaît et, comme cela a été.

Résumé de l'outil DEVTools avec un préavis de problème de performance. — dans l’analyse de performance de Google Chrome, dans l’outil Menu Cela nous permet de simuler un processeur et un réseau plus lent, et nous voyons, entre autres choses, les images ou les tables par seconde (rappelons-nous qu’il doit être inférieur à 16 ms) et les phases de la voie de représentation critique avec des couleurs: En bleu, le temps de chargement des fichiers, en jaune la durée de fonctionnement des scripts, en violet le temps de construction de l’arborescence de représentation (y compris les réflexions ou la construction de la disposition) et en vert le temps de peinture. En outre, le temps qui a conduit à peindre chaque image apparaît et, comme cela a été.