1

どちらがより高速で、その理由は何ですか?

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);
}

より効率的な方法はありますか？

4

2 に答える 2

6

これは DOM を 1 回だけ更新するため、2 つのどちらよりも高速です。

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% 遅い

于 2013-07-28T04:27:41.293 に答える
1

最も速い方法は、次のように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);

それはあなたに両方の長所を提供します。

于 2013-07-28T04:47:45.377 に答える