N Tipps zum Schreiben von leistungsstarkem Javascript-Code_Javascript-Tipps

Javascript spielt seit vielen Jahren eine wichtige Rolle bei der Entwicklung von Webanwendungen, aber viele Entwickler ignorieren häufig einige Leistungskenntnisse. Insbesondere angesichts der kontinuierlichen Aktualisierung der Computerhardware sind Entwickler zunehmend besorgt über die Leistungsoptimierung von Javascript offensichtliche Auswirkung auf die Ausführungseffizienz der Webseite. In einigen Fällen beeinträchtigt jedoch nicht optimierter Javascript-Code zwangsläufig die Benutzererfahrung. Daher ist es selbst in der heutigen Zeit, in der die Hardwareleistung erheblich verbessert wurde, beim Schreiben von Javascript-Code von großem Nutzen, wenn Sie die Javascript-Spezifikationen befolgen und auf einige Leistungskenntnisse achten können, um die Wartbarkeit des Codes zu verbessern und die Leistung zu optimieren .

　 Hier sind einige Vorschläge zum Schreiben von Hochleistungs-Javascript-Code:

1. Versuchen Sie, für den Zugriff auf Arrays keine For-In-Schleife zu verwenden. Es wird empfohlen, für die Schleife eine For-Schleife zu verwenden: 　　

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. Es wird empfohlen, Objekte zwischenzuspeichern, insbesondere den DOM-Zugriff, der Ressourcen verbraucht:

 //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. Es wird empfohlen, keine zu tief verschachtelten Urteile innerhalb von Funktionen zu fällen:

//函数内嵌套判断语句过多
  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. Vermeiden Sie Zirkelbezüge und verhindern Sie Speicherlecks:

//需要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. Es wird empfohlen, die Rückgabe einer nicht deklarierten Variablen innerhalb einer Funktion zu vermeiden, die externe Variablen verunreinigen würde:

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

　6. var deklariert Variablen. Es wird empfohlen, sie in mehreren Zeilen zu schreiben

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

Hinweis: Tatsächlich ist der Unterschied in der Zeit einer einzelnen Funktion gering. Hier verwenden wir die kumulative Zeit für mehrere Schleifen zum Leistungsvergleich. Es kann zu Unterschieden in den Testergebnissen verschiedener PC-Konfigurationen oder Browser kommen.

Der obige Inhalt enthält N Vorschläge zum Schreiben von Hochleistungs-Javascript-Code. Ich hoffe, dass er für alle hilfreich ist.