フォームオブジェクトとJavascript配列の性能比較

[新着] Webテンプレートを仮オープンしました



0   名前: へろ : 2007/07/24(火) 23:30  ID:loJ2Tmy0 sub-t1
はじめまして。へろです。

偶然ですが、web画面上にフォームオブジェクトでデータを保持するよりも、javascript配列で保持したほうが、データを参照する際に性能がよいことに気づきました。

この事に関して理由が知りたくて、文献、webなどいろいろと調べてみましたが、どうもこれといった情報が見つかりません。
ただ単に、クライアントのスペックやブラウザに依存しているのでしょうか。

どなたか知っている方がいらっしゃいましたら、ご指導お願いします。



例(極端ですが…)
data[0001]=0001;
data[0002]=0002;
-略-
data[9999]=9999;
<input type=hidden name=data0001 value=0001>
<input type=hidden name=data0002 value=0002>
-略-
<input type=hidden name=data9999 value=9999>

javascriptでhiddenの任意のデータ1つを参照するよりも、
   x = document.formname.data1234.value;
連想配列のデータ1つを参照するほうが速い。
   x = data[1234];

1   名前: 匿名 : 2007/07/24(火) 23:30  ID:gObWvrSw sub-Cz
省略形ではなく本来の形に戻せば分かるんじゃない。
document.formID.data1234.value;
document.forms.namedItem('formID').elements.namedItem('data1234').value;

こんな getter を毎回実行するんだから、そりゃ遅いでしょ。しかも、DOM の NodeList/HTMLCollection は「生きている」、つまり文書に変更があったときにリストも自動更新される。DOM 実装は、getter 実行時に文書変更をチェックして(必要ならば)リストを再構成しなければならない。この点において、IE は驚異的に遅い。

DOM のメリットの 1 つが、このノードリストの自動更新なわけだが、速度とトレードオフでもある。静的な Array で済むのであれば、そっちの方がはるかに速い。

2   名前: 匿名 : 2007/07/24(火) 23:30  ID:gObWvrSw sub-Cz
追記。

最初にノードリストへの参照を保持しておくだけでも、それなりの速度の改善を見込める。
var e = document.forms['formID'].elements;
e['data1233'];
e['data1234'];
e['data1235'];

しかし前述したように、e は HTMLCollection オブジェクトだから、e['data1234'](e.namedItem('data1234') の短縮形)の実行ごとにリストの自動更新チェックが入る。その点で速度では Array にかなわない。

3   名前: へろ : 2007/07/24(火) 23:30  ID:loJ2Tmy0 sub-t1
どうも「DOMの自動更新」がボトルネックのようですね。

javascriptを記述する際に、特に意識することを忘れがちになっていましたが、
これを機にDOMの仕様について、再確認しようと思います。

助かりました、どうもありがとうございます。

一覧へ戻る