js文書のかけらをレンダリング

時には、リストのようなページ構造をレンダリングする必要がありますが、データは一つしかないかもしれません.複数の項目があり、さらに多くの方法が考えられます.

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

方法1:レンダリングすると、点滅します.

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

方法の2:毎回1本のデータをレンダリングして、レンダリングの回数は多いです.

document.body;
for(let i=0, l=data.length; i${data[i].title}
${data[i].body}
${data[i].time}
`
document.body.appendChild(d);
}

ドキュメントの最適化方法:https://developer.mozilla.org/zh-CN/docs/Web/API/Document/createDocumentFragment DOMノードです.これらは主DOMツリーの一部ではない.一般的な用例は、ドキュメントセグメントを作成し、ドキュメントセグメントに要素を付加し、DOMツリーにドキュメントセグメントを追加することである.DOMツリーでは、ドキュメントセグメントはそのすべてのサブ要素によって置き換えられます.
ドキュメントのセグメントはメモリに存在していますので、DOMツリーではありません.ドキュメントにサブ要素を挿入すると、ページのリターン(要素の位置と幾何学的計算)を引き起こしません.したがって、ドキュメントセグメントを使用すると、しばしばパフォーマンスを最適化する役割を果たします.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);