▶Garbage Collectors and
Memory Leaks in Node.js V8
Thien Ly - Engineer at Tiki
Tiki Tini App Workshop
Nov 10, 2022
▶ Main Checkpoints
A. 🔥Technical Facts
1. A quick glance at V8
● About V8
● V8’s compiler pipeline
1. About V8 Garbage Collection
● Garbage Collector: ▶ Major GC (Mark-
Compact)
● Garbage Collector: ▶ Minor GC (Scavenger)
● Hidden class
● Inline Cache
● Hot function
1. Best practices with GC
B. 🛡️Practising Memory debugging
1) Profiling frontend app memory with Memlab
framework from Facebook
2) Profiling backend app memory: inspect node
app with Chrome Devtools
A.Technical Facts
1. A quick glance at V8
▶ Garbage Collectors
and Memory Leaks in
Node.js V8
▶A Quick glance at V8
About V8
- “V8 is Google's open source high-performance JavaScript and WebAssembly engine, written in C++.
It is used in Chrome and in Node.js, among others.” (v8.dev)
- Initial release date: Sep 2, 2008
- V8 alternatives:
- SpiderMonkey
- JavaScriptCore(JSC)
- Chakra
- JerryScript
▶A Quick glance at V8
V8’s
compiler pipeline
V8’s compiler pipeline
Source: Franziska Hinkelmann, Ph.D. - Understanding V8’s Bytecode
▶A Quick glance at V8
V8’s compiler pipeline
– Other Resources:
Dig into old versions of V8 compiler pipeline and the Ignition: V8: Hooking up the Ignition to the
Turbofan by Leszek Swirski & Ross McIlroy
A.Technical Facts
2. About V8 Garbage
Collection
▶ Garbage Collectors
and Memory Leaks in
Node.js V8
▶About V8 Garbage Collection
About V8 Garbage Collection
- Stack vs Heap mem
const a1 = 12;
let b1 = a1;
b1 += 1;
const s1 = 'string herer';
const array1 =
[{value:a1},{value:b1}];
▶About V8 Garbage Collection
Stack vs heap mem
- Stack: fixed size; stores static data, includes primitive values like strings, numbers,
boolean, null, and undefined. References that point to objects and functions.
- Heap: stores objects and functions in JavaScript.
“Objects” in this context mean objects in JavaScript, functions, and scopes
> In V8, they divides the heap memory space into 2 regions: young generation and old
generation.
▶About V8 Garbage Collection
Overview of memory management in v8
https://deepu.tech/memory-management-in-v8/
▶About V8 Garbage Collection
Major GC (Full Mark-Compact)
— “The major GC collects garbage from the entire heap.
Marking →Sweeping → Compaction(defragmentation);
- Super slow;
- “Stop the world”;
v8.dev
▶About V8 Garbage Collection
Garbage Collector: ▶ Major GC (Mark-Compact)
Mark ⇒ Sweep ⇒ Compact(defragmentation)
▶About V8 Garbage Collection
Major GC (Full Mark-Compact)
— “The major GC collects garbage from the entire heap.
Marking →Sweeping → Compaction(defragmentation);
- Super slow;
- “Stop the world”;
v8.dev
▶About V8 Garbage Collection
Minor GC (Scavenger)
v8.dev
▶About V8 Garbage Collection
Minor GC (Scavenger)
v8.dev
▶About V8 Garbage Collection
Minor GC (Full Mark-Compact)
- Move mem that is using in heap from A to B
- Compact: re-arrange(just like defrag a hdd)
- Swap A and B, delete the old A ( I mean B now )
- If obj is moved twice, move it to Old generation space for Major GC handle later
v8.dev
▶About V8 Garbage Collection
Hidden Class
- Once object created, V8 also creates a Hidden class to track its props
- Every object shape changes(add/delete object’s properties) create one hidden class
- Support V8 Tracking and Inline Caching
- Objects with the same shape share the same HC
const a1 = {a:2};
const a2 = {a:99};
// a2 and a1 are using the same hidden class
because of their shape.
▶About V8 Garbage Collection
Hidden Class
var obj = {};
obj.x = 1;
obj.y = 2
▶About V8 Garbage Collection
Inline Caching (IC)
- Optimization technique
- Rely on the observation that repeated calls to same function tends
to occur on same type of objects.
- Types:
- Monomorphic (optimized)
- Polymorphic (slightly optimized)
- Megamorphic (unoptimized) // (lv 5 for default, –
max_inlining_levels flag)
▶Best practises and notes
- Limit global variable
- Using short-live object
- Always give name to closures and function -> easy to debug
- Avoid Closures variables:
- Avoid Timer
- Using the dispose pattern, like vscode
- Avoid polymorphism for IC in hot func
// Avoid Closures variables
function clickHandleFactory(){
const eventStore = []; // this never be
collected by gc
return function (event) {
eventStore.push(event);
}
}
const clickHandle = function clickHandleFactory();
button.addEventListener('click',clickHandle);
▶Best practises
- Detached dom checking
B. Practising Memory
debugging
1. Profiling frontend app
memory with Memlab
framework from Facebook
▶ Garbage Collectors
and Memory Leaks in
Node.js V8
▶Profiling FE app memory with Memlab
About Memlab
- Open source by facebook
- Memory testing framework for js
- Under the hood: puppeteer > chrome devtool protocol
Prepare:
- Install memlab with node 16: npm install -g memlab
- Start your own web app
▶Profiling FE app memory with Memlab
Demo
▶Profiling FE app memory with Memlab
Supports Jest testing in Node
Example import type {IHeapSnapshot} from '@memlab/core';
import {config, takeNodeMinimalHeap, tagObject} from '@memlab/core';
function unitToTest(obj){
// example app unit logic
obj.o2 = null;
}
test('should release targeted object', async () => {
config.muteConsole = true;
const owner = {o1:{},o2:{}};
tagObject(owner.o1, 'flag-1');
tagObject(owner.o2, 'flag-2');
unitToTest(owner);
const heap: IHeapSnapshot = await takeNodeMinimalHeap();
expect(heap.hasObjectWithTag('flag-1')).toBe(true);
expect(heap.hasObjectWithTag('flag-2')).toBe(false);
}, 30000);
B. Practising Memory
debugging
2. Profiling BE app memory:
inspect nodejs with chrome
devtool
▶ Garbage Collectors
and Memory Leaks in
Node.js V8
▶Profiling BE app memory: inspect nodejs
with chrome devtool
Demo
▶References and further reads
- Understanding V8's Bytecode - Franziska Hinkelmann, Ph.D., 2017 -
https://www.fhinkel.rocks/posts/Understanding-V8-s-Bytecode;
- Launching Ignition and TurboFan, 2017 - https://v8.dev/blog/launching-ignition-
and-turbofan;
- Trash talk: the Orinoco garbage collector, 2019 - https://v8.dev/blog/trash-talk;
- Leszek Swirski & Ross McIlroy, 2017 - Hooking up the Ignition to the Turbofan by
Leszek Swirski & Ross McIlroy;
- Deepu K Sasidharan - Visualizing memory management in V8 Engine (JavaScript,
NodeJS, Deno, WebAssembly), 2018 - https://deepu.tech/memory-
management-in-v8/;
❯ (Q && A) || SIGTERM
Send your questions via Tiki Developer
Community:
- https://community.tiki.vn/t/building-a-
super-app-workshop-sharing-
garbage-collectors-and-memory-
leaks-in-nodejs-v8/8548
❯ echo 'Gracias ♡ ~' | lolcat

