documentFragmentのパフォーマンスと添付されていない要素のappendChild？

Question

私はJavaScriptでDOM要素の多くを作成していた場合は、ドキュメントにフラグメントを追加し、その後のDocumentFragmentに追加することなく、DOMにその要素を追加し、その後付着していない要素に追加するよりも優れたパフォーマンスを提供します？すなわち

var el; 
var i = 0; 
var fragment = document.createDocumentFragment(); 

while (i < 2000) { 
    el = document.createElement('li'); 
    el.innerText = 'This is my list item number ' + i; 
    fragment.appendChild(el); 
    i++; } 

document.appendChild(fragment); 

対

var el; 
var i = 0; 
var container = document.createElement('div'); 

while (i < 2000) { 
    el = document.createElement('li'); 
    el.innerText = 'This is my list item number ' + i; 
    container.appendChild(el); 
    i++; } 

document.appendChild(container); 

（注：これは、単なる簡略化した例である私の実際のコードでは、私は多くのテーブル行とテーブル要素を追加している）

おかげ

Answer 1

最初の原則から、私は、実際のラッパー要素を使用すると、DocumentFragmentよりも速くても、わずかに速くてもよいことが推測されます。断片化を解き、すべての子をリストに移動するのではなく、子孫リストに追加する必要がある突然変異オブザーバと単一のノードに通知するために必要な作業が少なくて済むからです。実際には基礎となるデータ構造に依存します。配列はロープ構造よりもペナルティが高いでしょう。

ベンチマークを作成してすべての主要なブラウザでテストし、実装が変更されてから新しいバージョンがリリースされるときに再テストする必要があることを確かめたい場合は、

まあ、実際には、ブラウザを使用しているとは言いませんでした。他のDOM実装もあります。