1. The Critical Rendering Path & Frame Generation Loop
When a web document is retrieved over HTTP/3, the browser thread parses raw byte streams into tokenized streams, constructing the Document Object Model (DOM) and CSS Object Model (CSSOM) trees.
- DOM Construction: UTF-8 HTML byte stream → Character Tokenizer → Node Tree.
- Style Calculation: Matching CSS selectors with DOM elements to generate computed styles.
- Layout (Reflow): Computing geometric coordinates $(x, y, \text{width}, \text{height})$ for all visible elements.
- Paint: Recording draw calls into display lists (bitmaps, text paths, gradients).
- Compositing: Separating elements into GPU layers and rasterizing via the GPU thread.
2. V8 JIT Compilation: Ignition Interpreter & TurboFan Compiler
JavaScript source code undergoes multi-stage execution within Google V8:
| Compiler Stage | Input Representation | Execution Mechanism | Optimization Trigger |
|---|---|---|---|
| Parser | Raw JS String | Abstract Syntax Tree (AST) Generation | Immediate Page Load |
| Ignition | AST | Bytecode Interpretation | High Execution Frequency |
| TurboFan | Hot Bytecode + Feedback Vectors | Optimized Machine Code Generation | Type Feedback Stability |
| Deoptimization | Machine Code | Bailout to Bytecode (Deopt) | Polymorphic Type Violation |
3. Core Web Vitals Performance Thresholds
- Largest Contentful Paint (LCP): Target $\le 2.5\text{ s}$ (Measures loading performance).
- Interaction to Next Paint (INP): Target $\le 200\text{ ms}$ (Measures responsiveness).
- Cumulative Layout Shift (CLS): Target $\le 0.10$ (Measures visual stability).