JavaScript性能,同时生成太多元素

Question

哪一个更快,为什么？

1.

for(var i=0; i<1000; i++)
    document.getElementById('parent').innerHTML += 
            '<input id="id_'+i+'" type="checkbox" value="'+i+'" /><label for="id_'+i+'">'+i+'</label>';

2.

for(var i=0; i<1000; i++){
    var cb = document.createElement('input');
    cb.type = 'checkbox';    
    cb.id = 'id_'+i;
    cb.value = i;

    var l = document.createElement('label');
    l.htmlFor = 'id_'+i;
    l.appendChild(document.createTextNode(i.toString()));

    parentElement.appendChild(cb);
    parentElement.appendChild(l);
}

有更有效的方法吗？

Answer 1

这将比两者中的任何一个更快,因为它只更新DOM一次

for(var i=0, HTML=""; i<1000; i++)
  HTML += '<input id="id_'+i+'" type="checkbox" value="'+i+'" /><label for="id_'+i+'">'+i+'</label>';
document.getElementById('parent').innerHTML = HTML;

http://jsperf.com/create-append-vs-fragment-append-vs-assign可能会显示一些有趣的内容

片段和appendChild在我的ipad上慢了98%