V8 and WebAssembly: how a modern JavaScript engine buys its speed

// V8's internal object layout (simplified)
class HeapObject {
  Map* map_;           // Hidden Class pointer (4/8 bytes)
  Properties* props_;  // dynamic property backing store
  Elements* elements_; // array element backing store
  // ... inline properties
};

V8 Heap (tens of MB to a few GB)
├── Young Generation (1-32MB)
│   ├── Nursery (Semi-space 1)
│   ├── Intermediate (Semi-space 2)
│   └── Survivor Space
├── Old Generation
│   ├── Old Object Space
│   ├── Code Space (executable code)
│   ├── Map Space (Hidden Classes)
│   └── Large Object Space (objects >256KB)
└── Non-movable Spaces
    ├── Read-only Space
    └── Shared Space (cross-isolate)

// Pretenuring: V8 learns the pattern
function createLargeObject() {
  return new Array(1000000); // after enough calls, allocated directly in Old Space
}

// Write barrier (simplified)
if (is_old_object(obj) && is_young_object(value)) {
  remembered_set.insert(obj_address);
}

// React Fiber node (simplified)
class FiberNode {
  constructor(element) {
    this.type = element.type;
    this.key = element.key;
    this.props = element.props;

    // these references are the whole problem
    this.child = null;      // child fiber
    this.sibling = null;    // sibling fiber
    this.return = null;     // parent fiber
    this.alternate = null;  // previous render's fiber (double buffering)

    // and these survive a long time
    this.memoizedState = null;     // hook state
    this.memoizedProps = null;     // previous props
    this.updateQueue = null;       // update queue
  }
}

// the fiber tree in a real app
const fiberRoot = {
  current: rootFiber,        // current tree (promoted to Old Generation)
  workInProgress: null,      // in-progress tree (Young Generation)
  pendingTime: 0,
  finishedWork: null
};

// the classic leak
function ExpensiveComponent() {
  const [data, setData] = useState([]);

  useEffect(() => {
    // this closure captures the entire component scope
    const timer = setInterval(() => {
      setData(prev => [...prev, generateLargeObject()]);
    }, 1000);

    // forget this return and you've leaked
    return () => clearInterval(timer);
  }, []); // empty deps still allocates the closure

  // a fresh function every render, so more pressure on the Young Generation
  const handleClick = useCallback(() => {
    // captures all of data
    console.log(data.length);
  }, [data]);
}

// a hook pattern V8 has trouble with
function useComplexState() {
  const [state, setState] = useState(() => {
    // runs exactly once, but V8 can't easily know that
    return createExpensiveInitialState();
  });

  // the hook linked list is more work for the collector
  const hook = {
    memoizedState: state,
    queue: updateQueue,
    next: nextHook
  };
}

// how virtual DOM objects get made
function createElement(type, props, ...children) {
  return {
    $$typeof: REACT_ELEMENT_TYPE,
    type,
    key: props?.key || null,
    ref: props?.ref || null,
    props: { ...props, children },
    _owner: currentOwner  // fiber reference
  };
}

// temporaries, one full set per render
function render() {
  // every one of these lands in the Young Generation
  return (
    <div className="container">
      {items.map(item => (
        <Item
          key={item.id}
          data={item}
          onClick={() => handleClick(item.id)}
        />
      ))}
    </div>
  );
  // and most of it is garbage the moment reconciliation ends
}

// plus the work objects reconciliation itself allocates
const updatePayload = {
  type: 'UPDATE',
  fiber: currentFiber,
  partialState: newState,
  callback: commitCallback,
  next: null  // update queue linked list
};

// memory React DevTools costs you in development
if (__DEV__) {
  // debug info hung off every fiber
  fiber._debugSource = element._source;
  fiber._debugOwner = element._owner;
  fiber._debugHookTypes = hookTypes;

  // and profiling timings
  fiber.actualDuration = 0;
  fiber.actualStartTime = 0;
  fiber.selfBaseDuration = 0;
  fiber.treeBaseDuration = 0;
}

// GC-conscious component
class MemoryOptimizedComponent extends React.Component {
  shouldComponentUpdate(nextProps) {
    // fewer renders, fewer virtual DOM objects
    return !shallowEqual(this.props, nextProps);
  }

  componentDidMount() {
    // WeakMap so the cache doesn't pin anything
    this.cache = new WeakMap();
  }

  componentWillUnmount() {
    // explicit cleanup
    this.cache = null;
    this.subscription?.unsubscribe();
  }
}

// automatic batching
function handleMultipleUpdates() {
  // before: each setState triggered its own render
  // now: batched, which means less garbage
  setCount(c => c + 1);
  setFlag(f => !f);
  setItems(i => [...i, newItem]);
}

