Browser Runtime Lab
Browser Runtime Pipeline
→→→→→→→→
Network Waterfall
A page does not load all at once. Resources are downloaded over time, often depending on previous requests.
HTML
CSS
JavaScript
API
Hero Image
Total Load Time: 1150ms
What this visualization shows
A web page does not download as a single file.
- HTML is requested first.
- HTML discovers CSS and JavaScript files.
- JavaScript triggers API requests.
- Images are downloaded later.
Multiple resources can be loading at different times.
Network & Resource Loading
How the browser discovers, prioritizes and downloads resources.
What this stage does
- Requests the resources required to build the page.
- Downloads HTML, CSS, JavaScript, images, fonts and API responses.
- Delivers the input required for every subsequent stage of the runtime.
Mental Model
- Think of the network as the browser's supply chain.
- Nothing can be parsed, rendered or interacted with until resources arrive.
- Every stage of the runtime depends on resource delivery.
Runtime Pressure
- The network introduces waiting.
- Every request creates a dependency on a remote system.
- Resources cannot be processed until they arrive.
- Network delays propagate through every stage that follows.
Production Reality
- Modern applications rarely load a single file.
- A page may require dozens or even hundreds of resources before becoming interactive.
- HTML, CSS, JavaScript, fonts, images and API responses often arrive at different times.
- Many perceived frontend performance problems begin before JavaScript executes.
Key Takeaway
The browser cannot process resources it has not yet received.