2007年02月09日

Javascript:appendChild のタイミングで処理速度が変わる

createElemement や createTextNode で要素を生成して、すでに描画?されているオブジェクトに入れ込む場合、入れ込むタイミングによって処理速度が変わるようです。

1.生成した div 要素を、先に body へ appendChild してしまってから、div へテキストノードを入れ込む場合(bf とします)
01   obj = document.createElement('div');
02   document.body.appendChild(obj);
03   obj.appendChild(document.createTextNode('string'));


2.生成した div 要素をにテキストノードを入れ込んだ後に、body へ appendChild する場合(af とします)
01   obj = document.createElement('div');
02   obj.appendChild(document.createTextNode('string'));
03   document.body.appendChild(obj);

感覚的には、2の方が速いだろうと思うのですが・・・。
ちなみに div 要素ではなく createDocumentFragment の方が良いかも知れませんが、微妙に遅い感じです。ほとんど、誤差範囲内ではありますがw



 テスト結果

createElement('img') の場合
DomSpeedTest-image2.gif


createTextNode(str) の場合
DomSpeedTest-text2.gif

i6 = InternetExplorer 6.0
i7 = InternetExplorer 7.0
f2 = FireFox 2.0
o9 = Opera 9.01
(bf) は、上記1
(af) は、上記2

色々な意味でまじ!?って結果です。

■ 先に入れるか後に入れるかでは・・・。
まず、ie に関しては、ほとんど差がありません。誤差範囲内です。
firefox と opera に関しては、想像通りでしたが、firefox の img でのテスト結果は少々拍子抜けです。
ただ text は、ie 以外なら劇的に違う様です。

■ ブラウザ別では・・・。
firefox ってこんなに遅い???聞いてはいましたがこれ程とは。※1
画像に関しては ie7 が最も速い。うーん。腑に落ちない結果です。後述しやす。

ただ!opera に関してですが、この結果でも成績がいいのですが、実際にはさらに良くなります。これも後述。

※1 やはり環境によってパフォーマンスが異なります。

 テスト方法に関して

テストはこちら(img)
上記は実際にテストに使ったものです。1分ぐらい掛かります。

  • 捨(af)、先(bf)、後(af)、捨(bf)の比較テスト4種を1クールとして、0〜10回の計11クールを行います。
  • 捨、先、後の比較テストは、それぞれ div で括られた500個の画像を同一コンテナ(これも div)に、コンテナ内を比較テスト毎にクリアしてから入れ込みます。
  • 0クールは評価に用いません。
  • 捨は評価に用いません。
  • 時間計測は、500個の画像を生成する部分だけを評価しています。
  • 1〜10クールの平均値を用いました。
  • setTimeout を用いて毎回関数から一旦抜けるようにしています。(変更を反映するため。)

0クールを評価に使わない事や、捨があるのは、初期状態と1回でも書き込んだ場合とで状態が異なる事などを疑ったためです。つまり、尿検査で、最初と最後のおしっこを捨てるのと同じ感覚!?です。

ただ、コンピュータの場合は、最適化など、いつどこで状態が変わっているのか、ハッカーレベルでないと分かっていない(と思う)ので厄介です。つまりこんなことをしても、同じ状態で比較できている保証は全くなかったりします(汗)。

実際、opera は(捨 af)が最も早い。これは、色々テストした結果、そういう設計なんじゃないかなと思っています。
これって非常に好感がもてる設計じゃないかなー。閲覧状況をよく把握した仕様だと思います。逆に ie は、劇的にパフォーマンスが下がります。

ただこのテストでは、そういう特殊な状況を極力省こうと(無駄な?w)努力をしてますので、上のグラフでは反映されません。
あくまで、先か後のどちらが有利か?を見ているのであって、ブラウザを比較しているわけではないためです。といいつつグラフの構成が・・・あせあせ(飛び散る汗)

ブラウザの差異は、テストする環境によっても違うと思います。ちなみに上記テストは全て同一の環境でテストしています。
posted by HiFa at 00:35 | 🌁 | Comment(0) | TrackBack(0) | JavaScript雑感 | このブログの読者になる | 更新情報をチェックする
>>> スパムコメントは消してますよん。 お互い無駄な労力は避けましょう。 <<<

この記事へのコメント

コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。