Hatena::ブログ(Diary)

Higé au lait Twitter

 | 

2006年09月27日

html要素作成

del.icio.usのlib.jsから持ってきたのをちょっといじって,

function extend(dest, src){
    if(!src)
        return dest;
    for(var k in src){
        if(typeof src[k] == 'object' && src[k].constructor == Object)
            extend(dest[k],src[k]);
        else
            dest[k] = src[k];
    }
    return dest
}

とすると

var t = extend(document.createElement('div'),{
    id : 'foo',
    className : 'bar',
    style : {
        border : '1px #000 solid',
        margin : '10px',
        padding : '5px'
    },
    innerHTML : 'hogehoge'
});

な感じで書けてみやすい。速いかどうかはしらない。

計測してみる

比較するのは以下の3つ。

普通に

window.onload = function () {
    var s = new Date().getTime();
    var ul = document.createElement('ul');
    for(var i=0;i<10000;i++){
        var t = document.createElement('li');
        t.style.border = '1px #000 solid';
        t.style.margin = '10px';
        t.style.padding = '5px';
        t.innerHTML =  'hoge'+i;
        ul.appendChild(t);
    }
    document.getElementByTagName(' .appendChild(ul);
    var e = new Date().getTime();
    alert((e-s)+'ms');
}

extend()を使って

window.onload = function () {
    var s = new Date().getTime();
    var ul = document.createElement('ul');
    for(var i=0;i<10000;i++){
        var t = extend(document.createElement('li'),{
            'style' : {
                'border' : '1px #000 solid',
                'margin' : '10px',
                'padding' : '5px'
            },
            'innerHTML' : 'hoge'+i
        });
        ul.appendChild(t);
    }
    document.body.appendChild(ul);
    var e = new Date().getTime();
    alert((e-s)+'ms');
}

withを使って

window.onload = function () {
    var s = new Date().getTime();
    var ul = document.createElement('ul');
    for(var i=0;i<10000;i++){
        var t = document.createElement('li');
        with(t){
            with(style){
                border = '1px #000 solid';
                margin = '10px';
                padding = '5px';
            }
            innerHTML = 'hoge' + i;
        }
        ul.appendChild(t);
    }
    document.body.appendChild(ul);
    var e = new Date().getTime();
    alert((e-s)+'ms');
}

結果

Firefox1.5.0.7 on Linux
普通extend()with
1回目596568915783
2回目589369445783
3回目592669345862
4回目588370015871
5回目589269335929
平均591169525845
Opera9.02 on Linux
普通extend()with
1回目156319831721
2回目184220272169
3回目187021581828
4回目150420091736
5回目174218151719
平均164419981834

んーOpera速い(違


やっぱりextend()遅いかー

追記

var t = extend(document.createElement('div'),{
    id : 'foo',
    className : 'bar',
    style : "border : 1px #000 solid;margin : 10px;padding : 5px",
    innerHTML : 'hogehoge'
});

これでもいけるじゃないか。てことはいじらなくてもよかったのか…。

参考

404 Blog Not Found:javascript - DOMMakerで楽々DHTML

これはよさそうだ。

404 Not Found

これもいいねぇ。

追記 09/29 5:05

prototype.js MochiKitがあるとうごかねー(多分

以下Operaのjsコンソール

JavaScript - http://d.hatena.ne.jp/hatenadiary/
Event thread: load
Error:
name: TypeError
message: object: [object Object] is not iterable
トラックバック - http://d.hatena.ne.jp/higeorange/20060927/1159354749
 |