DOM批量添加元素

// 1、创建文档片段，将标签全部放入该片段中，再统一插入doucment，这样只会渲染一次
var root = document.getElementById('root');
var fragment = document.createDocumentFragment();
for (let i=0;i<1000;i++) {
  let li = document.createElement('li');
  li.innerHTML = 'li标签';
  fragment.appendChild(li);
}
root.appendChild(fragment);

// 2、使用display先隐藏，在显示
var ul = document.getElementById('root');
ul.style.display = 'none';
// 添加数据
appendDataToElement(ul,data);
ul.style.display = 'block';

// 3、将原始元素拷贝到一个脱离文档的节点中，修改副本，完成后再替换原始元素
var old = document.getElementById('root');
var clone = old.cloneNode(true);
appendDataToElement(ul,data);
old.parentNode.replaceChild(clone,old);