JavaScript V8 Engine Internals: Complete Guide

// This simple function goes through the entire V8 pipeline
function add(a, b) {
  return a + b;
}
 
// Stage 1: Parser reads source text, builds AST
//   - Lazy parsing: only parses function signatures initially
//   - Eager parsing: fully parses when function is first called
//
// Stage 2: Ignition compiles AST to bytecode
//   Bytecode for add(a, b):
//     Ldar a1        // Load argument 'b' into accumulator
//     Add a0, [0]    // Add argument 'a' to accumulator
//     Return         // Return accumulator value
//
// Stage 3: TurboFan optimizes if called frequently
//   - Collects type feedback from Ignition
//   - Generates optimized machine code for specific types
//   - Deoptimizes if type assumptions are violated
 
// Calling with consistent types helps V8 optimize
for (let i = 0; i < 100000; i++) {
  add(i, i + 1); // Always number + number: TurboFan will optimize
}
 
// Calling with mixed types forces deoptimization
add("hello", " world"); // String concatenation: breaks number assumption

// V8 uses two parsing strategies to minimize startup cost
 
// 1. PRE-PARSING (Lazy parsing)
// V8 scans function bodies without building a full AST
// Only validates syntax and finds scope boundaries
function rarelyUsed() {
  // This function body is pre-parsed initially
  // V8 just checks syntax is valid, finds variable declarations
  // Full AST is built only when this function is actually called
  const result = complexComputation();
  return transform(result);
}
 
// 2. EAGER PARSING
// V8 immediately builds full AST for:
// - Top-level code
// - IIFEs (Immediately Invoked Function Expressions)
// - Functions called during startup
 
// This IIFE is eagerly parsed because V8 detects the invocation
const module = (function () {
  // Full AST built immediately
  const cache = new Map();
 
  return {
    get(key) { return cache.get(key); },
    set(key, value) { cache.set(key, value); },
  };
})();
 
// PERFORMANCE IMPACT: Avoid wrapping startup code in functions
// that V8 will lazily parse and then need to re-parse
 
// BAD: Forces re-parsing when init() is called
function init() {
  setupEventListeners();
  loadInitialData();
  renderApp();
}
init();
 
// BETTER: Top-level code is eagerly parsed
setupEventListeners();
loadInitialData();
renderApp();

// V8 assigns a "hidden class" (also called Map or Shape) to every object
// Objects with the same property names added in the same order share a shape
 
// GOOD: Consistent shape - all points share one hidden class
function createPoint(x, y) {
  const point = {};
  point.x = x; // Hidden class transition: {} -> {x}
  point.y = y; // Hidden class transition: {x} -> {x, y}
  return point;
}
 
const p1 = createPoint(1, 2); // Shape: {x, y}
const p2 = createPoint(3, 4); // Shape: {x, y} - SAME shape as p1
 
// BAD: Different property order creates different shapes
const p3 = { y: 2, x: 1 }; // Shape: {y, x} - DIFFERENT from p1
 
// BAD: Adding properties conditionally creates shape branches
function createUser(name, age, email) {
  const user = { name };
  if (age) user.age = age;     // Branch: some objects have age, some don't
  if (email) user.email = email; // Another branch
  return user;
}
// This creates up to 4 different shapes:
//   {name}, {name, age}, {name, email}, {name, age, email}
 
// GOOD: Always define all properties - even if undefined
function createUserOptimized(name, age, email) {
  return {
    name: name,
    age: age || null,       // Always present
    email: email || null,   // Always present
  };
}
// All objects share one shape: {name, age, email}
 
// VERY BAD: delete keyword destroys hidden class optimization
const obj = { a: 1, b: 2, c: 3 };
delete obj.b; // V8 falls back to slow "dictionary mode"
 
// BETTER: Set to undefined instead of deleting
obj.b = undefined; // Shape is preserved

// V8 uses inline caches (ICs) to speed up property access
// After the first access, V8 caches the location of properties
 
// MONOMORPHIC IC (fastest): always same shape
function getX(point) {
  return point.x; // After first call, V8 caches the offset of 'x'
}
 
// All these calls hit the same IC cache (same shape)
getX({ x: 1, y: 2 }); // Monomorphic: learns shape {x, y}
getX({ x: 3, y: 4 }); // Cache hit: same shape
getX({ x: 5, y: 6 }); // Cache hit: same shape
 
// POLYMORPHIC IC (slower): 2-4 different shapes
function getName(obj) {
  return obj.name;
}
 
getName({ name: "Alice", age: 30 });    // Shape 1: {name, age}
getName({ name: "Bob", role: "admin" }); // Shape 2: {name, role}
// IC is now polymorphic: checks two shapes
 
// MEGAMORPHIC IC (slowest): 5+ shapes - V8 gives up caching
function getValue(obj) {
  return obj.value;
}
 
// Each call with a different shape degrades the IC
getValue({ value: 1 });
getValue({ value: 2, extra: true });
getValue({ value: 3, a: 1, b: 2 });
getValue({ value: 4, x: 0 });
getValue({ value: 5, type: "test" });
// IC is now megamorphic: uses generic (slow) property lookup
 
// OPTIMIZATION: Keep object shapes consistent
class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
}
 
