Javascript:在仅在需要时调用的函数中定义大对象是否节省内存？

Question

在我的网络应用程序的某个页面上，我需要定义几个相当大的对象(每个对象超过 1000 行代码)。现在他们的定义代码在主线程上，比如:

var Library = {};

Library.objectA = { /* ... 1000s of lines ... */ };
Library.objectB = { /* ... 1000s of lines ... */ };
Library.objectC = { /* ... 1000s of lines ... */ };

但是，有时我只需要这些对象，具体取决于用户操作。我想知道如果我像这样处理事情是否会减少对浏览器内存的负担:

var Library = {};

Library.defineObjectA = function() {
    Library.objectA = { /* ... 1000s of lines ... */ };
};

document.getElementById('buttonA').addEventListener('click', function() {
    Library.defineObjectA();
    // now do something with Library.objectA
});

代码行数大致相等——我不知道第二种方法是否会通过仅在需要时运行代码来定义 objectA 来以某种方式节省内存。对此有何建议？

Answer 1

如果你说我只在用户需要的时候才初始化对象，那显然有节省内存的优势。有时用户可能不需要这个对象，那么这个对象根本就不会被初始化，内存被节省了。

但是您必须小心，因为从按钮单击初始化对象将在用户每次单击按钮时初始化对象，因为以下脚本。

document.getElementById('buttonA').addEventListener('click', function() {
    Library.defineObjectA();
    // now do something with Library.objectA
});

你需要做的是，当用户点击按钮时检查对象是否已经初始化，如果没有则初始化它。

document.getElementById('buttonA').addEventListener('click', function() {
    if(!Library.objectA) Library.defineObjectA();
    // now do something with Library.objectA
});

Does Library.defineObjectA method takes up more memory than Library.objectA Object?

当页面加载时，浏览器初始化全局对象，开始将所有脚本编译(并运行)为字节码。脚本在运行时会为变量和对象分配内存，并且 window 对象的大小会增加。

当运行以下脚本时，将生成并执行对象的字节码，并在内存中初始化objectA。

Library.objectA = { /* ... 1000s of lines ... */ };

当运行以下脚本时，将生成函数的字节码(包括内部的所有内容)，并将指向字节码的指针添加到 Library 对象。没有对象被初始化。

Library.defineObjectA = function() {
    Library.objectA = { /* ... 1000s of lines ... */ };
};

之后，当调用defineObjectA 方法时，objectA 会在内存中初始化，并且该函数还会分配作用域内存。作用域内存保存所有在函数内部初始化的局部变量，如果 objectA 有任何闭包函数(这很可能发生；)

，则在函数返回后不会被释放

在这种情况下，我们没有在函数内部初始化变量，所以我们可以忽略作用域内存和函数的字节码内存，所以如果用户不初始化，稍后初始化对象的方法确实节省了内存。虽然这不是有形的节省，但肯定是一个好习惯。