読者です 読者をやめる 読者になる 読者になる

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

スポンサーリンク

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

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


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

  • 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の文字列操作は、場合によってとてつもなく遅くなる場合もあります。(これについては、次のエントリで…)