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回目 5965 6891 5783
2回目 5893 6944 5783
3回目 5926 6934 5862
4回目 5883 7001 5871
5回目 5892 6933 5929
平均 5911 6952 5845
Opera9.02 on Linux
普通 extend() with
1回目 1563 1983 1721
2回目 1842 2027 2169
3回目 1870 2158 1828
4回目 1504 2009 1736
5回目 1742 1815 1719
平均 1644 1998 1834

んーOpera速い(違


やっぱりextend()遅いかー

追記

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

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

追記 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