In this episode, the podcast host Simo Ahava delivers a solo episode.
Understanding how a web browser works is fundamental to all disciplines that are covered by the umbrella term of “technical marketing”.
Web browser is often the nexus of whatever mechanisms are required by things like analytics, advertising, and search engine optimization. It’s thus imperative to understand, at least on a broad level, the process of what happens when the browser fetches a resource from a web server.
There are so many moving parts to this, and it’s impossible to cover everything in this episode, but what you will receive is a broad overview of everything from the initial network request all the way to the browser signalling that the page render is complete.
We’ll return to many of the topics discussed here in future episodes. But for now, enjoy this overview.
Listen to the episode using the player or find it in your favorite podcast service.
Topics
- 00:00:00 – Introduction
- 00:05:08 – The network request and DNS resolution.
- 00:10:24 – TCP/IP handshake between the client and the server.
- 00:11:57 – Anatomy of the HTTP request.
- 00:14:26 – The purpose of a web server.
- 00:15:22 – More details about the HTTP request.
- 00:16:41 – What are browser cookies?
- 00:18:39 – How web servers produce the requested resource (e.g. dynamic templates, static files).
- 00:20:24 – The server returns the resource to the browser.
- 00:22:04 – The browser starts rendering the web content.
- 00:22:30 – The browser turns the elements, nodes, and tokens into the Document Object Model (DOM).
- 00:23:26 – Styles determine how things look like and how they are aligned; they are compiled into the Cascading Style Sheet Object Model (CSSOM).
- 00:24:49 – The position and alignment of elements is determined during the Reflow step. The actual rendering / painting of elements is done during the Paint step.
- 00:25:44 – Browsers use asynchronous operations to help with the limitations of running just a single execution thread.
- 00:26:54 – HTML files are more than just content. They contain a lot of metadata, too.
- 00:29:05 – Outro