js createDocumentFrag

语法

let fragment = document.createDocumentFragment();

简介

DocumentFragments 是DOM节点（表示一个没有父级文件的最小文档对象，它被当做一个轻量版的 Document 使用）。它们不是主DOM树的一部分。通常的用例是创建文档片段，将元素附加到文档片段，然后将文档片段附加到DOM树。在DOM树中，文档片段被其所有的子元素所代替。
因为文档片段存在于内存中，并不在DOM树中，它的变化不会引起DOM树的重新渲染的操作(reflow) ，所以将子元素插入到文档片段时不会引起页面回流（对元素位置和几何上的计算）。因此，使用文档片段通常会带来更好的性能。

示例

渲染一个列表，有三种写法

1. 直接appendChild要添加的元素

var _ul = document.getElementById('ul'); 
var fruits = ['香蕉',"苹果","橘子"];
fruits.forEach(function (fruit) {
  var _li = document.createElement('_li');
  _li.innerText = fruit;
  _ul.appendChild(_li);
});

2. 用拼接字符串

var _ul = document.getElementById('ul'); 
var fruits = ['香蕉',"苹果","橘子"];
var str = ""
fruits.forEach(function (fruit) {
  str+= `<li>${fruit}</li>`
});
_ul.innerHTML = str;

3. 用createDocumentFragment实现

var _ul = document.getElementById('ul'); 
var fragment = document.createDocumentFragment();
var fruits = ['香蕉',"苹果","橘子"];
fruits.forEach(function (fruit) {
  var _li = document.createElement('_li');
  _li.innerText = fruit;
  fragment.appendChild(_li);
});
_ul.appendChild(fragment);

他们实现的功能都是一样的，但是从性能上看的话，第一种性能最低，因为它需要重复操作DOM，第二种性能最高（测试时间得来的结果），第三种性能中等，根据不同的需求可以选择第二种和第三种