生成过多元素时的 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 可能会显示一些有趣的东西

Fragment 和 appendChild 在我的 ipad 上慢了 98%

Answer 2

最快的方法是创建DocumentFragment，如下：

var fragment = document.createDocumentFragment();

for (var i = 0; i < 1000; i++) {
    var id = "id_" + i;

    var checkbox = document.createElement("input");
    checkbox.setAttribute("type", "checkbox");
    checkbox.setAttribute("value", i);
    checkbox.setAttribute("name", id);              // labels are used with names
    checkbox.setAttribute("id", id);

    var label = document.createElement("label");
    label.setAttribute("for", id);
    label.innerHTML = i;

    fragment.appendChild(checkbox);
    fragment.appendChild(label);
}

document.getElementById("parent").appendChild(fragment);

它为您提供两全其美的体验。