Memory Management

• What is memory on browser
• Memory Lifecycle
• How much is too much
• Garbage collection
• Causes of memory leak

What is memory on browser?

The browser memory is your javascript and browser stores data related to render UI or track user's behavior. If something goes wrong on handling memory, it causes

• Page performance gradually decrease.
• Page performance is constantly bad.
• Page performance is occasionally bad.

What "bad" here means freezing or even goes blank page. These bad performance related to memory is caused by memory leak, too much memory, too many times garbage collection.

Memory Lifecycle

• Allocate
• Use
• Release

Allocation is done by defining variables and functions and releasing memory is handled by garbage collection.

How much is too much

There is no guideline for limitation of memory. But you can check heap memory limitation on browser console accordingly.

performance.memory.jsHeapSizeLimit; // will give you the JS heap size

performance.memory.usedJSHeapSize; // how much you're currently using

Also, you can check performance on other websites.

Garbage collection

The signficance of garbage collection is clearing unnecessary objects (string, object, array...) up from memory. Unlike low-level languages C, we don't need to free trash by ourselves.

Causes of memory leak

DOM

Nodes highlighted yellow have direct references to them from the JavaScript code. Nodes highlighted red do not have direct references. They are only alive because they are part of the yellow node's tree. In general, you want to focus on the yellow nodes. Fix your code so that the yellow node isn't alive for longer than it needs to be, and you also get rid of the red nodes that are part of the yellow node's tree.

Timers or callbacks that are forgotten

Global variables

Global object is never being cleaned up by garbage collector. If you assign many properties on global scope, it keeps memory usage keeps high. Airbnb website uses React and assign React object into global scope which take memory. Also third party js code (logger, analytics, and etc) is likely to be on global scope.

Closures

Since closure remembers and access to outer scope of the function scope, it keeps unnecessary outer scope. It is not memory leak but might cause of blowing the memory up.

Resource

https://coding.smashingmagazine.com/2012/11/writing-fast-memory-efficient-javascript/