JS把DOM节点转换为Fragment提高执行效率的原因

关于javascript document.createDocumentFragment()https://www.jb51.net/article/17647.htm
js 创建dom节点的方法之 createDocumentFragment()https://blog.csdn.net/Wonder233/article/details/82502740

document.createDocumentFragment()说白了就是为了节约使用DOM。每次JavaScript对DOM的操作都会改变页面的变现，并重新刷新整个页面，从而消耗了大量的时间。为解决这个问题，可以创建一个文档碎片，把所有的新节点附加其上，然后把文档碎片的内容一次性添加到document中。

这样使用的开发框架Vue

文档片段createDocumentFragment、appendChildhttps://www.jianshu.com/p/e459f0ca1c16
Vue代码中有一段关于循环的操作

let fragment=document.createDocumentFragment();
let firstChild;
while(firstChild=el.firstChild) {
  // appendChild() 方法可向节点的子节点列表的末尾添加新的子节点。
  // 提示：如果文档树中已经存在了 newchild，它将从文档树中删除，然后重新插入它的新位置。
  // 则fragment.appendChild(firstChild)时会把el的firstChild移动到fragment,同时el的firstChild会变成原来el的childNodees[1],然后当前循环执行之后会返回去再判断条件，判断条件时firstChild又重新赋值，这样就实现了把一个节点的所有子节点全部转移到fragment下，是移动不是拷贝，描述的单词一定要准确
  fragment.appendChild(firstChild);
}
let oui=document.getElementById("oItem");
oui.appendChild(fragment);