考虑将lis追加到这三个版本ul：
天真的版本（慢20％）：
var ul = document.getElementById('targetUl');
for (var i = 0; i < 200; i++) {
var li = document.createElement('li');
li.innerHTML = Math.random();
ul.appendChild(li);
}
使用JavaScript片段（慢4％）：
var ul = document.getElementById('targetUl'),
fragment = document.createDocumentFragment();
for (var i = 0; i < 200; i++) {
var li = document.createElement('li');
li.innerHTML = Math.random();
fragment.appendChild(li);
}
ul.appendChild(fragment);
追加到DOM中尚未存在的元素（快1.26％）：
var ul = document.createElement('ul'),
div = document.getElementById('targetDiv');
for (var i = 0; i < 200; i++) {
var li = document.createElement('li');
li.innerHTML = Math.random();
ul.appendChild(li);
}
div.appendChild(ul);
为什么追加到保存在内存中的DOM元素比追加到Fragment？既然fragment是为了这个唯一目的而创建的，不是应该更快吗？fragment除了在附加之前不必包含顶级元素之外，使用over保留在内存中的元素是否有任何优势？
检查jsperf的测试输出：http ://jsperf.com/javascript-fragments-tests
从文档片段中插入多个子代（特别是当您的测试有200个子代时）要比插入单个父<ul>标记多得多。
因此，使用片段，您可以将片段中的200个<li>元素重新链接到<ul>DOM中的标签。
在您的最后一个代码块中，您只是<ul>通过将一个标签插入DOM来重新标记一个标签。
因此，在您的特定示例中，使用文档片段为插入DOM的创建工作要比您运行仅插入单个<ul>标签的最后一个示例的方式多。
当您想在同一级别上跟踪一整串元素，然后用一行代码插入它们并且您的父级已经在DOM中时，该片段具有其战术优势。但是，相对于您可以将所有项目从DOM收集到其实际父节点下的同一级别并从DOM中收集然后仅插入该父节点的情况而言，它并非总是最快的处理方法。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句