// Suspense keeps the initial heap smaller
const LazyComponent = React.lazy(() => {
  return import('./HeavyComponent');
});

// useDeferredValue spreads allocation over time
function SearchResults({ query }) {
  const deferredQuery = useDeferredValue(query);

  // non-urgent updates get deferred,
  // which flattens the Young Generation spike
  return <ExpensiveList query={deferredQuery} />;
}

// object pooling, as used in Facebook's list virtualization
const RecyclerListView = {
  viewPool: [],

  getView() {
    return this.viewPool.pop() || this.createView();
  },

  releaseView(view) {
    view.reset();
    this.viewPool.push(view);
  }
};

// Relay's cache, built to stay collectable
class RelayCache {
  constructor() {
    // weak keys, automatic cleanup
    this.records = new WeakMap();

    // TTL so the Old Generation doesn't just grow
    this.ttl = 5 * 60 * 1000; // 5 minutes
  }

  gc() {
    const now = Date.now();
    for (const [key, record] of this.records) {
      if (now - record.fetchTime > this.ttl) {
        this.records.delete(key);
      }
    }
  }
}

// Cheney's algorithm, in pseudocode
void scavenge() {
  scan = next = to_space.bottom;
  // 1. scan the roots
  for (root in roots) {
    *root = copy(*root);
  }
  // 2. breadth-first from there
  while (scan < next) {
    for (slot in slots_in(scan)) {
      *slot = copy(*slot);
    }
    scan += object_size(scan);
  }
}

// tri-color invariant
enum MarkColor {
  WHITE = 0,  // unvisited, collectable
  GREY = 1,   // visited, children not yet processed
  BLACK = 2   // fully visited, live
};

// the barrier that keeps incremental marking honest
void WriteBarrier(HeapObject* obj, Object** slot, Object* value) {
  if (marking_state == INCREMENTAL &&
      IsBlack(obj) && IsWhite(value)) {
    // a black object must never point at a white one
    MarkGrey(value);
    marking_worklist.Push(value);
  }
}

class ParallelMarker {
  std::atomic<Object*> marking_worklist;
  std::atomic<size_t> bytes_marked;

  void MarkInParallel() {
    while (Object* obj = marking_worklist.pop()) {
      MarkObject(obj);
      // when the local queue runs dry, take work from a neighbour
      if (local_worklist.empty()) {
        StealFromOtherThread();
      }
    }
  }
};

// deciding when to run a step
function shouldTriggerIncrementalStep() {
  const allocated = bytesAllocatedSinceLastStep();
  const threshold = heap.size() * 0.01; // 1% of heap
  return allocated > threshold;
}

// roughly 1MB of marking per step
function incrementalMarkingStep() {
  const deadline = performance.now() + 5; // 5ms budget
  while (performance.now() < deadline && !marking_worklist.empty()) {
    markNextObject();
  }
}

class ConcurrentMarker {
  void WriteBarrierSATB(HeapObject* obj, Object** slot, Object* new_value) {
    Object* old_value = *slot;
    if (concurrent_marking_active &&
        IsWhite(old_value) && !IsWhite(new_value)) {
      // preserve the old reference for the snapshot
      satb_buffer.push(old_value);
    }
    *slot = new_value;
  }

  void ConcurrentMarkingTask() {
    // running on a helper thread
    while (!marking_worklist.empty()) {
      Object* obj = marking_worklist.pop();
      // lock-free marking via CAS
      if (TryMarkBlack(obj)) {
        VisitPointers(obj);
      }
    }
  }
};

class ParallelScavenger {
  void Scavenge() {
    // 1. scan roots in parallel
    parallel_for(roots, [](Root* root) {
      EvacuateObject(root->object);
    });

    // 2. work stealing keeps threads busy
    while (has_work() || can_steal_work()) {
      Object* obj = get_next_object();
      CopyToSurvivor(obj);
    }

    // 3. pointer updates go parallel too
    parallel_update_pointers();
  }
};

// what the timeline looks like
[JS running]-->[concurrent marking starts]-->[JS]-->[5ms step]-->[JS]-->[2ms finalize]-->[JS]
      ↑                    ↑                          ↑              ↑
allocation limit    background work           cooperative      minimal pause

// hooked into requestIdleCallback
requestIdleCallback((deadline) => {
  const timeRemaining = deadline.timeRemaining();

  if (timeRemaining > 10) {
    // enough room for a major collection
    triggerMajorGC();
  } else if (timeRemaining > 2) {
    // just enough for a minor one
    triggerMinorGC();
  }
});

