Analyse von Beispielen für interaktive DOM-Operationen für Javascript-Leistungsoptimierung_Javascript-Fähigkeiten

Die Beispiele in diesem Artikel beschreiben interaktive DOM-Betriebstechniken zur Optimierung der Javascript-Leistung. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

In allen Aspekten von JavaScript ist DOM zweifellos der langsamste Teil. Die DOM-Manipulation und -Interaktion nimmt viel Zeit in Anspruch, da sie oft ein erneutes Rendern der gesamten Seite oder eines bestimmten Teils erfordert. Wenn Sie verstehen, wie Sie die Interaktion mit dem DOM optimieren können, können Sie die Geschwindigkeit der Skriptvervollständigung erheblich verbessern.

1. DOM-Update minimieren

Sehen Sie sich das Beispiel unten an:

var list = document.getElementById("ul");
for (var i=0; i < 10; i++){
  var item = document.createELement("li");
  item.appendChild(document.createTextNode("item" + i));
  list.appendChild(item);
}
//这段代码为列表添加10个项目。添加每个项目时，都有两次DOM更新。总共需要20次DOM更新。

Wir können die Fragmentierung von Dokumenten nutzen, um DOM-Updates zu minimieren.

var list = document.getElementById("ul");
var fragment = document.createDocumentFragment();
for (var i=0; i < 10; i++){
  var item = document.createELement("li");
  item.appendChild(document.createTextNode("item" + i));
  fragment.appendChild(item);
}
list.appendChild(fragment);

Weitere Informationen zur Dokumentfragmentierung finden Sie im vorherigen Artikel „Analyse von Beispielen für JavaScript-Dokumentfragmentierungsvorgänge“

2. Verwenden Sie innerHTML

Bei größeren DOM-Änderungen ist die Verwendung von innerHTML schneller als createElement() und appendChild().

var list = document.getElementById("ul");
var html = "";
for (var i=0; i < 10; i++){
  html += "<li>item" + i + "<li>";
}
list.innerHTML = html;

3. Verwenden Sie die Ereignisdelegation

Einzelheiten finden Sie im vorherigen Artikel „Detaillierte Erläuterung von Ereignisdelegierungsinstanzen zur Javascript-Leistungsoptimierung“

4. Achten Sie auf NodeList

Die Minimierung der Anzahl der Zugriffe auf NodeList kann die Leistung des Skripts erheblich verbessern, da bei jedem Zugriff auf eine NodeList eine dokumentbasierte Abfrage ausgeführt wird.

var imgs = document.getElementsByTagName("img");
for (var i=0, len=imgs.length; i < len; i++){
  var image = imgs[i];
  //more code
}
//这里的关键是长度length存入了len变量，而不是每次都去访问NodeList的length属性。当在循环中使用NodeList的时候，把imgs[i]放入image变量中，以避免在循环体内多次调用NodeList;

Weitere Informationen zu NodeList finden Sie im vorherigen Artikel „So verarbeiten Sie NodeList als Array-Array in Javascript“

Ich hoffe, dass dieser Artikel für alle hilfreich ist, die sich mit der JavaScript-Programmierung befassen.