Teilen Sie Beispiele für Techniken zur JS-Leistungsoptimierung

1. Das Skript sollte nach dem Seitenelementcode platziert werden

   Egal, ob der aktuelle JavaScript-Code eingebettet oder in einer externen Linkdatei ist, das Herunterladen und Rendern des Die Seite muss anhalten und warten, bis die Skriptausführung abgeschlossen ist. Je länger der JavaScript-Ausführungsprozess dauert, desto länger wartet der Browser auf die Reaktion auf Benutzereingaben. Der Grund, warum Browser das Herunterladen und Ausführen von Skripten blockieren, liegt darin, dass das Skript möglicherweise den Namensraum der Seite oder von JavaScript ändert, was sich auf den Inhalt nachfolgender Seiten auswirkt.

2. Globale Suche vermeiden

       function search() {
           //当我要使用当前页面地址和主机域名
           alert(window.location.href + window.location.host);
       }
       //最好的方式是如下这样  先用一个简单变量保存起来
       function search() {
           var location = window.location;
           alert(location.href + location.host);
       }

3. Typkonvertierung

   般最好用”" + 1来将数字转换成字符串，虽然看起来比较丑一点，但事实上这个效率是最高的，性能上来说：

("" +) > String() > .toString() "

"
    var myVar = "3.14159",
    str = "" + myVar, //  to string  
    num=+myVar,       // to number
    i_int = ~ ~myVar,  //  to integer  
    f_float = 1 * myVar,  //  to float  
    b_bool = !!myVar,  /*  to boolean - any string with length 
                            and any number except 0 are true */
    array = [myVar];  //  to array
"

1. Mehrere Typdeklarationen

   Variablen in können mit einer einzigen var-Anweisung deklariert werden. Dabei handelt es sich um eine Gruppe von Anweisungen, um die Ausführungszeit des gesamten Skripts zu verkürzen. Genau wie der obige Code ist auch das obige Codeformat ziemlich standardisiert, sodass es auf einen Blick klar ist 🎜 >

