Inside the browser: parsing, rendering and the security model
Through experiments you examine how a browser parses and draws a page, the event loop, and security boundaries such as the same-origin policy.
Level 301 · 17 lessons · 15 practice labs
Lessons
Loading and parsing
- The steps of navigation: from request to first paint
- The HTML parser and building the DOM tree
- Render-blocking resources: CSS and scripts
- async, defer and module scripts
- Resource hints: preload, prefetch, preconnect
- Short task: draw a page’s loading order
The rendering pipeline
- The CSSOM and the render tree
- Layout, paint and compositing
- Operations that trigger reflow
- The event loop and the frame budget in the browser
- Inspecting a frame in the performance panel
- Short task: find the cause of janky scrolling
Security boundaries
- What an origin is: scheme, host and port
- What the same-origin policy blocks and what it doesn’t
- Process isolation, the sandbox and iframe sandbox
- Storage partitioning and third-party cookies
- Capstone: a loading and security report for a page
Practice labs
- Sketch a page's loading order: From the waterfall, write down in order when each resource on Pusula Magazine's page is requested.
- Find the script that blocks rendering: The page stays blank for two seconds; find the scripts and styles that block rendering and fix them with async or defer.
- Speed up loading with resource hints: Add preload and preconnect for the font and hero image and prove the gain with before and after measurements.
- Predict the DOM from broken HTML: Draw the DOM tree of a fragment with unclosed p and li tags on paper, then compare it with the inspector.
- Remove a document.write delay: An old ad script halts the parser; show the damage in the performance panel and load the script safely instead.
- Prove the run order of module scripts: On a page mixing classic, async, defer and module scripts, predict the run order and confirm it with console logs.
- Find a property that triggers reflow: Show the difference in the performance panel when an animated menu uses transform instead of left.
- Find the cause of janky scrolling: A scroll handler reading offsetHeight causes jank; inspect the frame and remove the forced layout.
- Split work that blows the frame budget: A long calculation delays clicks; split the task into chunks and show each frame stays under 16 ms.
- Tell whether two URLs share an origin: For ten URL pairs, compare scheme, host and port and decide which share an origin.
- Show what same-origin policy blocks: Try to read an iframe from another origin and to load its image; explain with the console which one is blocked.
- Tighten an iframe sandbox: An embedded survey widget can redirect the parent page; cut the sandbox permissions to the minimum and verify it still works.
- Count third-party cookies: Split the cookies on a news page into first and third party and note which domains set them.
- Observe partitioned storage in an embed: Embed the same chat widget on two sites and show its localStorage values are kept separate.
- Write a loading and security report: Combine loading order, blocking resources and origin relationships for Gelincik Insurance's campaign page into one report.
About this course
Through experiments you examine how a browser parses and draws a page, the event loop, and security boundaries such as the same-origin policy.
What you will learn
- Loading and parsing
- The rendering pipeline
- Security boundaries
Prerequisites
You should be comfortable with the level 101 and 201 topics of the same path.
Lab environment
Lessons run on your own Kali Linux desktop in the browser, with the tools ready in their windowed interfaces. Nothing to install; a computer screen is recommended.
Frequently asked questions
- Is this course right for my level?
- The course is at level 301; it assumes you know the topics of the lower-level courses.
- Is there anything to install?
- No. Every lesson runs in your own lab environment that opens in the browser.
- How do lessons work?
- Each lesson has 8 to 10 steps and a short quiz. Early steps show the command to type, later steps give less help; if two attempts fail, the solution opens.
- Can I try it for free?
- Yes. The first three lessons of every course are free.