[英]JavaScript performance while generating too many elements
哪一个更快?为什么?
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);
}
有没有更有效的方法?
这将比两者中的任何一个都快,因为它仅更新一次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%
最快的方法是创建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);
它为您提供两全其美的体验。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.