Javsscriptの中のfragment

1132 ワード

Javascriptでは、DOMに対して一回の操作(要素の挿入、要素の削除など)を行うたびに、ブラウザの再解析とレンダリングを行います.一度に何度もDOM挿入操作を行う必要がある場合、DockmentFragmentというノードタイプによって、ビューアの再解析を減らすのに役立ちます.
下の

を挿入すると仮定します.

<ul id="ul"></ul>

一般的なやり方:

var ul = document.getElementById("ul");
var li = null;
//   <ul/>  <li/>，              
for (var i=0; i < 10; i++){
    li = document.createElement("li");
    li.appendChild(document.createTextNode("li " + (i+1)));
    ul.appendChild(li);
}

fragmentを使う:

var ul = document.getElementById("ul");
var li = null;
//  DocumentFragment          <li/>
var fragment = document.createDocumentFragment();
for (var i=0; i < 10; i++){
    li = document.createElement("li");
    li.appendChild(document.createTextNode("li " + (i+1)));
    fragment.appendChild(li);
}
//      <li/>  <ul/>，            
ul.appendChild(fragment);

正規表現の一般的なオブジェクトの整理