Wie teuer sind JS-Funktionsaufrufe (verglichen mit der Zuweisung von Speicher für eine Variable)?

Question

einig JS-Code wie, dass man hier Gegeben:

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

Würde der Code schneller sein, wenn wir das Ergebnis getElementsByName in eine Variable vor der Schleife gesetzt und dann die Variable danach benutzen?

Ich bin nicht sicher, wie groß der Effekt im wirklichen Leben ist, mit dem Ergebnis getElementsByName in der Regel < 10 Elemente. Ich würde die zugrundeliegende Mechanik trotzdem gerne verstehen.

Wenn es noch etwas anderes zu den beiden Optionen gibt, sagen Sie es mir bitte.

Answer 1

Definitiv. Der zum Speichern benötigte Speicher wäre nur ein Zeiger auf ein DOM-Objekt und das ist weniger schmerzhaft als eine DOM-Suche jedes Mal, wenn Sie etwas verwenden müssen!

Idealish Code:

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

Answer 2

Wäre der Code im Prinzip schneller, wenn wir das Ergebnis von getElementsByName in eine Variable vor der Schleife schreiben und dann die Variable danach verwenden?

ja.

Answer 3

Ich denke schon. Jedes Mal, wenn eine Schleife ausgeführt wird, muss die Engine die Anweisung document.getElementsByName neu auswerten.

Auf der anderen Seite, wenn der Wert in einer Variablen gespeichert wird, hat es bereits den Wert.

Answer 4

Verwenden Variablen. Sie sind nicht sehr teuer in JavaScript und Funktionsaufrufe sind definitiv langsamer. Wenn Sie für document.getElementById() mindestens 5-mal eine Schleife verwenden, verwenden Sie eine Variable. Die Idee hier ist nicht nur die Funktion Aufruf ist langsam, aber diese spezifische Funktion ist sehr langsam, da es versucht, das Element mit der angegebenen ID im DOM zu finden.

Answer 5

Eine intelligente Implementierung von DOM würde selbst Caching durchführen und den Cache ungültig machen, wenn sich etwas ändert. Aber nicht alle DOMs können heute so intelligent sein (Husten IE Husten), so dass es am besten ist, wenn Sie dies selbst tun.

Answer 6

Caching die Eigenschaft Lookup könnte helfen, einige, aber c aching the length of the array before starting the loop has proven to be faster.

So eine Variable in der Schleife deklariert, die den Wert des scale_select.length halten würde einige die gesamte Schleife beschleunigen.

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

Answer 7

@ Oli

die Länge Eigentum der in einer Variablen geholt Elemente Caching ist auch eine gute Idee:

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

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

Answer 8

Es gibt keinen Grund, den scaleSelect.length in einem separaten Speicher Variable; es ist tatsächlich schon in einem - scaleSelect.length ist nur ein Attribut des scaleSelect-Arrays und als solches ist es so schnell zugänglich wie jede andere statische Variable.