Astuces JAVASCRIPT_javascript hautes performances que vous ne connaissez pas

Cet article partagera quelques bonnes pratiques pour un JavaScript efficace afin d'améliorer la compréhension par chacun des principes sous-jacents et de mise en œuvre de JS.

Stockage des données

Un problème classique en informatique est d'obtenir les meilleures performances de lecture et d'écriture en changeant l'emplacement de stockage des données. En JavaScript, l'emplacement de stockage des données aura un impact significatif sur les performances du code. – Si vous pouvez utiliser {} pour créer un objet, n'utilisez pas new Object. Si vous pouvez utiliser [] pour créer un tableau, n'utilisez pas new Array. La vitesse d'accès des littéraux dans JS est supérieure à celle des objets. – Plus une variable est profonde dans la chaîne de portée, plus il faut de temps pour y accéder. Pour ce type de variable, vous pouvez l'enregistrer en utilisant des variables locales via la mise en cache pour réduire le nombre d'accès à la chaîne de portée - il n'y a pas beaucoup de différence entre l'utilisation de la notation par points (object.name) et de l'opérateur (object[name]), uniquement Safari va Il y a une différence, le clic est toujours plus rapide

Boucle

Les boucles courantes dans JS incluent les types suivants :

for(var i = 0; i < 10; i++) { // do something} 
for(var prop in object) { // for loop object}  
[1,2].forEach(function(value, index, array) { // 基于函数的循环})

Il ne fait aucun doute que la première méthode est native, a la consommation de performances la plus faible et est la plus rapide. La deuxième méthode de for-in générera plus de surcharge (variables locales) pour chaque itération, et sa vitesse n'est que de 1/7 de celle de la première méthode. La troisième méthode fournit évidemment une méthode de boucle plus pratique, mais sa vitesse n'est que de 1/8. du cycle normal. Par conséquent, vous pouvez choisir la méthode de recyclage appropriée en fonction de la situation de votre projet.

Délégué à l'événement

Imaginez ajouter un événement à chaque balise A de la page. Allons-nous ajouter un onClick à chaque balise ? Lorsqu'un grand nombre d'éléments dans la page doivent être liés au même gestionnaire d'événements, cette situation peut affecter les performances. Chaque événement lié augmente la charge sur la page ou pendant l'exécution. Pour une application frontale riche, trop de liaisons occuperont trop de mémoire sur les pages avec de fortes interactions. Une manière simple et élégante est la délégation d’événements. Il s'agit d'un flux de travail basé sur des événements : capturez couche par couche, atteignez la cible et faites des bulles couche par couche. Puisqu'il existe un mécanisme de propagation pour les événements, nous pouvons gérer les événements de tous les éléments enfants en liant les événements à la couche externe.

document.getElementById('content').onclick = function(e) { 
  e = e || window.event;  
  var target = e.target || e.srcElement;  //如果不是 A标签，我就退出  
  if(target.nodeNmae !=== 'A') { return }  //打印A的链接地址  
  console.log(target.href) }

Redessiner et réorganiser

Une fois que le navigateur a téléchargé HTML, CSS et JS, il générera deux arborescences : l'arborescence DOM et l'arborescence de rendu. Lorsque les propriétés géométriques du Dom changent, telles que la largeur, la hauteur, la couleur et la position du Dom, le navigateur doit recalculer les propriétés géométriques de l'élément et reconstruire l'arbre de rendu. Ce processus est appelé redessin et réarrangement.

bodystyle = document.body.style; 
bodystyle.color = red; 
bodystyle.height = 1000px; 
bodystyke.width = 100%;

La modification des trois attributs dans la méthode ci-dessus entraînera une redistribution et un redessinage du navigateur trois fois. Dans certains cas, la réduction de cette redistribution peut améliorer les performances de rendu du navigateur. La méthode recommandée est la suivante, effectuez une seule opération et complétez trois étapes :

bodystyle = document.body.style; 
bodystyle.cssText 'color:red;height:1000px;width:100%';

Chargement de JavaScript

IE8, Firefox3.5 et Chrome2 permettent tous de télécharger des fichiers JavaScript. Ainsi, <script> ne bloquera pas le téléchargement des autres balises. Malheureusement, le processus de téléchargement JS bloquera toujours le téléchargement d'autres ressources, telles que des images. Bien que les derniers navigateurs aient amélioré les performances en permettant les téléchargements parallèles, le blocage des scripts reste un problème. Par conséquent, il est recommandé de placer toutes les balises <script> en bas de la balise <body> pour minimiser l'impact sur le rendu de la page entière et empêcher les utilisateurs de voir un </script>

vide.

Déploiement haute performance de fichiers JS

Maintenant que tout le monde sait que plusieurs balises <script> affecteront la vitesse de rendu des pages, il n'est pas difficile de comprendre que « réduire le HTTP requis pour le rendu des pages » est une règle classique pour accélérer les sites Web. Par conséquent, la fusion de tous les fichiers JS dans un environnement de production réduira le nombre de requêtes et accélérera ainsi le rendu des pages. En plus de fusionner des fichiers JS, nous pouvons également compresser des fichiers JS. La compression fait référence à la suppression des parties d'un fichier qui ne sont pas pertinentes pour l'exécution du fichier. Le contenu supprimé inclut des caractères d'espacement et des commentaires. Le processus de modification peut généralement réduire la taille du fichier de moitié. Il existe également des outils de compression qui permettront de réduire la longueur des variables locales, tels que : </script>

var myName = "foo" + "bar"; 
//压缩后变成 
var a = "foobar";

Cache les fichiers JS

La mise en cache des composants HTTP peut grandement améliorer l'expérience utilisateur lors des visites répétées sur le site Web. Le serveur Web utilise « l’en-tête de réponse HTTP Expire » pour indiquer au client la durée pendant laquelle une ressource doit être mise en cache. Bien entendu, la mise en cache présente ses propres inconvénients : lorsque votre application est mise à niveau, vous devez vous assurer que les utilisateurs téléchargent le dernier contenu statique. Ce problème peut être résolu en modifiant le nom de fichier des ressources statiques. Vous pouvez voir le navigateur référencer jsapplication-20151123201212.js dans l'environnement de production. Cela enregistre le nouveau fichier JS sous forme d'horodatage pour résoudre le problème de la non mise à jour du cache.

Résumé

Bien sûr, un JS efficace n'a pas seulement ces domaines qui peuvent être améliorés. Si nous pouvons réduire certaines pertes de performances, nous pouvons utiliser JavaScript pour développer plus efficacement.

Tout ce que vous ne saviez pas sur JAVASCRIPT hautes performances, maintenant vous le savez !