Free course

Browser Internals Course

Learn how a browser loads resources, builds and paints a page, runs JavaScript, isolates sites, stores data, and exposes performance problems.

5 modules · 55 lessons · No signup

Prerequisites: HTML, CSS, JavaScript and HTTP

Download this course as PDF or EPUB

Read it offline, on your Kindle, or print it. Join my free newsletter and you get this course plus every other book and course I published.

Download PDFDownload EPUB
~~~

Your progress

of lessons completed.

Course completed.

What you'll learn

Trace a page from URL to pixels and use browser DevTools to explain and fix loading, rendering, memory, and responsiveness problems.

Course contents

  1. Networking and resource loading

    DNS, connections, requests, parsing, priorities, and reuse.

    1. ✓ From a URL to a page
    2. ✓ DNS, Domain Name System
    3. ✓ The HTTPS protocol
    4. ✓ How HTTP requests work
    5. ✓ How the browser discovers resources
    6. ✓ Efficiently load JavaScript with defer and async
    7. ✓ How module scripts load
    8. ✓ Preload important resources carefully
    9. ✓ The HTTP/2 protocol
    10. ✓ Reuse connections and cached responses
    11. ✓ Check your understanding: networking and loading

  2. The rendering pipeline

    DOM, CSSOM, style, layout, paint, and compositing.

    1. ✓ From bytes to pixels
    2. ✓ The Document Object Model (DOM): how browsers represent HTML
    3. ✓ HTML parsing is incremental
    4. ✓ Build the CSSOM and calculate styles
    5. ✓ The render tree
    6. ✓ Layout calculates geometry
    7. ✓ Paint and rasterization
    8. ✓ Compositing layers
    9. ✓ What a DOM or CSS change triggers
    10. ✓ Check your understanding: the rendering pipeline

  3. The JavaScript engine

    Parsing, optimization, the stack, event loop, and memory.

    1. ✓ The V8 JavaScript Engine
    2. ✓ Parse, compile, and run JavaScript
    3. ✓ Optimization and deoptimization
    4. ✓ The call stack
    5. ✓ Browser task queues and a responsive page
    6. ✓ Tasks and microtasks
    7. ✓ Long tasks block the page
    8. ✓ Garbage collection
    9. ✓ How browser memory leaks happen
    10. ✓ Web Workers
    11. ✓ Check your understanding: the JavaScript engine

  4. Storage and browser security

    Origins, cookies, local data, isolation, and sandboxing.

    1. ✓ What is an origin
    2. ✓ Cookie scope, expiration and security attributes
    3. ✓ How localStorage and sessionStorage persist browser data
    4. ✓ Dive into IndexedDB
    5. ✓ Choose the right browser storage
    6. ✓ The same-origin policy
    7. ✓ CORS, Cross-Origin Resource Sharing
    8. ✓ Site isolation and renderer sandboxing
    9. ✓ Private browsing storage
    10. ✓ Check your understanding: storage and security

  5. Performance and DevTools

    Web Vitals, long tasks, layout work, profiling, and leaks.

    1. ✓ Measure before optimizing
    2. ✓ Core Web Vitals
    3. ✓ Investigate a slow LCP
    4. ✓ Investigate a slow interaction
    5. ✓ Prevent unexpected layout shifts
    6. ✓ Avoid layout thrashing
    7. ✓ Use requestAnimationFrame for visual updates
    8. ✓ Debounce and throttle repeated input
    9. ✓ Trace a broken page across DevTools panels
    10. ✓ Read a performance recording
    11. ✓ Find a memory leak
    12. ✓ Profile and fix a page
    13. ✓ Check your understanding: performance and DevTools