class ConcurrentMarkingVisitor {
  void VisitPointers(HeapObject* host, ObjectSlot start, ObjectSlot end) {
    for (ObjectSlot slot = start; slot < end; ++slot) {
      Object* target = *slot;

      // 1. already handled
      if (IsBlackOrGrey(target)) continue;

      // 2. CAS, because other threads are doing the same thing
      if (CompareAndSwapColor(target, WHITE, GREY)) {
        // 3. push onto a lock-free worklist
        marking_worklist_.Push(target);

        // 4. and record the cross-generation reference
        if (host->IsInOldSpace()) {
          remembered_set_.Insert(slot);
        }
      }
    }
  }
};

class WorkStealingQueue {
  bool TrySteal(Object** obj) {
    // 1. local queue first
    if (local_queue_.Pop(obj)) return true;

    // 2. empty? steal from someone else
    for (int i = 0; i < num_threads; i++) {
      if (global_queues_[i].TryStealHalf(&local_queue_)) {
        return local_queue_.Pop(obj);
      }
    }

    // 3. everyone's empty, so we're done
    return false;
  }
};

// the kind of function that gets optimized
function calculateSum(arr) {
  let sum = 0;
  for (let i = 0; i < arr.length; i++) {
    sum += arr[i];  // hot loop, Crankshaft's territory
  }
  return sum;
}

// Full-codegen: compiles fast, runs slow
// -> every function goes straight to native code

// Crankshaft: compiles slow, runs fast
// -> only hot functions get this treatment

// the path a function takes
function Component({ data }) {
  // 1. parse -> AST
  // 2. Ignition lowers it to bytecode
  const result = data.map(item => item * 2);

  // 3. execution counts and type info accumulate (feedback vector)
  // 4. hot enough, and TurboFan takes over
  return result;
}

// roughly what the bytecode looks like
/*
  LdaNamedProperty a0, [0]    // load data
  CallProperty1 [1], a0, a1   // call map
  Return
*/

// how transitions happen
class Point {
  constructor(x, y) {
    this.x = x;  // Hidden Class C0 -> C1
    this.y = y;  // Hidden Class C1 -> C2
  }
}

// monomorphic: one shape, fully optimizable
function getX(point) {
  return point.x;
}

// polymorphic: many shapes, much harder
function getValue(obj) {
  return obj.value;
}

// in a component
function UserProfile({ user }) {
  // consistent props shape means the IC stays hot
  return <div>{user.name}</div>;
}

// and the anti-pattern
function BadComponent({ data }) {
  if (someCondition) {
    data.extraField = 'value';  // shape change, cache blown
  }
  return <div>{data.value}</div>;
}

// the three tiers, side by side
class OptimizationExample {
  // cold: interpreted, and that's fine
  rarely_called() {
    return Math.random();
  }

  // warm: type feedback accumulating
  sometimes_called(x, y) {
    return x + y;
  }

  // hot: TurboFan compiles this
  frequently_called(arr) {
    let sum = 0;
    for (let i = 0; i < arr.length; i++) {
      sum += arr[i];
    }
    return sum;
  }
}

// what gets recorded per call site
let feedback = {
  callCount: 0,
  parameterTypes: [],
  returnTypes: []
};

// render functions are called constantly, so they optimize well
function FrequentlyRendered({ items }) {
  return items.map((item, i) => (
    <Item key={i} data={item} />
  ));
}

// 1. inlining
// removes call overhead, typically 10-30%
function add(a, b) { return a + b; }
function calculate(x, y) {
  return add(x, y) * 2;
  // after inlining: return (x + y) * 2;
  // and now further optimizations become visible
}

// 2. escape analysis
// an object that never leaves the function never needs the heap
function createPoint() {
  const point = { x: 10, y: 20 };  // would normally be heap-allocated
  return point.x + point.y;        // but it never escapes
  // after optimization: return 30;
  // no allocation, nothing for the collector to do
}

// 3. loop optimizations
function processArray(arr) {
  // unrolling: fewer iterations, fewer branch mispredictions
  for (let i = 0; i < arr.length; i += 4) {
    arr[i] = arr[i] * 2;
    arr[i+1] = arr[i+1] * 2;
    arr[i+2] = arr[i+2] * 2;
    arr[i+3] = arr[i+3] * 2;
  }
  // up to 4x on the right workload, thanks to pipeline utilization
}

// 4. and how React benefits
const MemoizedComponent = React.memo(({ data }) => {
  // the props comparison itself gets optimized
  return <ExpensiveRender data={data} />;
});

