关于createDocumentFragment的疑问

Question

观看6-5 如何优化 DOM 操作的性能章节时，发现老师用了这个我第一次见的API createDocumentFragment 我之前的方式都是用模板字符串拼接的，所以产生了个疑问 为什么要这么用，
在检测过程中发现

console.time("拼接字符串方式追加dom");

var list = document.getElementById("list");
var lis = ``;
for (let i = 0; i < 10000; i++) {
  lis += `<li>${i}</li>`;
}
list.innerHTML = lis; 	// 追加过程在循环外

console.timeEnd("拼接字符串方式追加dom"); 


console.time("createDocumentFragment方式");
var list = document.getElementById("list");
var frag = document.createDocumentFragment();

for (let i = 0; i < 10000; i++) {
  const li = document.createElement("li");
  li.innerHTML = `${i}`;
  frag.appendChild(li);
}
list.appendChild(frag); 	// 追加过程在循环外

console.timeEnd("createDocumentFragment方式");

以上代码的执行结果是

• 拼接字符串方式追加dom: 13.8828125ms
• dom.js:25 createDocumentFragment方式: 49.427001953125ms

而如果将 追加dom的过程放入循环后

console.time("拼接字符串方式追加dom");

var list = document.getElementById("list");
var lis = ``;
for (let i = 0; i < 10000; i++) {
  lis += `<li>${i}</li>`;
  list.innerHTML = lis; 	// 将追加过程放入循环
}

console.timeEnd("拼接字符串方式追加dom");

console.time("createDocumentFragment方式");
var list = document.getElementById("list");
var frag = document.createDocumentFragment();

for (let i = 0; i < 10000; i++) {
  const li = document.createElement("li");
  li.innerHTML = `${i}`;
  frag.appendChild(li);
  list.appendChild(frag); 	// 将追加过程放入循环
}

console.timeEnd("createDocumentFragment方式");

发现页面执行非常的慢，等待一段时间后 结果为

• 拼接字符串方式追加dom: 79327.3330078125ms
• dom.js:23 createDocumentFragment方式: 60.94189453125ms

有点理解不了，所以提问下，麻烦老师解释下，问题排版可能有点乱，不好意思 哈哈

Answer 1

双越 2020-05-08 14:02:00

你用拼接字符串的形式当然可以。但这种方式只能是字符串，而不是 DOM 节点。

如果你要对 DOM 节点进行一些样式操作，或者追加子节点，或者增加一个事件，这时候你用字符串拼接，怎么做呀？

• 提问者 慕村3197060 #1

  非常感谢！

• 提问者 慕村3197060 #2

  可以在字符串拼接的时候写入行内 ，但是这样会暴露自己写的方法，并且属性只有使用attr方式了

• 双越 回复 提问者 慕村3197060 #3

  建议从另外一个角度来去思考：结构化与非结构化。字符串是非结构化的，而 DOM 节点是结构化的。浏览器最初加载到的 html 就是一个字符串，那它为何要把 html 变成 DOM 树呢？

点开查看后面1条评论

Answer 2

Best_Coder_LCN 2021-05-15 17:20:11

当你用拼接字符串的方式，再把追加过程放入循环体，那追加的就不是10000个 li 标签了

你一共追加了 1+2+3+...+10000 个li

所以耗时7秒