Browser Engine Internals

// A JS engine's job:
// 1. Parse your source code into an AST
// 2. Compile it (bytecode → machine code)
// 3. Execute the machine code
// 4. Optimize hot paths (JIT)
// 5. Manage memory (garbage collection)

// The engine is ONE part of the browser:
// Browser = Engine + Rendering + Networking + Storage + ...
//
// V8 Pipeline (Chrome/Node):
// Source → Parser → AST → Ignition (bytecode)
//                         → TurboFan (optimized machine code)
//
// Hot code gets compiled to fast machine code.
// Assumptions wrong? Deoptimize back to bytecode.

// V8's two-tier compilation:
// 
// Tier 1: Ignition (interpreter)
// - Compiles to bytecode quickly
// - Slower execution, but fast startup
// - Collects type feedback (profiling)
//
// Tier 2: TurboFan (optimizing compiler)
// - Compiles hot functions to machine code
// - Much faster execution
// - Uses type feedback for aggressive optimization
// - Can "deoptimize" if assumptions break

// Example of optimization:
function add(a, b) {
  return a + b;
}

// Called 1000x with numbers:
for (let i = 0; i < 1000; i++) add(i, i);
// V8 thinks: "add always gets numbers → optimize for numbers"
// TurboFan generates fast machine code for number addition

// Then:
add("hello", " world"); // string! Assumption broken!
// V8: "deoptimize! Back to bytecode interpreter"
// Has to re-learn the types

// JavaScript objects are dynamic — you can add properties anytime.
// But V8 creates "hidden classes" (Shapes/Maps) for structure.

// Objects with the same shape share a hidden class:
const a = { x: 1, y: 2 };
const b = { x: 5, y: 10 };
// Same hidden class! → fast property access

// Different property order = different hidden class:
const c = { y: 2, x: 1 }; // different class than a!

// Adding properties changes the hidden class:
const point = {};     // Hidden Class 0 (empty)
point.x = 1;         // Hidden Class 1 (has x)
point.y = 2;         // Hidden Class 2 (has x, y)

// ✓ Better: consistent initialization
function Point(x, y) {
  this.x = x;  // always same order
  this.y = y;  // always same properties
}
const p1 = new Point(1, 2); // same hidden class
const p2 = new Point(3, 4); // same hidden class → optimized!

// Inline Caching (IC): remembering where properties are
// 
// First access of obj.x:
//   Engine looks up hidden class, finds x at offset 0
//   Caches: "for this hidden class, x is at offset 0"
//
// Next access of obj.x (same hidden class):
//   Direct memory read at offset 0 — no lookup!
//   Nearly as fast as C struct access

// This breaks if objects have different shapes:
function getX(obj) { return obj.x; }

getX({ x: 1 });           // monomorphic (one shape) → fast
getX({ x: 2, y: 3 });     // polymorphic (two shapes) → slower
getX({ x: 1, a: 2, b: 3 }); // megamorphic (many shapes) → slow

// Lesson: pass objects with consistent shapes to functions