JS 関数呼び出しのコストは (変数にメモリを割り当てる場合と比較して) どれくらいですか?

StackOverflow https://stackoverflow.com/questions/114872

質問

以下にそのような JS コードを示します。

  for (var i = 0; i < document.getElementsByName('scale_select').length; i++) {
    document.getElementsByName('scale_select')[i].onclick = vSetScale;
  }

getElementsByName の結果をループの前に変数に入れ、その後でその変数を使用すると、コードは速くなりますか?

実生活での影響がどれほど大きいかはわかりませんが、 getElementsByName 通常、項目は 10 個未満です。とにかく根本的なメカニズムを理解したいと思います。

また、この2つの選択肢について、他に注目すべき点があれば教えてください。

役に立ちましたか？

解決

絶対に。それを保存するために必要なメモリは、DOM オブジェクトへのポインタのみになります。 大幅 何かを使用する必要があるたびに DOM 検索を行うよりも苦痛が軽減されます。

理想的なコード:

var scale_select = document.getElementsByName('scale_select');
for (var i = 0; i < scale_select.length; i++)
    scale_select[i].onclick = vSetScale;

他のヒント

プロパティ ルックアップをキャッシュすると多少は役立つかもしれませんが、cループを開始する前に配列の長さを計算するほうが高速であることが証明されています。

したがって、scale_select.length の値を保持する変数をループ内で宣言すると、ループ全体がいくらか高速化されます。

var scale_select = document.getElementsByName('scale_select');
for (var i = 0, al=scale_select.length; i < al; i++)
    scale_select[i].onclick = vSetScale;

DOM の賢い実装では、独自のキャッシュを実行し、何かが変更されたときにキャッシュを無効にします。しかし、今日のすべての DOM がこれほど賢いと期待できるわけではありません (咳 IE 咳) したがって、これを自分で行うのが最善です。

原理的には、ループの前に getElementsByName の結果を変数に入れて、その後でその変数を使用した方がコードは速くなりますか?

はい。

変数を使用します。JavaScript ではそれほど高価ではなく、関数呼び出しは明らかに遅くなります。document.getElementById() を少なくとも 5 回ループする場合は、変数を使用します。ここでの考え方は、関数呼び出しが遅いだけでなく、この特定の関数が DOM 内で指定された ID を持つ要素を見つけようとするため非常に遅いということです。

@オリ

フェッチされた要素の長さプロパティを変数にキャッシュすることも良い考えです。

var scaleSelect = document.getElementsByName('scale_select');
var scaleSelectLength = scaleSelect.length;

for (var i = 0; i < scaleSelectLength; i += 1)
{
    // scaleSelect[i]
}

scaleSelect.length を別の変数に保存しても意味がありません。実際にはすでに 1 つに含まれています。scaleSelect.length は、scaleSelect 配列の属性にすぎないため、他の静的変数と同じくらい簡単にアクセスできます。

そう思います。ループするたびに、エンジンは document.getElementsByName ステートメントを再評価する必要があります。

一方、値が変数に保存されている場合は、すでに値が含まれています。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top