2013年08月22日

2013 08.22 Thu


innerHTMLとDOM(appendChild,createElement等)、どっちが速い?[表示速度の比較]
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群を使用した方が良さそうです。

お疲れさまでした。
参考になりましたらソーシャルメディアで共有してくださいませ。
posted by こさめ
edit  re
カテゴリ
インターネット>ブラウザ・WEBメール(24)
インターネット>Firefoxアドオン、設定(15)
インターネット>Proxomitronフィルター(32)
インターネット>ブログ、WEBサービス(53)
インターネット>アフィリエイト・ポイントサイト(27)
インターネット>楽天、ポイントあれこれ(5)
インターネット>Windows最適設定(32)
インターネット>インターネット設定(17)
インターネット>デスクトップ改造・拡張(7)
インターネット>セキュリティソフト(6)
ブログカスタマイズ>カテゴリー、記事一覧系(38)
ブログカスタマイズ>jQuery(Script)文字系(23)
ブログカスタマイズ>CSS(Script)デザイン(28)
ブログカスタマイズ>ブログパーツ(7)
ブログカスタマイズ>携帯モバイル系(3)
ブログカスタマイズ>SEO・アクセスアップ(31)
マルチメディア>Brackets(5)
マルチメディア>画像系ソフト(6)
マルチメディア>DVD・動画プレイヤー(15)
マルチメディア>動画編集ソフト(6)
マルチメディア>音楽再生プレイヤー(16)
マルチメディア>ネットラジオ配信・編集(3)
マルチメディア>P2Pテレビソフト(4)
マルチメディア>おもしろ動画・感動動画(25)
デザイン>フリー素材 画像(5)
デザイン>HP・ブログ フリー素材(6)
デザイン>イラスト(非素材)(8)
デザイン>作詞作曲編曲MP3(5)
雑記>PC部品・音楽機材(7)
雑記>映画・アニメ・漫画・芸能(14)
雑記>どうでもいい雑学知識(6)
雑記>ゲーム(6)
雑記>スマホ・携帯電話(6)
雑記>カーナビ・ETC(3)
雑記>ネット銀行とか(2)
雑記>18禁?ちょいエロネタ(3)

 (C) 2006 - kosame All rights.