documentにnodeを追加するタイミング

技術

Firefoxでは、documentにnodeを追加するタイミングで実行速度に差がでるようです。

  • documentにnodeを追加してからnodeを組み立てる ⇒ 遅い
  • nodeを組み立ててからdocumentに追加する ⇒ 速い

他のブラウザでは調べていませんが、どうなんでしょう。


about:blankでJavaScript Shellを開き、以下のスクリプトをペーストして実験しました。

// SLOW
var t = new Date().getTime();
var node = document.createElement("span");
document.body.appendChild(node); // <======= 
for (var i = 0; i < 10000; i++) {
    node.appendChild(document.createTextNode("a"));
}
print(new Date().getTime() - t);
// FAST!
var t = new Date().getTime();
var node = document.createElement("span");
for (var i = 0; i < 10000; i++) {
    node.appendChild(document.createTextNode("a"));
}
document.body.appendChild(node); // <=======
print(new Date().getTime() - t);

上のは5200ms前後、下のは900〜1600msくらいでした。


参考

(追記)

この記事を書いた直後に、同じ問題でまた悩みました(頭悪い)。。

documentに関連付けられたあるサブツリーの要素を、別の要素の子に移し変えて、最後にそのサブツリーを丸ごと入れ替えるような処理をしていたんですが、先にremoveChildで入れ替えるサブツリーとdocumentの関連を断ち切ったところ、3〜4倍速くなりました。

あるサブツリーに操作を加える場合、一度documentから切り離して操作した後、もう一度documentに書き戻すことで速度が改善する場合がありそうです。