JavaScript-Codespezifikationen und Leistungsveredelung

1. Leistung

Im Hinblick auf die Leistung von Js gibt es viele Dinge zu beachten:

• Vermeiden Sie globale Suchvorgänge

Das Wichtigste zur Optimierung der Js-Leistung besteht darin, auf die globale Suche zu achten, da die Bereichssuche darin besteht, zuerst den lokalen Bereich zu durchsuchen und dann zum Bereich der oberen Ebene zu gehen, um zu suchen, bis der globale Bereich nicht gefunden wird, also die Leistung Der Verbrauch der globalen Bereichssuche muss höher sein als Der lokale Bereich dieser Funktion verbraucht viel Geld. Zum Beispiel:

function setInnerHtml(){  var pDom=doucument.getElementsByTagName(“p”);  for(var i=0,len=pDom.lemgth;i<len;i++){

    pDom.innerHTML=doucument.getElementByid(“dom”).innerHtml+I;

}

}

​

Dieser Code ruft document.getElementByid("dom") in einer Schleife auf und das Dokument wird nur einmal außerhalb der Schleife ausgeführt, sodass es nicht erforderlich ist, das Dokument einer lokalen Variablen zuzuweisen. Weisen Sie stattdessen den Wert innerhalb der Schleife einer zu Es ist also nicht erforderlich, dies bei jeder Schleife erneut durchzuführen, um das globale Dokumentobjekt zu finden.

function setInnerHtml(){  var domhtml= doucument.getElementByid(“dom”).innerHtml;  var pDom=doucument.getElementsByTagName(“p”);  for(var i=0,len=pDom.lemgth;i<len;i++){

    pDom.innerHTML= domhtml +I;

}

}

​

Das Prinzip besteht darin, dass bei mehrmaligem Aufruf des globalen Objekts, insbesondere in einer Schleife, das globale Objekt schließlich der lokalen Variablen zugewiesen wird. Natürlich wird der Leistungsunterschied nach Dutzenden von Aufrufen nicht offensichtlich sein, aber als Programmierer Es sollte möglichst leistungsoptimiertes Schreiben erfolgen.

• Vermeiden Sie mit Aussagen

Diese Aussage wird heutzutage nur noch selten verwendet, daher werde ich nicht mehr dazu sagen.

• Vermeiden Sie unnötige Attributsuchen

Vereinfacht gesagt speichert die Variable den Wert. Der Leistungsverbrauch beim Aufrufen dieser Variablen ist minimal, während der Leistungsverbrauch beim Abrufen des Werts der Objektattribute relativ hoch ist. Zum Beispiel:

var query=window.location.href.subtring(window.location.href.indexOf(“?”));

​

In diesem Code gibt es sechs Fälle, in denen die Effizienz der Immobiliensuche besonders schlecht ist. Es ist am besten, sie wie folgt zu ändern:

var url=window.loaction.href;var query=url.substring(url.indexOf(“?”));

​

Diese Optimierung verbessert die Effizienz erheblich.

• Optimierungsschleife

1) Iteration verringern: Die meisten Schleifen beginnen bei 0 und erhöhen die Schleife. In vielen Fällen ist es effizienter, die Schleife vom Maximalwert aus zu verringern.

2) Vereinfachen Sie die Beendigungsbedingungen: Da die Beendigungsbedingungen in jeder Schleife beurteilt werden, kann die Vereinfachung der Beendigungsbedingungen auch die Schleifeneffizienz verbessern.

3) Vereinfachen Sie den Schleifenkörper: Der Schleifenkörper wird am häufigsten ausgeführt, daher muss die Optimierung des Schleifenkörpers sichergestellt werden.

• Vermeiden Sie das Parsen der JS-Codezeichenfolge

Beim Parsen von JS-Codezeichenfolgen im JS-Code muss ein Parser neu gestartet werden, um den Code zu analysieren, was zu einem relativ hohen Leistungsverbrauch führt. Versuchen Sie daher, Funktionen wie eval und die Funktionskonstruktion von JS-Codewörtern zu vermeiden.

String-Funktion, wenn setTimeout einen String übergibt.

• Die native Methode ist schneller. Versuchen Sie daher, die native Methode zu verwenden.

• Die Switch-Anweisung ist schneller.

• Bitoperatoren sind schneller.

2. Code-Spezifikationen

• Codekommentare:

