Tous ceux qui écrivent du JS savent qu'il existe de nombreuses façons d'écrire le même effet. Les résultats peuvent être les mêmes mais les étapes sont différentes. Cependant, même si vous avez écrit l'effet, les performances de la page ont été considérablement réduites. Désormais, dans le développement de scripts, l’amélioration des performances des scripts devient de plus en plus importante. Comment optimiser votre code JavaScript ? Comment tracer la ligne droite la plus courte entre deux points ? Aujourd'hui, je vais vous résumer comment écrire de manière optimale votre propre code JavaScript.
Les pages Web traditionnelles ne contiennent pas beaucoup de scripts, du moins ils n'affectent pas trop les performances de la page Web. Cependant, à mesure que les pages Web ressemblent de plus en plus à des applications, les scripts ont un impact croissant sur celles-ci. À mesure que de plus en plus d'applications sont développées à l'aide des technologies Web, l'amélioration des performances des scripts devient de plus en plus importante. Les applications de bureau utilisent généralement un compilateur pour convertir le code source en binaire final. Le compilateur peut passer du temps à optimiser autant de performances que possible lors de la génération de l'application finale. Les applications Web n'ont pas ce luxe. Comme ils doivent fonctionner sur plusieurs navigateurs, plates-formes et architectures, ils ne peuvent pas être entièrement précompilés. Le navigateur prendra le script un par un, l'interprétera et le compilera, mais l'application finale devrait se charger aussi rapidement et s'exécuter aussi facilement qu'une application de bureau. Il devrait fonctionner sur une grande variété d’appareils, depuis les ordinateurs de bureau classiques jusqu’aux téléphones mobiles.
Les navigateurs sont plutôt efficaces pour y parvenir, et Opera possède actuellement l'un des moteurs de script les plus rapides de tous les navigateurs. Cependant, les navigateurs ont également certaines limites, auxquelles les développeurs Web doivent prêter attention. Pour garantir que votre application Web s'exécute aussi rapidement que possible, cela peut être aussi simple que d'échanger une boucle, de modifier un style fusionné au lieu de trois ou d'ajouter uniquement des scripts qui s'exécutent réellement.
Cet article présentera quelques changements qui peuvent améliorer les performances des applications Web, couvrant ECMAScript - le langage de base de JavaScript, du DOM et du chargement de fichiers.
Astuce
ECMAScript
Évitez d'utiliser eval ou le constructeur de fonction
Réécrivez eval
Si vous avez besoin d'une fonction, utilisez la fonction
Ne pas utiliser with
Ne pas utiliser try-catch-finally dans les fonctions qui nécessitent des performances
Isoler l'utilisation de eval et with
Essayer de ne pas utiliser des variables globales
Faites attention au remplacement implicite des objets
Évitez d'utiliser le for-in dans les fonctions qui nécessitent des performances
Utilisez la forme cumulative pour concaténer des chaînes
Rapport de fonctionnement de base L'appel des fonctions est plus rapide
Transmettre des fonctions au lieu de chaînes pour setTimeout() et setInterval()
DOM
Redessiner et redistribuer
minimise le nombre de redistributions
Redistribution minimale
Modifie l'arborescence du document
Modifie les éléments invisibles
Mesure
un changement Plusieurs styles
La douceur pour la vitesse
Éviter de récupérer un grand nombre de nœuds
Améliorer la vitesse grâce à XPath
Éviter les modifications lors de la traversée du DOM
Utiliser des variables pour mettre en cache les valeurs DOM dans les scripts
Chargement de documents
Éviter de conserver la même référence entre plusieurs documents
Navigation rapide dans l'historique
Utiliser XMLHttpRequest
pour créer dynamiquement des éléments