Dlaczego modyfikowanie globalnej zmiennej zwiększa wykorzystanie pamięci w Chrome?

Question

Niedawno grałem trochę z optymalizacją kodu javascript, aby tworzyć gry HTML5, kierując się przede wszystkim na przeglądarki mobilne. Zacząłem od porównywania silników i stopniowo upraszczałem porównywane kody, a do czegoś nie rozumiałem.

Przypadek jest taki, że zauważyłem, że w Chrome (więc domyślam się, że wszystkie przeglądarki oparte na webkitach) modyfikowanie globalnej zmiennej powoduje zwiększenie używanej pamięci. Pokażę wam dwa przykłady:

1) Modyfikacja globalnej zmiennej:

Kod:

var globalVariable = 0; 

var fps = 60; 
window.onload = init; 

function init() { 
    setInterval (loop, 1000/fps); 
}; 


function loop(){ 

    for (var i = 0; i < 1000000; i++) { 
    globalVariable = Math.random(); 
    } 
}; 

Ekran osi czasu Pamięć:

Jak widać to ma wiele pamięci do zebrania w ciągu pierwszych 10 sekund!

2) Tworzenie zmiennej lokalnej zamiast modyfikowania globalnej:

Kod pozostaje taka sama, jedyną zmianą jest dodanie słowa kluczowego „var” w pętli. globalVariable = Math.random(); staje się var localVariable = Math.random();

Ekran Timeline pamięci:

Jak widać zużycie pamięci jest bardzo niski, w ciągu pierwszych 10 sekund po prostu zwiększa około 0,1MB.

Różnica jest naprawdę ogromna! Nie jestem w stanie tego sprawdzić teraz, ale poinformowano mnie, że w Firefoksie w obu przykładach użycie pamięci dla obu przypadków wygląda prawie tak samo.

Czy ktoś może mi wyjaśnić, lub wskazać mi zasoby, w których jest wyjaśnione? Lub czy ktoś może zaproponować mi, jak zmodyfikować zmienną globalną, aby nie zwiększać używanej pamięci?

Answer 1

(pierwszy, szybkie rant o zmiennych „globalny”. Nie ma zmiennych globalnych w JavaScript, istnieją zakresy, w tym zakres okno poziomu)

Ale odpowiedź jest, że dostęp do zmiennej z innego zakres w funkcji w Javascriptu podnosi go do bieżącego zakresu. Here's a fun explanation of the effect.