Master every layer from bare metal to production React. Build browsers, engines, and frameworks from scratch.
- CPU pipelines: fetch, decode, execute, writeback
- Register allocation and instruction scheduling
- Branch prediction and pipeline stalls
- Cache hierarchy: L1/L2/L3, cache lines, false sharing
- Memory addressing: virtual memory, MMU, TLB
- Stack vs heap allocation strategies
- Assembly language basics (x86-64)
- System calls and kernel interaction
- How C/C++ compiles to machine code
- Memory layout: text, data, BSS, stack, heap
- Pointer arithmetic and memory alignment
Write assembly that allocates memory and executes basic operations. Trace CPU pipeline execution for JS code using performance counters.
- Raw sockets: IP packets, TCP segments, UDP datagrams
- Three-way handshake implementation
- Sliding window protocol and flow control
- Congestion control algorithms (TCP Reno, Cubic)
- Packet fragmentation and reassembly
- HTTP/1.1 parser: chunked encoding, headers, keep-alive
- HTTP/2: binary framing, multiplexing, HPACK compression
- TLS handshake: cipher suites, certificate verification, key exchange
- WebSocket upgrade and frame masking
- tcpdump and Wireshark packet analysis
- strace for system call tracing
- Network simulation: latency, jitter, packet loss
HTTP/1.1 and HTTP/2 server in C or Rust. Profile every syscall and packet. Build WebSocket chat with custom protocol.
- Tokenization state machine (13 states, 67 transitions)
- Tree construction algorithm
- Error recovery and quirks mode
- Parser-blocking scripts and async/defer
- Tokenizer and parser (grammar implementation)
- Selector matching with specificity calculation
- Cascade resolution algorithm
- Style computation and inheritance
- Media query evaluation
- Box model calculation
- Normal flow, floats, positioning schemes
- Flexbox algorithm: main/cross axis, flex basis, grow, shrink
- Grid algorithm: track sizing, placement, spanning
- Line breaking and text shaping
- Layer tree construction
- Paint recording and display lists
- Rasterization strategies
- GPU compositing and texture management
Build a browser engine in C++ or Rust that renders Wikipedia. Handle fonts, images, CSS animations. Measure every phase: parse, style, layout, paint, composite.
- Lexical analysis and tokenization
- Recursive descent parser
- AST construction and validation
- Scope analysis and symbol resolution
- Bytecode design and instruction set
- Stack-based VM execution
- Closure implementation with environment chains
- Prototype chain traversal
- Property lookup optimization (inline caches)
- Mark-and-sweep garbage collection
- Generational collection (young/old generations)
- Incremental and concurrent GC
- WeakMap and WeakSet implementation
- Memory profiling and leak detection
- Microtask queue (Promise.then)
- Macrotask queue (setTimeout, I/O)
- Animation frame callbacks
- Idle callbacks and scheduling
- Task prioritization
- Inline caching and polymorphic inline caching
- Type feedback and speculative optimization
- Deoptimization and bailout mechanisms
- Register allocation
JS engine executing real programs. Implement closures, prototypes, async/await, event loop. Profile GC pauses and optimize hot paths. Connect to DOM for interactive apps.
- Tree diffing complexity analysis (O(n³) to O(n))
- Key-based reconciliation
- Heuristics: component type, element type, lists
- Fiber architecture preparation
- requestAnimationFrame-based updates
- Double buffering for UI consistency
- Priority queues for updates
- Time slicing for interruptibility
- Layout thrashing detection
- Read/write batching (FastDOM pattern)
- CSS containment and layer creation
- Composite-only animations
Virtual DOM library with optimized reconciliation. Stress test with 10,000 plus dynamic nodes. Profile layout and paint timings.
- Work loop and unit of work
- Reconciliation phases: render and commit
- Effect list construction
- Priority levels and lane model
- Hooks queue and cursor
- useEffect cleanup and dependency checking
- useRef mutable container
- useCallback and useMemo memoization
- Custom hook composition
- Time slicing and work interruption
- Suspense and lazy loading
- useTransition and useDeferredValue
- Automatic batching
- renderToString vs renderToPipeableStream
- Progressive hydration and selective hydration
- Double pass problem and solutions
- Edge rendering vs Node rendering
- File-based routing implementation
- SSG: getStaticProps build-time execution
- ISR: revalidation and stale-while-revalidate
- API routes and middleware
- Module bundling and code splitting
Clone React's core reconciler with Fiber and hooks. Build SSR framework with streaming and hydration. Implement file-based routing.
- Chrome DevTools Performance tab
- React DevTools Profiler
- Lighthouse metrics: FCP, LCP, TTI, CLS, FID
- Custom performance marks and measures
- Heap snapshots and allocation timelines
- Component memoization strategies
- Virtualized lists and windowing
- Image optimization: formats, lazy loading, responsive images
- Font optimization: subsetting, preloading, display strategies
- Bundle analysis and tree shaking
- Code splitting strategies: route-based, component-based
- Eliminate render-blocking resources
- Minimize critical CSS
- Defer non-critical JavaScript
- Preload, prefetch, preconnect strategies
Optimize real-world app from 3s to less than 1s LCP. Document before and after metrics. Handle 60fps animations with heavy DOM updates.
- Build V8 from source with custom patches
- Add custom bytecode instructions
- Instrument GC for detailed metrics
- Profile JIT compilation decisions
- Build Chromium or WebKit from source
- Add custom tracing to layout engine
- Modify rendering pipeline for instrumentation
- Debug compositor thread interactions
- Compile C, C plus plus, Rust to WASM
- Linear memory management
- JS to WASM interop optimization
- SIMD and threads
Add custom profiling to browser engine. Build WASM module for computationally intensive tasks. Optimize JS and WASM boundary.
- Run minimal browser on microcontroller simulation
- Memory-constrained rendering (64KB RAM)
- CPU-constrained JavaScript (10MHz)
- Display optimization for small screens
- Memory pressure simulation
- CPU throttling
- Network constraint testing (2G, 3G)
- GPU bottleneck analysis
Port mini-browser to embedded environment. Optimize for extreme constraints. Document performance characteristics.
- Custom browser engine with HTML, CSS, JS support
- React-like framework with Fiber and concurrent features
- SSR framework with streaming and hydration
- Production-optimized Next.js application
- Full performance profiling suite
- WebAssembly acceleration for critical paths
- Hardware constraint testing and optimization
- Render complex UIs at 60fps
- Handle 10,000 plus concurrent DOM updates
- Sub-second initial page load
- Progressive enhancement and graceful degradation
- Comprehensive error handling and edge cases
- Full performance documentation
Production-ready system with complete understanding of every layer from CPU to pixels.
- Strong C, C plus plus, or Rust
- Assembly language basics
- Computer architecture knowledge
- Operating systems fundamentals
- Data structures and algorithms mastery
You will understand and have built:
- CPU execution and memory management
- Network protocols and servers
- Browser engines: parsing, layout, paint, composite
- JavaScript engines: parser, interpreter, GC, event loop
- Virtual DOM and reconciliation
- React internals and concurrent rendering
- SSR and hydration systems
- Performance profiling and optimization
You will debug and optimize at every level of the stack with complete confidence.