Why 13 characters can occupy megabytes of memory?


512,000,000 characters long string needs ~1 MB of memory

Max length of a JavaScript string

According to ECMAScript specification a string cannot contain more than 9,007,199,254,740,991 (2⁵³-1) characters. Evidently, the achievable max length also depends on the computer capacity. Also browsers can set their limits. The max string length set in the Chrome source code is 536.8 millions characters. To simplify the sample code, in this post I experiment with a slightly shorter 512 million characters long string.

Similarity between strings and objects

In JavaScript, strings and other primitive types differ from objects in that they cannot have properties. But there is a similarity between string and objects that might be important for optimization of a web application performance. Like…


What is really stored inside variables in JavaScript?

The illustration borrowed from https://www.html5rocks.com/en/tutorials/memory/effectivemanagement/

Objects

Everyone knows that when an object is assigned to a variable, the object value is saved somewhere in memory and the target variable is assigned the reference to the object location in memory. If the reference is assigned to another variable and then any of the two variables can be used to modify the same object:

// sample1.js
let a={id:1};
let b=a;
b.id=2;
console.log(a); // {id: 2}

Non-objects

The JavaScript data types can divided into two groups: objects and primitive types.


Not the heap size, but the total memory used by a single web page.

let a, b, c;printMemory('baseline')
.then(() => {
a = makeString(10);
return printMemory('a = makeString(10)');
})
.then(() => {
b = makeString(3);
return printMemory('b = makeString(3)');
})…


Should we hide, clip or paint overflows in CSS

Difference between hiding and clipping overflow

When text does not fit into its container, the overflow remains visible by default. But it can be easily hidden using CSS property overflow with either of the two values — traditional hidden or more modern clip.


The nice image is borrowed from http://clipart-library.com/clipart/453662.htm



getElementById() alternatives

I start from a simple HTML file containing one div with id attribute a:

<div id="a">A</div>


append() is a convenient alternative to appendChild().

Like appendChild(), append() appends DOM nodes to an element, but unlike appendChild(), append() accepts multiple arguments of any types. The arguments that are not nodes are converted into strings that in turn are converted into text nodes. Then, the mixture of elements and text nodes is appended to the parent node using the same mechanism as in appendChild().

const div = document.createElement('div');
div.appendChild(document.createTextNode('TEST'));
div.style.color = 'red';
root.append(new …

Marian Čaikovski

Java, JavaScript and SQL developer.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store