innerHTMLとDOM(createElement..)での描画速度の比較

JavaScriptでのHTMLの描画方法として、innerHTMLとDOM(createElement,appendChild等)の2パターンがあります。
上記について、DOMよりinnerHTMLの方が早いというのを聞きますが、実際どれくらい違うのかが気になったので、div配下の子ノードとしてdiv+テキストノードを複数追加するようなサンプルを書いてみました。

• サンプル(innerHTMLとDOMでの描画速度比較)

で測定しようと思ったところで、既に同じようなことをしている方を発見…

• 柴犬ラボ: DOM vs innerHTMLどっちが速い？

とりあえず、自分で作ったサンプルで測定してみました。結果(数回やったうちの平均)は下記になります。

• 500件の場合
  • IE
    • innerHTML:70ms
    • DOM:300ms
  • FireFox 1.5
    • innerHTML:50ms
    • DOM:210ms
  • Opera 8.5
    • innerHTML:50ms
    • DOM:230ms

• 1000件の場合
  • IE
    • innerHTML:170ms
    • DOM:500ms
  • FireFox 1.5
    • innerHTML:120ms
    • DOM:310ms
  • Opera 8.5
    • innerHTML:90ms
    • DOM:270ms

• 2000件の場合
  • IE
    • innerHTML:360ms
    • DOM:800ms
  • FireFox 1.5
    • innerHTML:200ms
    • DOM:620ms
  • Opera 8.5
    • innerHTML:210ms
    • DOM:650ms

今回のサンプルでは、全てのパターンで、innerHTMLがDOMより早かったのですが、innerHTMLの場合、文字列の結合等が多くなりがちで、文字列操作に時間がかかってしまう可能性もあるので、その部分には注意が必要です。
特にIEの文字列操作は、場合によってとてつもなく遅くなる場合もあります。(これについては、次のエントリで…)