end0tknr's kipple - 新web写経開発

http://d.hatena.ne.jp/end0tknr/ から移転しました

DOMを大量に変更する場合、DocumentFragment経由の方がはやい

http://qiita.com/mah_lab/items/fbec02ad2a541261a511
http://html5experts.jp/yoshikawa_t/1932/

さすがに、javascript(またはjquery)でDOMを直接操作するようなことはせず、Stingを利用していましたが、Document Fragment でも高速化できるらしい...今更、知りました。
お恥ずかしい


以下は例

post_load_meisais: function( ret_data ){
    var meisais = ret_data.meisais;
    var frag = document.createDocumentFragment();

    for(var i=0; i<meisais.length; i++){
        var meisai = meisais[i];
        //jquery templateによるhtml実体化
        var meisai_tr = $("#tmpl_meisai_tr").tmpl();
        //実体化した<tr>要素に明細行データをセット
        this.fill_in_meisai_tr( meisai_tr,meisai);
        //jqueryオブジェクトの0番目にはDOM要素があります
        frag.appendChild( meisai_tr[0]);
    }
    $("#hachuu_meisais_tbl>tbody").empty();
    //jqueryオブジェクトの0番目にはDOM要素があります
    $("#hachuu_meisais_tbl>tbody")[0].appendChild(frag);
}