Roadmap › Networking & Hosting — How a Website Works, End to End › Module: HTTP and the Browser
Lessons in this course (12)
7. How the browser renders a page
Intermediate★ Must knowLesson 7 of 12
- Receive HTML bytes → decode → tokenize → build the DOM.
- Find
<link rel=stylesheet>→ download → build the CSSOM (CSS blocks rendering). - Find
<script>→ download and execute (blocks parsing unlessdefer/async/type=module). - DOM + CSSOM → render tree → layout (positions/sizes) → paint → composite layers on the GPU.
- Images, fonts, more scripts are requested in parallel; the page becomes interactive when JavaScript has run.
- JavaScript changes (DOM updates) may trigger re-layout and re-paint.
Speed-ups: fewer/smaller requests, compression (Brotli/gzip), HTTP/2/3, CDN, caching headers, lazy-loading images, defer scripts, critical CSS, preconnect/preload hints. Measure with Lighthouse and Core Web Vitals (LCP, INP, CLS).