「JavaScript高級プログラム設計」性能探究によるDOMインタラクションの最適化

1905 ワード

DOMインタラクションを最適化する

もっと読む
本文は「JavaScript高級プログラム設計」からノートを読みます.

DOMインタラクションを最適化する

--------DOM操作とインタラクションは多くの時間を消費します.それらは往々にしてページ全体または一部を再レンダリングする必要があります.

現場更新を最小化する

現場更新:すぐにページをユーザの表示を更新する必要があるので.

現場更新が多いほど、コードの実行に時間がかかります.
例:
リストに10項目を追加します.

var list = document.getElementById("myList"),
      item,
      i;
for(i=0;i<10;i++){
      item = document.createElement("li");
      list.appendChild(item);
      item.appendChild(document.createTextNode("Item "+i));
}

------ このように項目を追加するには、li要素を追加して、テキストノードを追加します.10項目の場合、20回の現場更新が必要です.

比較的良い方法は、ドキュメントの断片を作成してDOM構造を作成し、それをList要素に追加し、現場の更新とページの点滅を避けるために.

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

2.
innerHTMLを使う
innerHTMLをある値に設定すると、
バックグラウンドはHTML解像器を作成します.
内部のDOM呼び出しを使用してDOM構造を作成し、
JavaScriptに基づくDOM呼び出しではありません.内部法は解釈ではなくコンパイルされているので、実行がずっと速いです.
3.
イベントエージェントを使う
4.
注意HTMLCollection
HTMLClectionを最適化して訪問する一番重要なところは
ループ
例:

var images = document.getElementsByTagName("img"),
      i,
      len;
for(i=0;len = images.length;i++){

}

次の場合は戻ります.
HTMLCollectionオブジェクト

は、getElements ByTagName()の呼び出しを行う

は、要素のchildNodes属性

を取得する.

は、要素のatributes属性

を取得する.

は、document.forms、document.imagesなどの特別なセットにアクセスします.

JavaScriptの行列でよく使われる反復方法