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