观看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

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