// crude but effective
function profileFunction() {
  // 1. first run: interpreted
  console.time('cold');
  calculateSum([1,2,3,4,5]);
  console.timeEnd('cold');

  // 2. warm it up
  for (let i = 0; i < 1000; i++) {
    calculateSum([1,2,3,4,5]);
  }

  // 3. now it's compiled
  console.time('hot');
  calculateSum([1,2,3,4,5]);
  console.timeEnd('hot');  // noticeably faster
}

// or watch the decisions directly
// node --trace-opt --trace-deopt script.js

// compiler-friendly by construction
function OptimizedComponent() {
  // 1. stable types
  const [count, setCount] = useState(0);  // always a number

  // 2. predictable structure
  const content = useMemo(() => {
    return count > 10 ? <Heavy /> : <Light />;
  }, [count]);

  // 3. stable function identity
  const handleClick = useCallback((e) => {
    // same reference every render, so the IC stays monomorphic
    setCount(c => c + 1);
  }, []);

  return <div onClick={handleClick}>{content}</div>;
}

// React Compiler (experimental) pushes this further,
// doing at build time what would otherwise be runtime work

// anti-pattern 1: churning the Hidden Class
function bad() {
  const obj = {};
  obj.a = 1;      // HC1
  obj.b = 2;      // HC2
  delete obj.a;   // HC3, and now you're deoptimized
}

// fix: declare the shape up front
function good() {
  const obj = { a: 1, b: 2 };
  if (needToRemove) {
    obj.a = undefined;  // undefined instead of delete
  }
}

// anti-pattern 2: too many shapes at one call site
function processItems(items) {
  items.forEach(item => {
    // item is a different shape every time, so nothing to cache
    console.log(item.value);
  });
}

// fix: one shape
interface Item {
  value: number;
  type: string;
}
function processTypedItems(items: Item[]) {
  items.forEach(item => console.log(item.value));
}

// a pool, minus the details
class ObjectPool {
  constructor(createFn, maxSize = 100) {
    this.createFn = createFn;
    this.pool = Array(maxSize).fill(null).map(createFn);
  }

  acquire() {
    return this.pool.pop() || this.createFn();
  }

  release(obj) {
    this.pool.push(obj);
  }
}

// bullets in a game, for instance
const bulletPool = new ObjectPool(
  () => ({ x: 0, y: 0, active: false }),
  1000
);

// the difference, concretely
const particles = [];
for (let i = 0; i < 10000; i++) {
  // without pooling: a new object every iteration
  particles.push({ x: Math.random() * 800, y: 600 });

  // with pooling: reuse
  // const p = pool.acquire();
  // p.x = Math.random() * 800;
}

// how fragmentation gets made
class FragmentationExample {
  constructor() {
    this.data = [];

    // mix large and small objects, free some of each,
    // and the free space ends up scattered
  }
}

// what you can do about it from the outside
const optimized = {
  smallObjects: [],     // group by size
  largeObjects: [],
  buffer: new ArrayBuffer(1024 * 1024), // or take contiguous memory yourself
};

// pointer compression (Chrome 80+)
// before: 8 bytes per reference (64-bit)
// after:  4 bytes per reference (32-bit offset)

const obj = {
  ref1: {},  // 8 bytes -> 4 bytes
  ref2: {},
  ref3: {}
};

const EVENT_TYPES = {
  CLICK: 'click',
  HOVER: 'hover'
};

// used 10,000 times, stored once
events.push({ type: EVENT_TYPES.CLICK });

// WeakMap: cleans itself up
const cache = new WeakMap();

elements.forEach(el => {
  cache.set(el, { data: 'metadata' });
  // remove el from the document and the cache entry goes with it
});

// Map: your responsibility, and a leak if you forget
const map = new Map();

// tiered compilation, from the outside
async function loadWasm() {
  const response = await fetch('module.wasm');
  // streaming: compile while it downloads
  const module = await WebAssembly.compileStreaming(response);

  // Liftoff: ~10ms/MB (baseline, fast)
  // TurboFan: ~100ms/function (optimized, background)

  return WebAssembly.instantiate(module, imports);
}

// conceptually
const funcStats = {
  add: { calls: 0, optimized: false },
  matrixMultiply: { calls: 0, optimized: false }
};

// past the threshold, recompile
if (funcStats.matrixMultiply.calls++ > 1000) {
  // Liftoff -> TurboFan
}

// and from React's side, it's just a module
const wasm = await WebAssembly.instantiateStreaming(
  fetch('module.wasm')
);
wasm.instance.exports.processImage(data);

// linear memory: still how most WASM works today
const memory = new WebAssembly.Memory({
  initial: 256,   // 16MB
  maximum: 32768  // 2GB
});

