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

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の任意のデータ１つを参照するよりも、
　　　x = document.formname.data1234.value;
連想配列のデータ１つを参照するほうが速い。
　　　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の仕様について、再確認しようと思います。

助かりました、どうもありがとうございます。
一覧へ戻る