The Rendering Learning Path
Rendering is where a frontend application meets the browser, and understanding it explains both why pages feel fast or slow and why some content ranks while other content does not. This path orders the rendering cluster from the pipeline up: first how the browser turns markup into pixels, then the strategies for where rendering happens, then the performance techniques that keep it smooth, ending with runnable practice.
Each stage names what to read and the example to run.
What you'll learn
Stage 1: Learn the browser pipeline
Everything about rendering rests on what the browser actually does, so start there.
From markup to pixels
Read the browser rendering pipeline to see how HTML and CSS become layout, paint, and composite. Knowing these stages is what later lets you reason about why a change is cheap or expensive, rather than guessing.
Stage 2: Client, server, or static
Next, learn where rendering can happen and what each choice costs.
The strategy decision
Study client-side rendering versus SSR and JavaScript rendering. The choice between rendering in the browser, on the server, or ahead of time at build is one of the most consequential in a frontend project, affecting load time and SEO together.
Stage 3: Hydration and prerendering
Modern rendering often mixes server output with client interactivity, which introduces hydration.
Making server HTML interactive
Read hydration versus prerendering and progressive rendering. Hydration is where many performance problems hide, because attaching behaviour to server-rendered HTML has a real cost that is easy to underestimate.
Stage 4: Rendering performance
With the model in place, learn to keep rendering fast.
Reflow, repaint, and optimization
Work through render optimization and DOM rendering performance. The central skill is avoiding unnecessary layout work, which the practice stage will make concrete.
Stage 5: The rendering lifecycle
Tie the stages together by seeing rendering as a repeating cycle.
How frames come together
Read the rendering lifecycle and render-blocking resources. Understanding what blocks a first render, and what happens on each frame after, connects the earlier stages into one continuous picture.
Stage 6: Practise in code
Finish by feeling the difference good rendering makes.
Measure it yourself
Run the rendering example to see fragment-based list building beat the naive loop, and the browser rendering example to fix layout thrashing by batching reads and writes. Timing these in your own browser turns the theory into instinct. The full set is in the rendering cluster.
Frequently Asked Questions
How does browser rendering work?
The browser turns HTML and CSS into a layout, paints pixels, and composites layers. Reading a geometric property forces layout to update, which is why interleaving reads and writes is slow. The pipeline article covers each stage.
What is the difference between client and server rendering?
Client-side rendering builds the page in the browser with JavaScript, while server-side rendering sends finished HTML. Server rendering and prerendering put content in the initial response, which is more reliable for SEO and first paint.
What is hydration in rendering?
Hydration is attaching JavaScript behaviour to HTML that was rendered on the server, so a static page becomes interactive. It has a real performance cost, which is why it is a common source of slowness.
How do I make rendering faster?
Avoid unnecessary layout work: build large lists in a fragment and insert once, batch DOM reads and writes to prevent layout thrashing, and animate with transform rather than layout-affecting properties.
Read next: the frontend performance roadmap, or the Guides hub.
Start here?
The browser rendering pipeline is the foundation every later stage builds on.
Read: Browser Rendering Pipeline →