Browser Rendering Pipeline: How JS and CSS Become Pixels

Related: The 16.6ms Frame Budget , the wall clock deadline that every stage in this pipeline must fit inside. Every rendered frame runs through a fixed pipeline: Parse → Style → Layout → Paint → Composite . Understanding which stage runs on which thread, what triggers each stage to re-run, and which stages can be skipped entirely is the mechanical foundation behind every browser performance optimization. What this covers: The full pipeline stage by stage, how the compositor thread separates from the main thread, what "jank" physically is at the hardware level, and how to read the DevTools flame chart to pinpoint which stage is your bottleneck. The pipeline, stage by stage When the browser receives HTML bytes, it doesn't hand them to a rendering function and wait. It runs a multi-stage pipeline, and each stage has a different cost profile and different triggers for re-running. Understanding the stages is the prerequisite for understanding why your specific change makes something slow. P