DocumentFragmentの考察

リスト1	リスト2	リスト3	リスト4	リスト5	リスト6	リスト7	リスト8
項目1 項目2 項目3 項目4 項目5 項目6 項目7 項目8	項目1 項目2 項目3 項目4 項目5 項目6 項目7 項目8	項目1 項目2 項目3 項目4 項目5 項目6 項目7 項目8	項目1 項目2 項目3 項目4 項目5 項目6 項目7 項目8	項目1 項目2 項目3 項目4 項目5 項目6 項目7 項目8	項目1 項目2 項目3 項目4 項目5 項目6 項目7 項目8	項目1 項目2 項目3 項目4 項目5 項目6 項目7 項目8	項目1 項目2 項目3 項目4 項目5 項目6 項目7 項目8

次のUL要素のidは「additionalLists」です。

• 項目9
• 項目10
• 項目11
• 項目12
• 項目13
• 項目14
• 項目15
• 項目16

リスト1 から リスト8 それぞれに、項目9 から 16 を追加します。

function addListsViaDFragment()
{
 var elmUL = document.getElementById('additionalLists');
 var nlListsToAdd = elmUL.getElementsByTagName('LI');
 // 項目9から16のLI要素を含んだNode Listを作成

 var dfLists = document.createDocumentFragment();
 // DocumentFragmentオブジェクトを作成

 for(var i = 0, len = nlListsToAdd.length, elmLI;
  i < len;
  i++)
 {
  elmLI = nlListsToAdd.item(i);
  dfLists.appendChild(elmLI.cloneNode(true));
 }
 // 項目9から16のLI要素の複製をDocumentFragmentの子として追加

 var elmTable = document.getElementsByTagName('TABLE').item(0);
 var nlULs = elmTable.getElementsByTagName('UL');
 // 追加先のUL要素を含んだNode Listを作成

 for(var i = 0, len = nlULs.length, elmUL, dfClone;
  i < len;
  i++)
 {
  elmUL = nlULs.item(i);
  dfClone = dfLists.cloneNode(true);
  elmUL.appendChild( dfClone );
 }
 // 各UL要素に、DocumentFragmentの複製を追加
 // appendChildの引数はDocumentFragmentになっていますが、
 // 実際に追加されるのはDocumentFragmentの子供達だけです。
}

1. 項目9から16のLI要素それぞれの複製を、DocumentFragmentの子供として追加（計8回のappendChild）
2. DocumentFragmentの複製を作り、リスト1から8の各UL要素に追加（計8回のappendChild）

結果的に、16回のappendChildが行われます。

DocumentFragmentを利用しない場合には結構面倒なことになるのではないでしょうか。

色々な方法がありますが、「Nodeの追加に関してDOMのインターフェイスだけを利用する」という制限を設けると、8*8で計64回はappendChildしなければなりません。

普通はこのような場合innerHTMLを利用することを思いつきます。非常にシンプルなコードで済むからです。しかし敢えてDocumentFragmentを活用するメリットは、もちろん標準に準拠しているということもありますが、処理速度です。

innerHTMLの書き換えは低速です。……と、Dudeさん（誰）が言ってました（参考：更なるパフォーマンス向上のヒント）。

• innerHTML経由で追加

function addListsViaInnerHTML()
{
 var d = document;
 var htmlListsToAdd = d.getElementById('additionalLists').innerHTML;
 var elmTable = d.getElementsByTagName('TABLE').item(0);
 var nlULs = elmTable.getElementsByTagName('UL');
 for(var i = 0, len = nlULs.length, elmUL;
  i < len;
  i++)
 {
  elmUL = nlULs.item(i);
  elmUL.innerHTML += htmlListsToAdd;
 }
}

ちょっと体感できませんか。ではとりあえず25回やってみましょう。（ご注意：Geckoエンジンの場合innerHTMLの書き換えが極めて低速ですので、次のボタンは押さない方が良いと思います）

• DocumentFragmentで25回
• innerHTMLで25回

いやー凄い差がでるものですね。私の環境（IE6/Win）では、DocumentFragmentで3秒弱、innerHTMLで10秒近くかかりました。やっぱりDudeさん（誰）の言うことは聞くべきです。

もちろん項目9から16を一つずつコピーして追加する方法も低速です。

• appendChildで一つずつ追加（25回）

function addLists()
{
 var d = document;
 var elmUL = d.getElementById('additionalLists');
 var nlListsToAdd = elmUL.getElementsByTagName('LI');
 var elmTable = d.getElementsByTagName('TABLE').item(0);
 var nlULs = elmTable.getElementsByTagName('UL');
 for(var i = 0, len = nlListsToAdd.length, elmLI;
  i < len;
  i++)
 {
  elmLI = nlListsToAdd.item(i);
  for(var j = 0, jlen = nlULs.length, elmUL, elmLIClone;
   j < jlen;
   j++)
 {
   elmUL = nlULs.item(j);
   elmLIClone = elmLI.cloneNode(true);
   elmUL.appendChild(elmLIClone);
 }
 }
}

IEではinnerHTMLより遅いかも知れません。但しGeckoエンジンの場合はinnerHTMLよりは速いです。

• 木構造をしていない文書の断片を切り貼りするような操作では、DocumentFragmentを活用しましょう。
• innerHTMLプロパティの書き込みは、できるだけ行わないようにしましょう。わらい。

DocumentFragmentは、Nodeインターフェイスを継承し、独自のインターフェイスを持ちません。その名前に反して、Documentインターフェイスは継承しませんので注意が必要です。

継承は形式的なものです。たとえば、Nodeインターフェイスが実装しているhasAttributesメソッドも利用できますが、その結果は必ずfalseになります。attributesは、必ずnullです。つまりDocumentFragmantは、属性を持ちません。

DocumentFragmentをappendChildやinsertBeforeメソッドのパラメータに指定すると、DocumentFragmentの中身（子要素）が全て移動しますが、自分自身はツリーに追加されません。その後DocumentFragmentのchildNodesを参照すると、空っぽになっていることが分かります。

DocumentFragmentは、自分自身は決してDOMツリーに追加されることのない、Nodeを格納する容器のようなものです。