Allocating memory for JavaScript data types

Question

Allocating memory for JavaScript data types

In my quest to maximize the efficiency of a mobile app I am currently developing, I am curious to find out which data types consume the least amount of memory (keeping in mind that this could differ depending on the browser):

object pointers
boolean literals
number literals
string literals

Out of these options, which is expected to occupy the smallest memory space?

javascript performance memory

Answer 1

Answer №1

Regarding V8:

For Boolean, number, string, null, and void 0 literals in V8, they only take a constant 4/8 bytes of memory for the pointer or immediate integer value embedded in the pointer. There is no heap allocation for these as a string literal will just be internalized. However, exceptions can occur with big integers or doubles which may require boxing with additional bytes. In optimized code, local doubles can remain unboxed in registers or stack, or an array exclusively containing doubles may store them unboxed.

To see the generated code snippet, click here:

function weird(d) {
    var a = "foo";
    var b = "bar";
    var c = "quz";

    if( d ) {
        sideEffects(a, b, c);
    }
}

The pointers to the strings are hard-coded in this example, avoiding any allocation.

Object identities typically require 12/24 bytes for plain objects, 16/32 bytes for arrays, and 32/72 bytes for functions (plus additional bytes if a context object needs allocation). To avoid heap allocation here, bleeding edge V8 along with function inlining is necessary.

Consider the following example:

function arr() {
    return [1,2,3]
}

The values 1,2,3 share a copy-on-write array but unique identity objects need to be allocated. Returning an array from an upper scope can prevent frequent identity allocations. For a simpler alternative, check out this code snippet.

If you encounter memory issues with JS, dynamic function creation could be the culprit. Hoist functions to a level where they don't need recreation to improve performance. Opt for static functions whenever possible.

Excessive memory usage matters in JavaScript as it is traced by garbage collector affecting performance. Run the following snippet with tracing options to observe:

var l = 1024 * 1024 * 2
var a = new Array(l);

for( var i = 0, len = a.length; i < len; ++i ) {
    a[i] = function(){};
}

Compare with using a static function instead:

var l = 1024 * 1024 * 2
var a = new Array(l);
var fn = function(){};

for( var i = 0, len = a.length; i < len; ++i ) {
    a[i] = fn;
}

Answer 2

Regarding V8:

For Boolean, number, string, null, and void 0 literals in V8, they only take a constant 4/8 bytes of memory for the pointer or immediate integer value embedded in the pointer. There is no heap allocation for these as a string literal will just be internalized. However, exceptions can occur with big integers or doubles which may require boxing with additional bytes. In optimized code, local doubles can remain unboxed in registers or stack, or an array exclusively containing doubles may store them unboxed.

To see the generated code snippet, click here:

function weird(d) {
    var a = "foo";
    var b = "bar";
    var c = "quz";

    if( d ) {
        sideEffects(a, b, c);
    }
}

The pointers to the strings are hard-coded in this example, avoiding any allocation.

Object identities typically require 12/24 bytes for plain objects, 16/32 bytes for arrays, and 32/72 bytes for functions (plus additional bytes if a context object needs allocation). To avoid heap allocation here, bleeding edge V8 along with function inlining is necessary.

Consider the following example:

function arr() {
    return [1,2,3]
}

The values 1,2,3 share a copy-on-write array but unique identity objects need to be allocated. Returning an array from an upper scope can prevent frequent identity allocations. For a simpler alternative, check out this code snippet.

If you encounter memory issues with JS, dynamic function creation could be the culprit. Hoist functions to a level where they don't need recreation to improve performance. Opt for static functions whenever possible.

Excessive memory usage matters in JavaScript as it is traced by garbage collector affecting performance. Run the following snippet with tracing options to observe:

var l = 1024 * 1024 * 2
var a = new Array(l);

for( var i = 0, len = a.length; i < len; ++i ) {
    a[i] = function(){};
}

Compare with using a static function instead:

var l = 1024 * 1024 * 2
var a = new Array(l);
var fn = function(){};

for( var i = 0, len = a.length; i < len; ++i ) {
    a[i] = fn;
}

Answer 3

Answer №2

When we talk about something being "literal," it refers to code itself, even if it's not in string form, which makes it a more intricate type of data and therefore requires more space compared to simple values.

In theory, boolean values could potentially take up the smallest amount of space since they can fit into a single bit. However, it's usually not optimized by most engines. If you really want to ensure this optimization, you may need to manually manipulate typed arrays.

Ultimately, performance is all about practicality, and the best way to understand it is through continuous testing. As we are aware, there is no one-size-fits-all answer that works across all browsers and versions.

Answer 4

When we talk about something being "literal," it refers to code itself, even if it's not in string form, which makes it a more intricate type of data and therefore requires more space compared to simple values.

In theory, boolean values could potentially take up the smallest amount of space since they can fit into a single bit. However, it's usually not optimized by most engines. If you really want to ensure this optimization, you may need to manually manipulate typed arrays.

Ultimately, performance is all about practicality, and the best way to understand it is through continuous testing. As we are aware, there is no one-size-fits-all answer that works across all browsers and versions.

Allocating memory for JavaScript data types

Answer №1

Answer №2

Similar questions

Errors occur when dealing with higher order functions, such as the "map is

Generating a container DIV with loops and ng-class in AngularJS

Error encountered in Typescript: SyntaxError due to an unexpected token 'export' appearing

Looking for a substitute for a promise within Array.map or a loop?

Using Firebase Firestore to fetch an array field from a particular document and then leveraging those array values for mapping other documents

Having issues retrieving a JSON array in PHP with the json_decode function

What's the best way to use JavaScript to obtain the width of a 'css-pixel' based on a media query?

What is the best way to eliminate backslash escaping from a JavaScript variable?

Eliminating an index from a JSON array using Typescript

My method for updating form input properties involves switching the disable attribute from "false" to "true" and vice versa

Having trouble getting the Random Function to function correctly in Discord.js

Guide to altering JSON using Javascript

Can the discriminator be preprocessed in a zod discriminated union?

Warning from Vue: Steer clear of directly changing a prop as it will be replaced whenever the parent component undergoes re-rendering

Issue encountered when attempting to make a global call to an asynchronous function: "The use of 'await' is restricted to async functions and the top level bodies of modules."

implementing a JSON array of integers within an Angular application

SharePoint 2013 only allows the first AJAX request to work successfully, except when in Edit Mode

What is the best way to set up a function to automatically execute on a specific date and time

Coming back from the setState callback

Using Angular, implementing conditional statements within a for loop