Eine kurze Einführung in die Effizienz der JavaScript-Ausführung

Javascript Wir können verschiedene Codestile nach Belieben schreiben, was zwangsläufig zu Unterschieden in der Ausführungseffizienz führt, und der Entwicklungsprozess ist verstreut viele Möglichkeiten, die Codeleistung zu verbessern und die häufigen und leicht zu vermeidenden Probleme zu lösen

Javascripts eigene Ausführungseffizienz

Bereichskette in Javascript,Abschluss, prototypische Vererbung, Bewertung usw. bieten zwar verschiedene magische Funktionen, führen aber bei unvorsichtiger Verwendung zu einer geringen Ausführungseffizienz.

1. Globaler Import

Wir werden einige globale

Variablen (Fenster, Dokument, benutzerdefinierte globale Variablen usw.) verwenden, wer es weiß Die JavaScript-Bereichskette weiß, dass der Zugriff auf globale Variablen in einem lokalen Bereich das Durchlaufen der gesamten Bereichskette Schicht für Schicht bis zum Bereich der obersten Ebene erfordert, während die Zugriffseffizienz lokaler Variablen schneller und höher ist, wenn also einige globale Objekte werden häufig im lokalen Bereich verwendet, sie können in den lokalen Bereich importiert werden, zum Beispiel:

  //1、作为参数传入模块
  (function(window,$){
      var xxx = window.xxx;
      $("#xxx1").xxx();
      $("#xxx2").xxx();
  })(window,jQuery);

  //2、暂存到局部变量
  function(){
     var doc = document;
     var global = window.global;
 }

2, Evaluierung und Eval-ähnliche Probleme

Das wissen wir alle eval kann einen

String als js-Code verarbeiten. Es wird gesagt, dass Code, der mit eval ausgeführt wird, mehr als 100-mal langsamer ist als Code ohne eval (ich habe die spezifische Effizienz nicht getestet, aber ich bin interessiert. Studenten können es testen )

JavaScript-Code führt vor der Ausführung einen ähnlichen „Vorkompilierungs“-Vorgang durch: Zuerst erstellt er ein aktives Objekt in der aktuellen Ausführungsumgebung und legt die mit var deklarierten Variablen auf

fest Attribute des aktiven Objekts, aber zu diesem Zeitpunkt sind die diesen Variablen zugewiesenen Werte alle undefiniert, und die mit Funktion definierten Funktionen werden auch als Attribute des aktiven Objekts und deren Werte hinzugefügt ​​sind korrekt. ist die Definition der Funktion. Wenn Sie jedoch „eval“ verwenden, kann der Code in „eval“ (eigentlich eine Zeichenfolge) seinen Kontext nicht im Voraus erkennen und kann nicht im Voraus analysiert und optimiert werden, dh es können keine vorkompilierten Vorgänge ausgeführt werden. Daher wird auch seine Leistung stark reduziert

