js 文档碎片渲染

有时候,我们需要渲染类似列表这样的页面结构, 而,数据可能不会只有一条, 会有多条,
甚至更多, 想到的简单方法可能有如下:

let data = [
 {title: "lalalal", body :" lalallalalaalhkjjhk", time: "2017-11-15"},
 {title: "bibibibibi", body :" bibibibibilajflkjl", time: "2017-11-16"}
], html=[];

方法一:
渲染时,会闪烁

data.forEach((item, i)=>{
  html.push("`<div><h3>${item.title}</h3><p>${item.body}</p><p>${item.time}</p></div>`")
});
console.log(html.join(''));

方法二:
每次渲染一条数据, 渲染次数多

document.body;
for(let i=0, l=data.length; i<l;i++){
let d = document.createElement('div');
d.innerHTML = `
  <h3>${data[i].title}</h3><p>${data[i].body}</p><p>${data[i].time}</p>
`
document.body.appendChild(d);
}

文档碎片方法:
https://developer.mozilla.org/zh-CN/docs/Web/API/Document/createDocumentFragment
是DOM节点。它们不是主DOM树的一部分。通常的用例是创建文档片段，将元素附加到文档片段，然后将文档片段附加到DOM树。在DOM树中，文档片段被其所有的子元素所代替。

因为文档片段存在于内存中，并不在DOM树中，所以将子元素插入到文档片段时不会引起页面回流(reflow)(对元素位置和几何上的计算)。因此，使用文档片段document fragments 通常会起到优化性能的作用(better performance)。

documentFragment 被所有主流浏览器支持。所以，没有理由不用。

var oFragment = document.createDocumentFragment();

for(var i = 0 ; i < 10; i ++) {
    var p = document.createElement("p");
    var oTxt = document.createTextNode("段落" + i);
    p.appendChild(oTxt);
    oFragment.appendChild(p);
}
document.body.appendChild(oFragment);