JavaScriptパフォーマンス最適化_JavaScriptスキルのためのDOMインタラクティブ操作例の分析

この記事の例では、JavaScript のパフォーマンスを最適化するための DOM 対話型操作テクニックについて説明します。参考のために皆さんと共有してください。詳細は次のとおりです:

JavaScript のあらゆる側面において、DOM は間違いなく最も遅い部分です。 DOM の操作と操作では、ページ全体または特定の部分の再レンダリングが必要になることが多いため、時間がかかります。 DOM との対話を最適化する方法を理解すると、スクリプトの完了速度が大幅に向上します。

1. DOM 更新を最小限に抑える

以下の例を見てください:

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更新。

ドキュメントの断片化を使用して、DOM の更新を最小限に抑えることができます。

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);

ドキュメントの断片化の詳細については、以前の記事「JavaScript ドキュメントの断片化操作例の分析」

を参照してください。

2. innerHTML を使用する

大規模な DOM 変更の場合は、innerHTML を使用した方が、createElement() や appendChild() よりも高速です。

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

3. イベント委任を使用する

詳細については、以前の記事「JavaScript パフォーマンス最適化のためのイベントデリゲーションインスタンスの詳細説明」を参照してください。

4. NodeList

に注目します。

NodeList にアクセスするたびにドキュメントベースのクエリが実行されるため、NodeList へのアクセス数を最小限に抑えるとスクリプトのパフォーマンスが大幅に向上します。

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;

NodeList の詳細については、以前の記事「JavaScript で NodeList を Array 配列として処理する方法」を参照してください。

この記事が JavaScript プログラミングのすべての人に役立つことを願っています。