Garbage collectors and Memory Leaks in Nodejs - V8

  • 2.
    ▶Garbage Collectors and MemoryLeaks in Node.js V8 Thien Ly - Engineer at Tiki Tiki Tini App Workshop Nov 10, 2022
  • 3.
    ▶ Main Checkpoints A.🔥Technical Facts 1. A quick glance at V8 ● About V8 ● V8’s compiler pipeline 1. About V8 Garbage Collection ● Garbage Collector: ▶ Major GC (Mark- Compact) ● Garbage Collector: ▶ Minor GC (Scavenger) ● Hidden class ● Inline Cache ● Hot function 1. Best practices with GC B. 🛡️Practising Memory debugging 1) Profiling frontend app memory with Memlab framework from Facebook 2) Profiling backend app memory: inspect node app with Chrome Devtools
  • 4.
    A.Technical Facts 1. Aquick glance at V8 ▶ Garbage Collectors and Memory Leaks in Node.js V8
  • 5.
    ▶A Quick glanceat V8 About V8 - “V8 is Google's open source high-performance JavaScript and WebAssembly engine, written in C++. It is used in Chrome and in Node.js, among others.” (v8.dev) - Initial release date: Sep 2, 2008 - V8 alternatives: - SpiderMonkey - JavaScriptCore(JSC) - Chakra - JerryScript
  • 6.
    ▶A Quick glanceat V8 V8’s compiler pipeline V8’s compiler pipeline Source: Franziska Hinkelmann, Ph.D. - Understanding V8’s Bytecode
  • 7.
    ▶A Quick glanceat V8 V8’s compiler pipeline – Other Resources: Dig into old versions of V8 compiler pipeline and the Ignition: V8: Hooking up the Ignition to the Turbofan by Leszek Swirski & Ross McIlroy
  • 8.
    A.Technical Facts 2. AboutV8 Garbage Collection ▶ Garbage Collectors and Memory Leaks in Node.js V8
  • 9.
    ▶About V8 GarbageCollection About V8 Garbage Collection - Stack vs Heap mem const a1 = 12; let b1 = a1; b1 += 1; const s1 = 'string herer'; const array1 = [{value:a1},{value:b1}];
  • 10.
    ▶About V8 GarbageCollection Stack vs heap mem - Stack: fixed size; stores static data, includes primitive values like strings, numbers, boolean, null, and undefined. References that point to objects and functions. - Heap: stores objects and functions in JavaScript. “Objects” in this context mean objects in JavaScript, functions, and scopes > In V8, they divides the heap memory space into 2 regions: young generation and old generation.
  • 11.
    ▶About V8 GarbageCollection Overview of memory management in v8 https://deepu.tech/memory-management-in-v8/
  • 12.
    ▶About V8 GarbageCollection Major GC (Full Mark-Compact) — “The major GC collects garbage from the entire heap. Marking →Sweeping → Compaction(defragmentation); - Super slow; - “Stop the world”; v8.dev
  • 13.
    ▶About V8 GarbageCollection Garbage Collector: ▶ Major GC (Mark-Compact) Mark ⇒ Sweep ⇒ Compact(defragmentation)
  • 14.
    ▶About V8 GarbageCollection Major GC (Full Mark-Compact) — “The major GC collects garbage from the entire heap. Marking →Sweeping → Compaction(defragmentation); - Super slow; - “Stop the world”; v8.dev
  • 15.
    ▶About V8 GarbageCollection Minor GC (Scavenger) v8.dev
  • 16.
    ▶About V8 GarbageCollection Minor GC (Scavenger) v8.dev
  • 17.
    ▶About V8 GarbageCollection Minor GC (Full Mark-Compact) - Move mem that is using in heap from A to B - Compact: re-arrange(just like defrag a hdd) - Swap A and B, delete the old A ( I mean B now ) - If obj is moved twice, move it to Old generation space for Major GC handle later v8.dev
  • 18.
    ▶About V8 GarbageCollection Hidden Class - Once object created, V8 also creates a Hidden class to track its props - Every object shape changes(add/delete object’s properties) create one hidden class - Support V8 Tracking and Inline Caching - Objects with the same shape share the same HC const a1 = {a:2}; const a2 = {a:99}; // a2 and a1 are using the same hidden class because of their shape.
  • 19.
    ▶About V8 GarbageCollection Hidden Class var obj = {}; obj.x = 1; obj.y = 2
  • 20.
    ▶About V8 GarbageCollection Inline Caching (IC) - Optimization technique - Rely on the observation that repeated calls to same function tends to occur on same type of objects. - Types: - Monomorphic (optimized) - Polymorphic (slightly optimized) - Megamorphic (unoptimized) // (lv 5 for default, – max_inlining_levels flag)
  • 21.
    ▶Best practises andnotes - Limit global variable - Using short-live object - Always give name to closures and function -> easy to debug - Avoid Closures variables: - Avoid Timer - Using the dispose pattern, like vscode - Avoid polymorphism for IC in hot func // Avoid Closures variables function clickHandleFactory(){ const eventStore = []; // this never be collected by gc return function (event) { eventStore.push(event); } } const clickHandle = function clickHandleFactory(); button.addEventListener('click',clickHandle);
  • 22.
  • 23.
    B. Practising Memory debugging 1.Profiling frontend app memory with Memlab framework from Facebook ▶ Garbage Collectors and Memory Leaks in Node.js V8
  • 24.
    ▶Profiling FE appmemory with Memlab About Memlab - Open source by facebook - Memory testing framework for js - Under the hood: puppeteer > chrome devtool protocol Prepare: - Install memlab with node 16: npm install -g memlab - Start your own web app
  • 25.
    ▶Profiling FE appmemory with Memlab Demo
  • 26.
    ▶Profiling FE appmemory with Memlab Supports Jest testing in Node Example import type {IHeapSnapshot} from '@memlab/core'; import {config, takeNodeMinimalHeap, tagObject} from '@memlab/core'; function unitToTest(obj){ // example app unit logic obj.o2 = null; } test('should release targeted object', async () => { config.muteConsole = true; const owner = {o1:{},o2:{}}; tagObject(owner.o1, 'flag-1'); tagObject(owner.o2, 'flag-2'); unitToTest(owner); const heap: IHeapSnapshot = await takeNodeMinimalHeap(); expect(heap.hasObjectWithTag('flag-1')).toBe(true); expect(heap.hasObjectWithTag('flag-2')).toBe(false); }, 30000);
  • 27.
    B. Practising Memory debugging 2.Profiling BE app memory: inspect nodejs with chrome devtool ▶ Garbage Collectors and Memory Leaks in Node.js V8
  • 28.
    ▶Profiling BE appmemory: inspect nodejs with chrome devtool Demo
  • 29.
    ▶References and furtherreads - Understanding V8's Bytecode - Franziska Hinkelmann, Ph.D., 2017 - https://www.fhinkel.rocks/posts/Understanding-V8-s-Bytecode; - Launching Ignition and TurboFan, 2017 - https://v8.dev/blog/launching-ignition- and-turbofan; - Trash talk: the Orinoco garbage collector, 2019 - https://v8.dev/blog/trash-talk; - Leszek Swirski & Ross McIlroy, 2017 - Hooking up the Ignition to the Turbofan by Leszek Swirski & Ross McIlroy; - Deepu K Sasidharan - Visualizing memory management in V8 Engine (JavaScript, NodeJS, Deno, WebAssembly), 2018 - https://deepu.tech/memory- management-in-v8/;
  • 30.
    ❯ (Q &&A) || SIGTERM Send your questions via Tiki Developer Community: - https://community.tiki.vn/t/building-a- super-app-workshop-sharing- garbage-collectors-and-memory- leaks-in-nodejs-v8/8548 ❯ echo 'Gracias ♡ ~' | lolcat

Editor's Notes