CODEWITHSUNDEEP
javascriptmemory
arbuthnott
arbuthnott

Reputation: 3819

Javascript: does it save memory to define large objects inside functions that are called only when needed?

On a certain page of my web app, I need to define several quite large objects (over 1000 lines of code each). Right now their definition code is on the main thread, like:

var Library = {};

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

However, I only need these objects sometimes, depending on user actions. I'm wondering if it will be less taxing to the browser's memory if I handle things more like this:

var Library = {};

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

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

The lines of code are roughly equal - what I don't know is if the second approach will somehow save memory by only running the code to define objectA when needed. Any advice on this?

Upvotes: 3

Views: 524

Answers (2)

Munim Munna
Munim Munna

Reputation: 17556

If you say I will only initialize the Objects only when user needs it, then obviously there is memory saving advantage. Sometimes user may not need the Object, then the Object will not be initialized at all, Memory is saved.

But you have to be careful though, as initializing the Object from a button click will initialize the Object every time user clicks the button because of the following script.

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

What you need to do is, check if the Object has been already initialized when user clicks on the button, if not then initialize it.

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?

When a page is loaded browser initializes the global objects starts to compile (and run) all scripts to bytecodes. Scripts when run allocates memory for variables and objects and the size of window object grows.

When the following script is run bytecode of the object is generated and executed and objectA is initialized in memory. 

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

When the following script is run bytecode of the function (including everything inside) is generated and a pointer to the bytecode is added to Library Object. No object is initialized.

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

Afterwards when the defineObjectA method is called objectA is initialized in memory and a scope memory is also allocated by the function. The scope memory holds all the local variables initialized inside the function and will not be freed after the function returns if objectA has any closure function (which is most likely to happen ;)

In this case we have no variables initialized inside the function, so we can neglect the scope memory and the bytecode memory of the function, so the approach of initializing the object later does save memory if not initialized by user. Though it is not tangible amount of saving but surely a good practice.

Upvotes: 2

JoeCodeFrog
JoeCodeFrog

Reputation: 418

It saves memory at the expense of runtime speed, but it is most likely negligible.

Upvotes: 0

Related Questions