Tại sao thay đổi biến toàn cầu tăng sử dụng bộ nhớ trong Chrome

Question

Gần đây tôi đã được chơi một chút với tối ưu hóa mã javascript để làm cho trò chơi HTML5, nhắm mục tiêu các trình duyệt đặc biệt là điện thoại di động. Tôi bắt đầu với việc so sánh các công cụ và dần dần đơn giản hóa các mã so sánh và tôi đã có một cái gì đó mà tôi không hiểu.

Trường hợp này là tôi nhận thấy rằng trong Chrome (vì vậy tôi đoán tất cả các trình duyệt webkit dựa) sửa đổi nguyên nhân biến toàn cầu tăng bộ nhớ sử dụng. Hãy để tôi chỉ cho bạn hai ví dụ:

1) Sửa đổi biến toàn cầu:

Code:

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(); 
    } 
}; 

Screen of Memory Timeline:

Như bạn có thể thấy nó có rất nhiều bộ nhớ để thu thập trong 10 giây đầu tiên!

2) Tạo biến địa phương thay vì sửa đổi toàn cầu một:

Mã này vẫn giữ nguyên, thay đổi duy nhất là thêm từ khóa "var" trong vòng lặp. globalVariable = Math.random(); trở thành var localVariable = Math.random();

Screen of Memory Timeline:

Như bạn thấy sử dụng bộ nhớ thực sự thấp, trong 10 giây đầu tiên nó chỉ tăng khoảng 0.1MB.

Sự khác biệt là thực sự rất lớn! Tôi không thể kiểm tra nó bây giờ, nhưng tôi đã được thông báo rằng trong Firefox trong cả hai ví dụ việc sử dụng bộ nhớ cho cả hai trường hợp trông gần như giống nhau.

bất cứ ai có thể giải thích cho tôi, hoặc chỉ cho tôi đến các nguồn tài nguyên, nơi nó được giải thích? Hoặc bất cứ ai có thể đề nghị tôi làm thế nào để sửa đổi biến toàn cầu để không tăng bộ nhớ được sử dụng?

Answer 1

(lần đầu tiên, một rant nhanh về biến 'toàn cầu'. Không có các biến toàn cục trong Javascript, có phạm vi, bao gồm một phạm vi cửa sổ cấp)

Nhưng, câu trả lời là truy cập vào một biến từ một phạm vi trong một hàm trong Javascript hoán đổi nó vào phạm vi hiện tại. Here's a fun explanation of the effect.