On 10 Nov, I held a public workshop to share about "Garbage Collection and Memory Leaks in Node.js V8" The agenda was: 1. V8 - about V8 and comparing V8 with alternatives - V8’s compiler pipeline 2. About V8 Garbage Collection: - 2 Collectors: ▶ Major GC (Mark-Compact) & Minor GC (Scavenger) - Hidden class - Inline Cache - Hot function 3. Some Best practices with GC with my real-world experimentation 4. Practising Memory debugging - Profiling frontend app memory with Memlab framework from Facebook - Profiling backend app memory with Chrome Devtools and node-inspector ------------ #javascript #v8 #jsengine #javascriptcore

2. ▶Garbage Collectors and
Memory Leaks 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. A quick glance at V8
▶ Garbage Collectors
and Memory Leaks in
Node.js V8

5. ▶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

6. ▶A Quick glance at V8
V8’s
compiler pipeline
V8’s compiler pipeline
Source: Franziska Hinkelmann, Ph.D. - Understanding V8’s Bytecode

7. ▶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

8. A.Technical Facts
2. About V8 Garbage
Collection
▶ Garbage Collectors
and Memory Leaks in
Node.js V8

9. ▶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}];

10. ▶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.

11. ▶About V8 Garbage Collection
Overview of memory management in v8
https://deepu.tech/memory-management-in-v8/

12. ▶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

13. ▶About V8 Garbage Collection
Garbage Collector: ▶ Major GC (Mark-Compact)
Mark ⇒ Sweep ⇒ Compact(defragmentation)

14. ▶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

15. ▶About V8 Garbage Collection
Minor GC (Scavenger)
v8.dev

16. ▶About V8 Garbage Collection
Minor GC (Scavenger)
v8.dev

17. ▶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

18. ▶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.

19. ▶About V8 Garbage Collection
Hidden Class
var obj = {};
obj.x = 1;
obj.y = 2

20. ▶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)

21. ▶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);

22. ▶Best practises
- Detached dom checking

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 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

25. ▶Profiling FE app memory with Memlab
Demo

26. ▶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);

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 app memory: inspect nodejs
with chrome devtool
Demo

29. ▶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/;

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