2. Klonen Sie das Vorlagenelement anstelle von createElement
   Viele Leute verwenden gerne document.write in JavaScript, um Inhalte für die Seite zu generieren Sie benötigen es direkt, um HTML einzufügen, indem Sie beispielsweise ein p oder span angeben und deren innerHTML festlegen, um Ihren eigenen HTML-Code in die Seite einzufügen. Normalerweise verwenden wir Zeichenfolgen, um HTML direkt zum Erstellen von Knoten zu schreiben. Tatsächlich kann auf diese Weise 1: Die Gültigkeit des Codes nicht garantiert werden. 2: Die Effizienz der Zeichenfolgenoperation ist gering. Daher sollte die Methode document.createElement () verwendet werden. Die Methode cloneNode() sollte verwendet werden, da Sie mit der Methode createElement() die Attribute des Elements mehrmals festlegen müssen. Durch die Verwendung von cloneNode() kann die Anzahl der Attributeinstellungen reduziert werden. Wenn Sie viele Elemente erstellen müssen, kann dies ebenfalls der Fall sein. Sie sollten zuerst einen Vorlagenknoten vorbereiten. 🎜>

   Seien Sie vorsichtig mit Abschlüssen

       var frag = document.createDocumentFragment();
       for (var i = 0; i < 1000; i++) {
           var el = document.createElement(&#39;p&#39;);
           el.innerHTML = i;
           frag.appendChild(el);
       }
       document.body.appendChild(frag);
       //替换为：
       var frag = document.createDocumentFragment();
       var pEl = document.getElementsByTagName(&#39;p&#39;)[0];
       for (var i = 0; i < 1000; i++) {
           var el = pEl.cloneNode(false);
           el.innerHTML = i;
           frag.appendChild(el);
       }
       document.body.appendChild(frag);

   Fall von Abschlüssen

3. Kombinieren Sie Steuerbedingungen und Steuervariablen beim Schleifen

   document.getElementById('foo').onclick = function(ev) { };

Wenn wir dieser Schleife etwas hinzufügen, stellen wir fest, dass es mehrere Vorgänge gibt, die die JavaScript-Engine bei jeder Iteration ausführen muss: 1: Prüfen, ob x existiert 2: Prüfen, ob x kleiner als 10 ist 3 : Erhöhen Sie x. 1

4. Verbesserung

   for ( var x = 0; x < 10; x++ ) {};

   Vergleich mit Null vermeiden

   var x = 9;
   do { } while( x-- );

   Da JavaScript schwach typisiert ist, wird keine automatische Eingabe durchgeführt Überprüfen Sie dies. Wenn Sie also Code sehen, der mit Null verglichen wird, versuchen Sie, ihn durch die folgende Technik zu ersetzen:
5. 1. Wenn der Wert ein Referenztyp sein soll, verwenden Sie den Operator „instanceof“, um seinen Konstruktor zu überprüfen. 2. Wenn der Wert sollte ein Basistyp sein, verwenden Sie typeof, um seinen Typ zu überprüfen. 3. Wenn Sie möchten, dass das Objekt einen bestimmten Methodennamen enthält, verwenden Sie den Typeof-Operator, um sicherzustellen, dass die Methode mit dem angegebenen Namen auf dem Objekt vorhanden ist
   Respektieren Sie die Eigentümerschaft des Objekts
   Denn JavaScript kann jedes Objekt jederzeit ändern und so das Standardverhalten auf unvorhersehbare Weise außer Kraft setzen. Wenn Sie also nicht für die Wartung eines Objekts, seiner Objekte oder seiner Methoden verantwortlich sind , Dann sollten Sie es nicht ändern:
6. Fügen Sie keine Attribute zu Instanzen oder Prototypen hinzu. 3. Definieren Sie keine vorhandenen Methoden Wiederholen Sie die Definition von Methoden, die andere Teammitglieder implementiert haben. Ändern Sie niemals Objekte, die nicht Ihnen gehören. Sie können auf folgende Weise neue Funktionen für Objekte erstellen: 1. Erstellen Sie ein neues Objekt, das die erforderlichen Funktionen enthält, und verwenden Sie es zur Interaktion mit verwandten Objekten 2. Erstellen Sie einen benutzerdefinierten Typ, erben Sie den Typ, der geändert werden muss, und fügen Sie dann dem benutzerdefinierten Typ zusätzliche Funktionen hinzu
   Direkte Mengen verwenden

7. Negativerkennung verkürzen

       var aTest = new Array(); //替换为
       var aTest = [];
       var aTest = new Object; //替换为
       var aTest = {};
       var reg = new RegExp(); //替换为
       var reg = /../;
       //如果要创建具有一些特性的一般对象，也可以使用字面量，如下：
       var oFruit = new O;
       oFruit.color = "red";
       oFruit.name = "apple";
       //前面的代码可用对象字面量来改写成这样：
       var oFruit = { color: "red", name: "apple" };

8. Javascript-Objekt freigeben

   随着实例化对象数量的增加，内存消耗会越来越大。所以应当及时释放对对象的引用，让GC能够回收这些内存控件。 对象：obj = null 对象属性：delete obj.myproperty 数组item：使用数组的splice方法释放数组中不用的item

9. 巧用||和&&布尔运算符

       function eventHandler(e) {
           if (!e) e = window.event;
       }
       //可以替换为：
       function eventHandler(e) {
           e = e || window.event;
       }
       
       
       
       if (myobj) {
           doSomething(myobj);
       }
       //可以替换为：
       myobj && doSomething(myobj);

10. switch语句相对if较快

11. 每条语句末尾须加分号

相关推荐：

js性能优化技巧_javascript技巧

Das obige ist der detaillierte Inhalt vonTeilen Sie Beispiele für Techniken zur JS-Leistungsoptimierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!