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