-PR-
  • 困ってます
  • 質問No.6893458
解決
済み

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

  • 閲覧数457
  • ありがとう数0
  • 気になる数0
  • 回答数6
  • コメント数0

お礼率 11% (3/26)

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で指定して呼び出して計算するのではどちらのほうが処理が早くなりますか?
  • 回答数6
  • 気になる数0

質問者が選んだベストアンサー

  • 回答No.6
レベル14

ベストアンサー率 35% (674/1895)

ブラウザによりますが、少なくとも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]

とアクセス。これだけ。
  • ありがとう数0
-PR-
-PR-

その他の回答 (全5件)

  • 回答No.5
レベル12

ベストアンサー率 59% (283/479)

質問文の2つ目は getElementById のプロパティアクセス演算子が働くので、1つ目のほうが若干速いと思います。 最速を求めるなら泥臭いですが、関数を使わない方向に。プロパティアクセス演算子の使用回数を極限まで減らしてします。 http://jsfiddle.net/HNCGE/ ところでこれ、Number型に型変換していないのは期待通りでしょうか? 質問文では型変換していなかったのでそれに追 ...続きを読む
質問文の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 にするかは迷いどころですが、目的によってコードも変わってきそうです。
  • ありがとう数0
  • 回答No.3
レベル10

ベストアンサー率 60% (79/130)

<form action="#">  <p>   <select name="Food" onchange="calc(this);">    <option value="1">パン</option>   </select>   <select n ...続きを読む
<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 に格納しています。

値の妥当性はチェックしていませんのであしからず。
  • ありがとう数0
  • 回答No.4
レベル11

ベストアンサー率 51% (166/325)

[ANo.2] を撤回して、[ANo.3] さんに一票。 質問内に form 要素が書かれていなくて、回答に、含めるかどうか迷ったけど、やっぱり form 要素を含めて、function calc() を記述したほうがきれいに書けるね。
[ANo.2] を撤回して、[ANo.3] さんに一票。

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

id に関してはDOM 構文上でHashMap にキャッシュされてると思われるので、さほど速度差は無いと思われます。 が・・・これは最近のブラウザの実装について言える希望的観測なので、正確にはループさせて計測してみては? でもまぁJQuery でやってる事よりははるかにシンプルな記述ですし、実用速度面では問題にならないでしょう?
id に関してはDOM 構文上でHashMap にキャッシュされてると思われるので、さほど速度差は無いと思われます。
が・・・これは最近のブラウザの実装について言える希望的観測なので、正確にはループさせて計測してみては?

でもまぁJQuery でやってる事よりははるかにシンプルな記述ですし、実用速度面では問題にならないでしょう?
  • ありがとう数0
  • 回答No.2
レベル11

ベストアンサー率 51% (166/325)

2つのハイブリッドを薦めてみる。 重視したのは、2点。 * 使う必要のないグローバル変数を使わない。 * function calc() は、要素の値を気にしない。 <SELECT id='Food' onchange='calc(this.value,document.getElementById('Drink').value); ...続きを読む
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];
  • ありがとう数0
  • 回答数6
  • 気になる数0
このQ&Aで解決しましたか?

関連するQ&A

-PR-
-PR-
こんな書き方もあるよ!この情報は知ってる?あなたの知識を教えて!
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。

その他の関連するQ&A、テーマをキーワードで探す

キーワードでQ&A、テーマを検索する
-PR-
-PR-
-PR-

特集


関連するQ&A

-PR-

ピックアップ

-PR-
ページ先頭へ