// moving data across the boundary
const view = new Uint8Array(memory.buffer, ptr, size);
view.set(data);  // JS -> WASM

// WasmGC (Chrome 119+): managed objects instead
// (type $point (struct (field $x f64) (field $y f64)))
// same collector as JavaScript

// scalar JavaScript: one at a time
for (let i = 0; i < arr.length; i++) {
  result[i] = a[i] + b[i];
}

// WASM SIMD: four at a time
// (f32x4.add (v128.load a) (v128.load b))

// measured: JS ~450ms -> WASM ~50ms -> SIMD ~15ms

// caching compiled modules
async function loadWithCache(url) {
  // 1. check the cache
  let module = await cache.get(url);

  if (!module) {
    // 2. compile and store
    module = await WebAssembly.compileStreaming(
      fetch(url)
    );
    await cache.store(url, module);
  }

  return module;  // no recompilation
}

// matrix multiply, 512x512
// JavaScript:     ~450ms
// WebAssembly:    ~50ms  (9x)
// WASM + SIMD:    ~15ms  (30x)

// image filtering from React
const applyFilter = async (imageData) => {
  // JS filter:   ~50ms
  // WASM filter: ~5ms
  return wasmFilters[filterType](imageData);
};

class IncrementalRenderer {
  constructor() {
    this.pendingUpdates = new WeakMap();
    this.updateQueue = [];
  }

  scheduleUpdate(element, patch) {
    // WeakMap so a detached element doesn't stay pinned
    this.pendingUpdates.set(element, patch);

    // spend idle time, not frame time
    requestIdleCallback(() => {
      this.processBatch();
    }, { timeout: 16 }); // one frame
  }

  processBatch() {
    const batchSize = 100;
    for (let i = 0; i < batchSize && this.updateQueue.length; i++) {
      const update = this.updateQueue.shift();
      update.apply();
    }
  }
}

class MessagePool {
  constructor(size = 1000) {
    this.pool = [];
    this.activeMessages = new Set();

    // preallocate
    for (let i = 0; i < size; i++) {
      this.pool.push(new Message());
    }
  }

  acquire() {
    let msg = this.pool.pop();
    if (!msg) {
      // ran dry, so grow, but say so
      console.warn('Pool expansion triggered');
      msg = new Message();
    }
    this.activeMessages.add(msg);
    return msg.reset();
  }

  release(msg) {
    if (this.activeMessages.delete(msg)) {
      this.pool.push(msg);
    }
  }
}

// GC events via the Performance API
class V8Profiler {
  static measureGC() {
    const obs = new PerformanceObserver((list) => {
      for (const entry of list.getEntries()) {
        if (entry.entryType === 'measure' &&
            entry.detail?.kind === 'gc') {
          console.log(`GC Type: ${entry.detail.type}`);
          console.log(`Duration: ${entry.duration}ms`);
          console.log(`Heap Before: ${entry.detail.usedHeapSizeBefore}`);
          console.log(`Heap After: ${entry.detail.usedHeapSizeAfter}`);
        }
      }
    });

    obs.observe({ entryTypes: ['measure'] });
  }

  static getHeapSnapshot() {
    if (typeof gc !== 'undefined') {
      gc(); // requires --expose-gc
    }

    return performance.measureUserAgentSpecificMemory();
  }
}

Environment: 8GB RAM, 4-core CPU
Apps: Gmail, Google Docs, YouTube

Results:
- V8 Heap: 1.2GB -> 684MB (43% less)
- Renderer Memory: 2.1GB -> 1.68GB (20% less)
- Major GC Time: 45ms -> 38.7ms (14% less)
- FID p95: 24ms -> 19ms

Benchmark: Speedometer 2.0

Legacy (2015):
- Score: 45 ± 3
- GC Pause p50: 23ms
- GC Pause p99: 112ms
- Total GC Time: 3.2s

Orinoco (2019):
- Score: 78 ± 2 (73% better)
- GC Pause p50: 2.1ms (91% lower)
- GC Pause p99: 14ms (87% lower)
- Total GC Time: 0.9s (72% lower)

const optimizationChecklist = {
  // 1. Hidden Classes
  avoidDynamicProperties: true,
  useConstructorsConsistently: true,

  // 2. inline caches
  avoidPolymorphicCalls: true,
  limitFunctionTypes: 4,

  // 3. memory
  useObjectPools: true,
  limitClosureScopes: true,
  preferTypedArrays: true,

  // 4. fewer collections
  batchDOMUpdates: true,
  useWeakReferences: true,
  clearLargeObjects: true
};