innerHTML と DOM(appendChild、createElement等)の処理速度を比較したい。
検索すると頭の良い先人様達の有益な情報が沢山出てきました。
そんな情報を元に、自分用にあれこれメモしてみます。

ちなみにjQuery.appendは、JavaScriptベタ書きのappendChildと同等の挙動なので、
jQuery.appendとappendChildの実質的な処理速度に差は無いです。(たぶん)

結論から言うと、DOM群よりinnerHTMLの方が処理は速いようです。

(うだうだと賢人様たちの情報を漁った結果)
innerHTMLとDOM(createElement..)での描画速度の比較

大体2〜3倍の差でしょうか。




以下、個人的な脳内補足（間違ってるかも）


◆innerHTMLとDOM群の違い

そもそも、どんな挙動なのか？比較します。

■ innerHTML
指定したエレメント・タグ内を消去！指定した内容にバッサリ書き換えます。
ブロッキングなしに後からhtml文字列をそのまま出力できる反面、scriptは実行されません。
参照動作として、指定したエレメント・タグの始まりと終わりを見つける必要があります。

■ DOM(appendChild、createElement等)
指定したエレメント・タグの中、外、細かい場所に指定した内容を生成・追加・削除します。
ブロッキングなしに後からhtml文字列を出力でき、スクリプトも実行します。(document.writeが含まれる場合は実行不可)
appendChildの場合、参照動作として、指定したエレメント・タグの始まりと終わりを見つけた後、エレメント内の情報の最後を見つける必要があります。

■ document.write（ついでに）
記述した箇所に指定したhtml文字列を直接、その場で出力します。スクリプトも実行します。
DOM構築中の挙動なので処理が終わるまで他のレンダリングをブロックします。
レンダリング終了後に呼び出されても動作しません。
参照動作として、何も見つける必要が無い故、どこにも指定できません。

このように比較すると、機能面から見てinnerHTMLだけでは出来ることが限られています。
シンプルな効果の分、挙動に無駄がないので処理速度が上がるのかな。
文字列が複雑化するほど、innerHTMLは比例して処理速度が遅くなるらしいので、ケースバイケースでDOM群を使用した方が良さそうです。

お疲れさまでした。
参考になりましたらソーシャルメディアで共有してくださいませ。

【ブログカスタマイズ＞jQuery(Script)文字系の最新記事】

• [jquery]setTimeoutを使ったタイマー遅延実行する方法
• Math.random() でランダムな整数を取得する方法
• ある特定の文字列を含まないものにマッチする正規表現
• ある特定の2つの文字列両方を含むものにマッチする正規表現
• ページ内の該当する全てのアンカーリンク(URLアドレス)を文字列置換するスク..