// All instances of Point share the same shape
const points = [];
for (let i = 0; i < 1000; i++) {
  points.push(new Point(i, i * 2)); // Same shape every time
}
 
// This function stays monomorphic
function distance(p) {
  return Math.sqrt(p.x * p.x + p.y * p.y); // Fast: monomorphic IC
}
 
points.forEach(distance); // Always same shape = always fast

// V8 uses a generational garbage collector
// Young generation (Scavenger) + Old generation (Mark-Sweep-Compact)
 
// YOUNG GENERATION: Short-lived objects allocated here
// Collected frequently using Scavenger (semi-space copying)
function processData(items) {
  // Temporary objects go to young generation
  const temp = items.map((item) => ({
    id: item.id,
    processed: transform(item.value),
  }));
 
  // After this function returns, 'temp' becomes garbage
  // Scavenger collects it efficiently (< 1ms usually)
  return temp.filter((t) => t.processed !== null);
}
 
// OLD GENERATION: Objects that survive two Scavenger cycles
// Collected less frequently using Mark-Sweep-Compact
 
// Objects that live long get promoted to old generation
const cache = new Map(); // Long-lived: promoted to old generation
 
function cacheResult(key, value) {
  cache.set(key, value); // Values stored here survive multiple GC cycles
}
 
// MEMORY LEAK PATTERNS V8 CANNOT COLLECT
 
// 1. Accidental global references
function leakyFunction() {
  // Missing 'const/let' creates global variable
  leakedArray = new Array(1000000); // Stays in memory forever
}
 
// 2. Forgotten event listeners
function setupHandler() {
  const largeData = new Array(1000000).fill("data");
 
  document.addEventListener("click", function handler() {
    // This closure captures 'largeData' - it cannot be collected
    // even if the handler is never called
    console.log(largeData.length);
  });
  // Fix: Remove listener when done, or use WeakRef
}
 
// 3. Closures holding references
function createProcessor() {
  const hugeBuffer = new ArrayBuffer(100 * 1024 * 1024); // 100MB
 
  return {
    // This method doesn't use hugeBuffer, but the closure
    // still holds a reference to it
    process(data) {
      return data.map((x) => x * 2);
    },
  };
  // Fix: Set hugeBuffer = null after use, or restructure
}
 
// USING WeakRef AND FinalizationRegistry (ES2021)
const registry = new FinalizationRegistry((heldValue) => {
  console.log(`Object with key "${heldValue}" was garbage collected`);
});
 
function managedCache() {
  const cache = new Map();
 
  return {
    set(key, value) {
      const ref = new WeakRef(value);
      cache.set(key, ref);
      registry.register(value, key);
    },
    get(key) {
      const ref = cache.get(key);
      if (!ref) return undefined;
      const value = ref.deref();
      if (!value) {
        cache.delete(key); // Object was collected
        return undefined;
      }
      return value;
    },
  };
}

// V8 optimizes code based on runtime type feedback
// These patterns help V8 produce faster machine code
 
// 1. MONOMORPHIC FUNCTIONS: Same types every call
// GOOD
function square(n) {
  return n * n;
}
 
for (let i = 0; i < 100000; i++) {
  square(i); // Always numbers: TurboFan generates optimized multiplication
}
 
// BAD: Mixing types prevents stable optimization
square(42);
square("hello"); // Deoptimization: string * string behavior differs
 
// 2. AVOID ARGUMENTS OBJECT: Use rest parameters
// BAD: 'arguments' prevents many optimizations
function sumBad() {
  let total = 0;
  for (let i = 0; i < arguments.length; i++) {
    total += arguments[i];
  }
  return total;
}
 
// GOOD: Rest parameters are optimizable
function sumGood(...numbers) {
  let total = 0;
  for (let i = 0; i < numbers.length; i++) {
    total += numbers[i];
  }
  return total;
}
 
// 3. USE TYPED ARRAYS FOR NUMERIC COMPUTATION
// BAD: Regular arrays use tagged pointers (boxing overhead)
const regularArray = new Array(10000);
for (let i = 0; i < 10000; i++) {
  regularArray[i] = Math.random();
}
 
// GOOD: Float64Array stores raw doubles (no boxing)
const typedArray = new Float64Array(10000);
for (let i = 0; i < 10000; i++) {
  typedArray[i] = Math.random();
}
 
// 4. AVOID HOLES IN ARRAYS
// BAD: Sparse arrays switch to dictionary/slow mode
const sparse = [1, 2, , 4, , 6]; // Holes force slow element access
 
// GOOD: Dense arrays use fast backing store
const dense = [1, 2, 0, 4, 0, 6]; // Use 0 instead of holes
 
// BAD: Array constructor with large size creates holey array
const holey = new Array(10000);
 
// GOOD: Fill immediately for packed array
const packed = new Array(10000).fill(0);
 
// 5. KEEP try-catch BOUNDARIES NARROW
// BAD: Large try block prevents optimization of inner code (older V8)
try {
  // Hundreds of lines of code
  // V8 cannot optimize the entire block well
} catch (e) {
  handleError(e);
}
 
// GOOD: Isolate the throwing operation
function riskyOperation() {
  try {
    return JSON.parse(input);
  } catch (e) {
    return null;
  }
}
 
// The calling code is fully optimizable
const data = riskyOperation();
if (data) processData(data);