1) Funktionen und Methoden: Jede Funktion oder Methode sollte Kommentare enthalten, die die Funktion sowie die Eingabe und Ausgabe der Funktion beschreiben.

2) Komplexe Algorithmen: Zu komplexen Algorithmen sollten Kommentare hinzugefügt werden, damit die Menschen das logische Denken des Algorithmus verstehen können.

3) Hack: Dem Kompatibilitätscode sollten auch Kommentare hinzugefügt werden.

4) Große Codeblöcke: Mehreren Codezeilen, die zum Abschließen einer einzelnen Aufgabe verwendet werden, sollte ein Kommentar vorangestellt werden, der die Aufgabe beschreibt.

• Entkopplung von HTML/JavaScript

HTML ist die Struktur und js ist die Verhaltensebene. Wenn wir Code schreiben, sollten wir versuchen, die Korrelation zwischen HTML und js zu reduzieren HTML-Seite Das Deklarieren von JS-Code im Skript-Tag, das Binden von Onclick-Ereignissen im HTML-Tag und das Umschreiben des HTML-Codes in JS führt dazu, dass HTML und JS zu eng gekoppelt sind.

Das HTML-Rendering sollte so weit wie möglich vom JS getrennt werden. Versuchen Sie, Tags nicht direkt einzufügen. Im Allgemeinen können Sie Tags direkt in die Seite einfügen und ausblenden und dann warten, bis die gesamte Seite gerendert ist , und verwenden Sie dann js, um das Tag anzuzeigen.

将html和js解耦可以在调试过程中节省时间，更加容易确定错误的来源，也减轻维护难度。

• 解耦css/JavaScript

JavaScript和css也是非常紧密相关的，js经常对页面的样式做动态修改。为了让他们的耦合更松散，可以通过js修改对应的class样式类。

• 解耦应用逻辑/事件处理程序

在实际开发中我们经常在一个事件函数出来将要处理的所有代码都放在这个事件中，例如：

function handleKeyPress(event){

   event=EventUtil.getTarget(event);   if(event.keyCode===13){var target=EventUtil.getTarget(event);var value=5*parseInt(target.value);if(value>10){

 document.getElementById(“error-msg”).style.display=”block”;

}

}

}

 

这里就是把逻辑处理代码和事件处理代码放到一起，这样会让调试不好调试，维护难度变高，而且要是突然修改要新增加一个事件做同样类似的逻辑处理，那就要复制一份逻辑处理代码到另一个事件函数中。较好的方法是将应用逻辑和事件处理程序分离开。例如：

function validateValue(value){

 value=5*parseInt(value); if(value>10){

 document.getElementById(“error-msg”).style.display=”block”;

}

}function handleKeyPress(event){

  event=EventUtil.getEvent(event);  if(event.keyCode===13){   var target=EventUtil.getTarget(event);

   validateValue(target.value);

}

}

 

这样事件处理和逻辑处理就分离开了，这样做有几个好处，可以让你更容易更改触发特定过程的事件，其次可以在不附加到事件的情况下测试代码，使其更易创建单元测试或是自动化应用流程。

事件和应用逻辑之间的松散耦合的几条原则：

1. 勿将event对象传给其他方法；只传来着event对象中所需要的数据；

2. 任何可以在应用层面的动作都应该可以在不执行任何时间处理程序的情况下能正常运行。

3. 任何时间处理程序都应该处理事件，然后将处理转交给应用逻辑。

• 避免全局变量

这样会让脚本执行一致和可维护，最多创建一个全局变量。类似jQuery一样，所以方法属性都在$对象当中，避免对全局变量造成过多的污染。

• 尽量使用常量

数据和使用它的逻辑进行分离要注意一下几点：

1.  重复值

2. 用户界面字符串

3.  url

4. 任意可能会更改的值

• 其他优化

1. 多变量声明时用一条语句逗号隔开声明

2. 对dom的操作的优化

3. 对dom进行html代码插入尽量在最后一次添加到dom对象中。

4. innerHTML的效率要比appendChild的效率高，以为innerHTML会创建一个HTML解析器，然后使用内部的DOM调用来创建DOM结构，而非基于JavaScript的DOM调用，由于内部方法是编译好的而非解释执行，所以执行快的多。

5. 使用事件委托减少绑定的事件数量。

6. 尽量少用到返回HTMLCollection语句。