N Conseils pour rédiger du code Javascript haute performance_conseils javascript

Pendant de nombreuses années, Javascript a joué un rôle important dans le développement d'applications Web, mais de nombreux développeurs ignorent souvent certaines connaissances en matière de performances. Surtout avec la mise à niveau continue du matériel informatique, les développeurs sont de plus en plus préoccupés par l'optimisation des performances de Javascript. impact évident sur l’efficacité d’exécution de la page Web. Mais dans certains cas, un code Javascript non optimisé affectera inévitablement l’expérience utilisateur. Par conséquent, même à l'ère actuelle où les performances matérielles ont été considérablement améliorées, lors de l'écriture de code Javascript, si vous pouvez suivre les spécifications Javascript et prêter attention à certaines connaissances en performances, il sera très utile d'améliorer la maintenabilité du code et d'optimiser les performances. .

　 Voici quelques suggestions pour écrire du code Javascript hautes performances :

1. Essayez de ne pas utiliser de boucle for-in pour accéder aux tableaux. Il est recommandé d'utiliser une boucle for pour boucler : 　　

function foo() {
   var i, b, c=[,,];
   for (i in c) {
    b = c[i];
    if(b === "")
     return b;
   }
  }
  //性能更好
  function foo() {
   var i, b, c=[,,];
   for (i=;i<c.length;i++) {
    b = c[i];
    if(b === "")
     return b;
   }
  } 

2. Il est recommandé de mettre en cache les objets, notamment les accès DOM, qui consomment des ressources :

 //c.length没有缓存，每次迭代都要计算一下数组的长度
  function foo() {
   var i, b, c=[,,];
   for (i=;i<c.length;i++) {
    b = c[i];
    if(b === "")
     return b;
   }
  }
  //性能更好，第一次将数组的长度缓存到变量l中，第二次及后续的循环无需计算数组长度
  function foo() {
   var i, b, c=[,,],l;
   for (i=,l=c.length;i<l;i++) {
    b = c[i];
    if(b === "")
     return b;
   }
  }

  //document.getElementById('info')没有缓存，每次都要遍历DOM
  function foo() {
   var e;
   document.getElementById('info').innerHTML="call ";
   document.getElementById('info').innerHTML="call ";
   
  }
  //性能更好，第二次无需访问DOM
  function foo() {
  var e=document.getElementById('info');
  e.innerHTML="call ";
   e.innerHTML="call ";
  }

　3. Il est recommandé de ne pas porter de jugements trop imbriqués au sein des fonctions :

//函数内嵌套判断语句过多
  function foo1() {
   var r={};
   r.data={};
   r.data.myProp=2;
   if (r) {
   if (r.data) {
    if (r.data.myProp) {
     //逻辑处理
    } 
    else {
     //逻辑处理
    }
   }
 }
 }
  //性能更好
 function foo2() {
   var r={};
   r.data={};
   r.data.myProp=2;
  if (!r) return;
  if (!r.data) return;  
  if (r.data.myProp) {
   //逻辑处理
  } else {
    //逻辑处理
  }
 }

4. Évitez les références circulaires et évitez les fuites de mémoire :

//需要jQuery
 function foo(e,d) {
  $(e).on("click", function() {
    //对d进行逻辑处理
    cbk(d);
      } 
  });
 }
 //打破循环!
 function foo(e, d) {
  $(e).on("click", cbk(d));
 }
 function cbk (d) {
 //逻辑处理
 }  

　5. Il est recommandé d'éviter de renvoyer une variable non déclarée au sein d'une fonction, ce qui polluerait les variables externes :

 function foo(a, b) {
  r = a + b;
  return r; //r未声明，则创建了一个全局变量
 }

　6. var déclare les variables. Il est recommandé de les écrire sur plusieurs lignes

 //自己测试结果是foo快，但也有一种观点是foo快
 function foo() {
  var c = ;
  var sum=;
  var d = ;
  var e;
 }
 function foo() {
  var c = ,sum=, d = , e;
 }

Remarque : en fait, la différence dans le temps d'une seule fonction est faible. Ici, nous utilisons le temps cumulé pour effectuer plusieurs boucles à des fins de comparaison des performances. Il peut y avoir des différences dans les résultats des tests de différentes configurations PC ou navigateurs.

Le contenu ci-dessus contient N suggestions pour écrire du code Javascript haute performance. J'espère qu'il sera utile à tout le monde.