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,