Edited at

JavaScript 大量の要素をDOMに追加する際の、createDocumentFragmentの使い方。

More than 1 year has passed since last update.

大量の要素を挿入するときに、

毎回DOMにアクセスするとパフォーマンス的によろしく無いので

createDocumentFragment を使おうという教えを頂いたのでまとめです。

聞いた事あるけどよくわからんという方も多いのではと思います。


howToDocumentFragment.js

;(function(){

var $ul = document.querySelector('#list'); // ul要素
var songs = ['終わらない歌',
'キスしてほしい',
'僕の右手',
'情熱の薔薇',
'人にやさしく'];

// もっと沢山要素がある想定でお願いします〜

// 低速バージョン
// 毎回DOMツリーへの更新が発生
for(var cnt=0, len=songs.length; cnt<len; cnt++){
var $li = document.createElement('li');
var song = document.createTextNode(songs[cnt]);
$li.appendChild(song);
$ul.appendChild($li); // 配列の要素数分、毎回追加
}

/*
高速化!
fragment 訳:破片,断片,かけら
DocumentFragment は、従来のDOMツリーとは分離された独立した小さなDOMツリー!

DocumentFragment (木構造の頂点のノードになる)
|
|--- <li>
|
|--- <li>
|
|--- <li>

こういう状態をつくってまとめて一回だけDOMにアクセスして追加すると良いみたいです。
*/

// DocumentFragment
var fragment = document.createDocumentFragment();

for(var cnt=0, len=songs.length; cnt<len; cnt++ ){
var $li = document.createElement('li');
var song = document.createTextNode(songs[cnt]);
$li.appendChild(song);
fragment.appendChild($li); // fragmentの追加する
}

// 最後に追加!
$ul.appendChild(fragment);

})();


こちらの説明わかりやすかったです。

http://uhyohyo.net/javascript/7_4.html

おわり