Memory Management in JavaScript
Author: Tran Tuan Quy
Date: Dec 28, 2017
About Me
-
Full Stack JavaScript Developer
-
Technical Manager at NAU Studio
-
I has worked for Pyramid Consulting as Frontend Manager
Contact Me
-
Twitter: #tuanquynet
-
G+: tuanquynet
- Gmail: tuanquynet
Contents
-
Memory Life Cycle
-
Stack & Heap
-
Garbage Collection
-
Detect Memory Leak
-
Code smell for memory leak
-
Recap
Memory Life Cycle
Memory Life Cycle
- Allocate memory
- Change allocated memory
- Reclaim allocated memory
Memory Life Cycle
//Allocate memory for creating an array
let students = ['John', 'David', 'Susan'];
//Change allocated memory
students[0] = 'Mary';
//Reclaim memory which is allocated at line 2
students = '';
Memory Life Cycle
Stack & Heap
Stack & Heap
Stack
- LIFO
- Allocate for local variables
- Free automatically when function exit
Heap
- Unordered area
- Allocate for creating object
- Managed by GC
an array
a date
a user
10
address of user
address of an array
address of date
Garbage Collection
Primitive Type
- Boolean
- String
- Number
- null
- undefined
Reference Type
- Object
- Array
- Date
- Function
Garbage Collection
Garbage Collection
Garbage collection is the process of finding memory which is no longer used by the application and releasing it
Garbage Collection
Reference
function Student(name, dob) {
this.name = name;
this.dob = dob;
}
let bob = new Student('Bob', new Date('2009-01-01')); 
Garbage Collection
Circular Reference
function Student(name, dob) {
this.name = name;
this.dob = dob;
this.circularReference = this;
}
let bob = new Student('Bob', new Date('2009-01-01'));
Garbage Collection
Object which is not needed will be removed from memory
Garbage Collection
BUT
When an Object is not needed and considered garbage collectable?
Garbage Collection
When there is no reference to the object
Garbage Collection
function Student(name, dob) {
this.name = name;
this.dob = dob;
this.circularReference = this;
}
let bob = new Student('Bob', new Date('2009-01-01'));
//Release any reference to student object.
bob = null;
Garbage Collection
-
We can not control process of garbage collector
-
Programmer must explicitly remove any reference to unused objects to make it garbage collectable
Detect Memory Leak
Detect Memory Leak
- Check Chrome Task Manager to see if the tab’s memory usage is growing
- Identify the sequence of actions you suspect is leaking
- Do a Timeline recording and perform those actions
- Use the Trash icon to force GC. If you don’t objects will be alive in memory until the next GC cycle.
- Use the Object Allocation Tracker to narrow down the cause of the leak. It takes heap snapshots periodically through the recording.
Code Smell for Memory Leak
Code Smell for Memory Leak
- a closure of a function is kept alive
- addListener on object but there is no any invoking removeListener somewhere
- dynamically create objects and bind event on these objects
Recap
Good Rule to Follow
-
Release reference to DOM elements as soon as possible when you no long need it.
-
Avoid circular object references
-
Use appropriate scope
-
Unbind event listeners which is not needed any more
-
When using local cache, we need to remove old created objects.
Reference Docs
JavaScript Memory Management Masterclass
- Slide: https://speakerdeck.com/addyosmani/javascript-memory-management-masterclass
- Source code: https://github.com/addyosmani/memory-mysteries