グローバル変数とgetElementByIdの処理速度比較

質問

• グローバル変数を使用して一時的に値を保持して計算する方法と、getElementByIdで要素を取得して計算する方法の処理速度を比較します。
• 質問文章では、2つのSELECT要素の選択値を取得して計算する処理を想定しています。
• グローバル変数を使用する方法では、パンと水の価格を保持して合計価格を計算し、アラートで表示します。

回答No.6

中村 拓男（@tknakamuri） · ベストアンサー

ブラウザによりますが、少なくともIE6では getElementById は ページ内のid数に
ほぼ正確に速度が反比例します。キャッシュも効きません。

id がページ内に数千個あると、下記のハッシュに比べ getElementById の速度は
数十分の 1 になります。

ページに id がたくさんある場合で、getElementById を使いたいなら、
下記ハッシュを使うことをお勧めします。

var idHash = {};
var all_Nodes = document.getElementsByTagName('*');
var node_count = all_Nodes.length;
for (var i = 0; i < node_count; i++) {
var node_ref = all_Nodes[i];
var node_id = node_ref.id;
if (node_id) {
idHash[node_id] = node_ref;
}
}

としておいて

idhash[XXXXXXXX]

とアクセス。これだけ。