どちらのほうが処理が早いか

質問

Food=0;
Drink=0;
<SELECT onchange='Food=this.value; calc();'>
<OPTION value=1>パン</OPTION>
...
</SELECT>
<SELECT onchange='Drink=this.value; calc();'>
<OPTION value=1>水</OPTION>
...
</SELECT>

function calc(){
totalPrice = Price[Food]+Price[Drink];
alert(totalPrice);
}

として一旦グローバル変数に入れて計算するのと

<SELECT id='Food' onchange='calc();'>
<OPTION value=1>パン</OPTION>
...
</SELECT>
<SELECT id='Drink' onchange='calc();'>
<OPTION value=1>水</OPTION>
...
</SELECT>

function calc(){
totalPrice = Price[document.getElementById['Food'].value]+Price[document.getElementById['Drink'].value];
alert(totalPrice);
}

getElementByIdで指定して呼び出して計算するのではどちらのほうが処理が早くなりますか？

回答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]

とアクセス。これだけ。

回答No.5

think49

質問文の2つ目は getElementById のプロパティアクセス演算子が働くので、1つ目のほうが若干速いと思います。

最速を求めるなら泥臭いですが、関数を使わない方向に。プロパティアクセス演算子の使用回数を極限まで減らしてします。
http://jsfiddle.net/HNCGE/

ところでこれ、Number型に型変換していないのは期待通りでしょうか？
質問文では型変換していなかったのでそれに追従しましたが、必要なら Number() を通してください。
http://jsfiddle.net/HNCGE/1/

---
汎用性を重視するなら、#3 さんの方法を推奨。
this.value を使わず、this.form.elements を通すのでプロパティアクセスの回数は増えますが、HTMLはすっきりします。

速度と汎用性、どちらを重視するかは好みの問題だと思います。
バランス感覚のようなもので人それぞれ違います。
個人的には拡張性も考えて http://jsfiddle.net/HNCGE/2/ のようにするかな…。
for-in にするかは迷いどころですが、目的によってコードも変わってきそうです。

回答No.4

dscripty

[ANo.2] を撤回して、[ANo.3] さんに一票。

質問内に form 要素が書かれていなくて、回答に、含めるかどうか迷ったけど、やっぱり form 要素を含めて、function calc() を記述したほうがきれいに書けるね。

回答No.3

Chaire

<form action="#">
　<p>
　　<select name="Food" onchange="calc(this);">
　　　<option value="1">パン</option>
　　</select>
　　<select name="Drink" onchange="calc(this);">
　　　<option value="1">水</option>
　　</select>
　</p>
</form>

var Price = [, 100];
function calc(select){
　var controls = select.form.elements;
　var food = Price[controls['Food'].value];
　var drink = Price[controls['Drink'].value];
　var totalPrice = food + drink;
　alert(totalPrice);
}

・一般に JS のグローバル変数は遅い。
・一般に JS の関数呼び出しは遅い。
・一般に JS のプロパティアクセスは遅い。
・form 内の name は、その form 内に限定されます（ID をまき散らさない）。
・フォーム部品は、自身が属する form を参照できます。
・form は、自分に属する全フォーム部品を elements に格納しています。

値の妥当性はチェックしていませんのであしからず。

回答No.2

dscripty

2つのハイブリッドを薦めてみる。
重視したのは、2点。

* 使う必要のないグローバル変数を使わない。
* function calc() は、要素の値を気にしない。

<SELECT id='Food' onchange='calc(this.value,document.getElementById('Drink').value);'>
<OPTION value=1>パン</OPTION>
...
</SELECT>
<SELECT id='Drink' onchange='calc(document.getElementById('Food').value,this.value);'>
<OPTION value=1>水</OPTION>
...
</SELECT>

function calc(food,drink){
totalPrice = Price[food]+Price[drink];
alert(totalPrice);
}

ちなみに、Food と Drink が同じ配列 Price[] から値段をとってるから、
実際には、↓かな？
totalPrice = FoodPrice[food]+DrinkPrice[drink];

回答No.1

noname#137197

id に関してはDOM 構文上でHashMap にキャッシュされてると思われるので、さほど速度差は無いと思われます。
が・・・これは最近のブラウザの実装について言える希望的観測なので、正確にはループさせて計測してみては？

でもまぁJQuery でやってる事よりははるかにシンプルな記述ですし、実用速度面では問題にならないでしょう？