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

~~~

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.

Take this course offline

Subscribe to my newsletter to get every free book and course in PDF and EPUB format.

Get the downloads

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)
    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. ✓ The JavaScript Event Loop
    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. ✓ Learn how HTTP Cookies work
    3. ✓ The Web Storage API: local storage and session storage
    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. ✓ Overview of the Browser DevTools
    10. ✓ Read a performance recording
    11. ✓ Find a memory leak
    12. ✓ Profile and fix a page
    13. ✓ Check your understanding: performance and DevTools