読者です 読者をやめる 読者になる 読者になる

htsign's blog

ノンジャンルで書くつもりだけど技術系が多いんじゃないかと思います

Rangeオブジェクトの速度に対するちょっとしたテスト

Javascript DOM

同じ個所に複数のノードを追加する場合でも、
なぜかRangeオブジェクトで範囲とって一気に追加するよりもinsertBeforeメソッドの方が全体的に速かったみたいです。
内部的な処理は少ないと思うんだけどなぁ…。

なんか悲しい。

var doc  = document;
var hoge = doc.getElementById("hoge");

function func1(){
    var df    = doc.createDocumentFragment();
    var start = new Date();

    for (var i=0; i<100000; i++) {
        df.insertBefore(hoge.cloneNode(true), (df.firstChild || null));
    }
    console.log(new Date()-start);
}

function func2(){
    var df    = doc.createDocumentFragment();
    var range = doc.createRange();
    var start = new Date();

    range.selectNodeContents(df);

    for (var i=0; i<100000; i++) {
        range.insertNode(hoge.cloneNode(true));
    }
    console.log(new Date()-start);
}

IE9Firefox12Chrome18
func16011ms2390ms119ms
func25896ms2570ms142ms
どうでもいいけど、TABLEタグに対するいい感じのスタイルシートないかしら。