Tatsächlich wird eval jetzt nur noch selten verwendet. Worüber ich hier sprechen möchte, sind zwei eval-ähnliche Szenarien (

,new Function{} . 🎜 >3. Geben Sie Variablen frei, auf die nach dem Abschluss nicht mehr verwiesen wird. setTimeoutsetInterver

Der Rückgabewert der Variablen f im obigen Code ist die Methode res, die im Abschluss einer sofort ausgeführten Funktion zurückgegeben wird Behält Verweise auf alle Variablen (a, b, c usw.) in diesem Abschluss bei, sodass sich diese beiden Variablen immer im Speicher befinden. Insbesondere Verweise auf DOM-Elemente verbrauchen nur den Wert der a-Variablen in res, damit wir andere Variablen freigeben können, bevor der Abschluss zurückkehrt

setTimtout("alert(1)",1000);

setInterver("alert(1)",1000);

(new Function("alert(1)"))();

Die Effizienz von Js Betriebsdom

Im Prozess der Webentwicklung Der Engpass bei der Front-End-Ausführungseffizienz liegt häufig im DOM-Betrieb und ist eine sehr leistungsintensive Sache. Wie können wir während des DOM-Betriebs so viel Leistung wie möglich einsparen?

var f = (function(){
    var a = {name:"var3"};
    var b = ["var1","var2"];
    var c = document.getElementByTagName("li");
    //****其它变量
    //***一些运算
    var res = function(){
        alert(a.name);
    }
    return res;
})()

1. Reflow reduzieren

var f = (function(){
    var a = {name:"var3"};
    var b = ["var1","var2"];
    var c = document.getElementByTagName("li");
    //****其它变量
    //***一些运算
    //闭包返回前释放掉不再使用的变量
    b = c = null;
    var res = function(){
        alert(a.name);
        }
    return res;
})()

Was ist Reflow?

Wenn sich die Attribute eines DOM-Elements ändern (z. B. die Farbe), benachrichtigt der Browser render, um das entsprechende Element neu zu zeichnen.

Wenn die Änderung das Elementlayout betrifft (z. B. Breite), verwirft der Browser die ursprünglichen Attribute, berechnet sie neu und übergibt die Ergebnisse an Render, um die Seitenelemente neu zu zeichnen.

Methoden zur Reduzierung des Reflows

Löschen Sie zunächst das Element aus dem Dokument und platzieren Sie das Element dann nach Abschluss der Änderung wieder an seiner ursprünglichen Position (wenn ein Element und Wenn seine untergeordneten Elemente einer großen Anzahl von Reflow-Vorgängen unterzogen werden, werden die Auswirkungen der Methoden 1 und 2 deutlicher)

Setzen Sie die

Anzeige

des Elements auf „ none" und abgeschlossen. Ändern Sie nach der Änderung die Anzeige auf den ursprünglichen Wert

1. Wenn Sie mehrere Stilattribute ändern, definieren Sie eine Klassenklasse, anstatt das Stilattribut mehrmals zu ändern (

   für

   von bestimmten Schülern empfohlen)

2. Verwenden Sie documentFragment

3. , wenn Sie der Seite eine große Anzahl von Elementen hinzufügen

   Der obige Code führt den Dom mehrmals aus, was relativ effizient ist. Sie können das DocumentFragment in der folgenden Form erstellen. Fügen Sie es der Seite hinzu und führen Sie nur einen Reflow durch

   var frag = document.createDocumentFragment();
   for(var i=0;i<100:i++){
           var child = docuemnt.createElement("li");
           child.innerHtml = "child";
       frag.appendChild(child);
   }
   document.getElementById("parent").appendChild(frag);

   2、暂存dom状态信息

   当代码中需要多次访问元素的状态信息，在状态不变的情况下我们可以将其暂存到变量中，这样可以避免多次访问dom带来内存的开销，典型的例子就是：

   var lis = document.getElementByTagName("li");
   for(var i=1;i<lis.length;i++){
       //***
   }
   上述方式会在每一次循环都去访问dom元素，我们可以简单将代码优化如下
   var lis = document.getElementByTagName("li");
   for(var i=1,j=lis.length ;i<j;i++){
       //***
   }

   3、缩小选择器的查找范围

   查找dom元素时尽量避免大面积遍历页面元素，尽量使用精准选择器，或者指定上下文以缩小查找范围，以jquery为例

   • 少用模糊匹配的选择器：例如$("[name*='_fix']")，多用诸如id以及逐步缩小范围的复合选择器$("li.active")等

   • 指定上下文：例如$("#parent .class")，$(".class",$el)等

   4、使用事件委托

   使用场景：一个有大量记录的列表，每条记录都需要绑定点击事件，在鼠标点击后实现某些功能，我们通常的做法是给每条记录都绑定监听事件，这种做法会导致页面会有大量的事件监听器，效率比较低下。

   基本原理：我们都知道dom规范中事件是会冒泡的，也就是说在不主动阻止事件冒泡的情况下任何一个元素的事件都会按照dom树的结构逐级冒泡至顶端。而event对象中也提供了event.target（IE下是srcElement）指向事件源，因此我们即使在父级元素上监听该事件也可以找到触发该事件的最原始的元素，这就是委托的基本原理。废话不多说，上示例

   $("ul li").bind("click",function(){
       alert($(this).attr("data"));
   })

   上述写法其实是给所有的li元素都绑定了click事件来监听鼠标点击每一个元素的事件，这样页面上会有大量的事件监听器。

   根据上面介绍的监听事件的原理我们来改写一下

   $("ul").bind("click",function(e){
       if(e.target.nodeName.toLowerCase() ==="li"){
           alert($(e.target).attr("data"));
       }
   })

   这样一来，我们就可以只添加一个事件监听器去捕获所有li上触发的事件，并做出相应的操作。

   当然，我们不必每次都做事件源的判断工作，可以将其抽象一下交给工具类来完成。jquery中的delegate()方法就实现了该功能

   语法是这样的$(selector).delegate(childSelector,event,data,function)，例如：

   $("p").delegate("button","click",function(){
     $("p").slideToggle();
   });

   参数说明（引自w3school）

   参数	描述
   childSelector	必需。规定要附加事件处理程序的一个或多个子元素。
   event	必需。规定附加到元素的一个或多个事件。由空格分隔多个事件值。必须是有效的事件。
   data	可选。规定传递到函数的额外数据。
   function	必需。规定当事件发生时运行的函数。

    

   
   

   
   

   
   

   
   

   Tips:事件委托还有一个好处就是，即使在事件绑定之后动态添加的元素上触发的事件同样可以监听到哦，这样就不用在每次动态加入元素到页面后都为其绑定事件了

   
   

   
   

   
   

   
   

   
   

   
   

   
   

   
   

   
   

Das obige ist der detaillierte Inhalt vonEine kurze Einführung in die Effizienz der JavaScript-Ausführung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!