DcumentFragment

定義:新しい空白のドキュメントセグメントを作成します.

let fragment = document.createDocumentFragment();

一般的な使い方:元素をfragmentに追加し、fragmentをDOMツリーに追加し、fragmentを自分の体の元素に置き換えます.つまり、DOMツリーにはfragmentは表示されません.fragmentの中の要素だけを表示します.

var ulinfo = document.createElement('ul');
var fragment = document.createDocumentFragment();

for(var i = 0;i < 6;i++){
    var li = document.createElement('li');
    fragment.appendChild(li);
}

ulinfo.appendChild(fragment);

利点:より良い性能をもたらす.DOMツリーではなく、ドキュメントセグメントがメモリに存在するためです.要素を動的に追加する場合、ドキュメントセグメントを使用すると、ページリフロー(要素位置と幾何学的演算)を起こさず、より優れた性能を発揮することができます.