今見てくれてる人の数

ホンキートンク・スーダラブルース

ゆるコラム、oF、邦ロックや歌謡曲、小説の感想。ドラクエ、JavaScript、ドラゴンボール超など。湘南あたりを転がってる石コロのゆるゆる生きてく超雑多な軌跡です。

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

f:id:sudara_bluse:20171020183550p:plain

大量の要素を挿入するときに、
毎回DOMにアクセスするとパフォーマンス的によろしく無いので
createDocumentFragment を使おうという教えを頂いたのでまとめです。

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

 

まず、低速バージョン。

配列の要素数分、毎回DOMにアクセスしてるのがアカンらしいです。

howToDocumentFragment.js
;(function(){

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

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


    // 低速バージョン
    // 毎回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);  // 配列の要素数分、毎回追加
    }

})();

 

低速verを高速化しよう!

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

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

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

howToDocumentFragment.js
;(function(){

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

    // もっと沢山要素がある想定でお願いします〜
// 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); })();

 

 

jQueryも同じことが言えて、

毎回apendでDOMにアクセスせずに、

$( )に貯めて最後に一回appendすると良いみたいです。

 

Qitaでも書いています。 

qiita.com

 

 

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

七章第四回 ノードをまとめて扱う:DocumentFragment — JavaScript初級者から中級者になろう — uhyohyo.net

おわり!