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

Question & Answer

Thank for Your Attention

Made with Slides.com