Module · Frontend Engineer
How the Browser Works
The rendering pipeline, the storage APIs and the caches between you and the user.
TOPIC 01
The Rendering Pipeline
What the browser does between your HTML arriving and the pixels appearing.
What you'll practice
- Trace the Critical Path — guided · beginner
- Stop the Layout Thrash — practice · intermediate
A command you'll meet
cat ~/perf/critical-path.mdA browser is the most patient runtime you will ever program for. Open the task below for the full walkthrough.
Hands-On Tasks in This Topic (2)
Trace the Critical Path
The browser parses, lays out, paints and composites. Write the order down so you know which of your files is holding the page up.
Stop the Layout Thrash
Reading a layout property right after writing one forces the browser to recalculate the page in the middle of a frame. Write the rules that avoid it.
TOPIC 02
Storage & Caching
Where a browser keeps your data, and how long it decides to keep it.
What you'll practice
- Pick the Right Storage API — practice · intermediate
- Write the Caching Strategy — challenge · advanced
A command you'll meet
cat ~/app/storage.mdClient storage is where state goes to become a bug. Open the task below for the full walkthrough.
Hands-On Tasks in This Topic (2)
Pick the Right Storage API
Four storage APIs, four different jobs. Write the decision for your application.
Write the Caching Strategy
The HTTP cache and the service worker cache are two different systems with two different rules. Write the strategy that keeps both of them honest.