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

大量の要素を挿入するときに、
毎回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

おわり