How the Web Works: From URL to Rendered Page
The Web as a System
Client, server, and network
The web is a distributed system: a browser acts as a client, a server stores resources, and the network carries requests and responses. When you type a URL, the browser resolves the domain, opens a connection, requests a resource, and then interprets the response to display a page.
Key idea
A web page is rarely a single file; it is usually a composition of HTML, CSS, JavaScript, images, fonts, and data fetched from multiple sources.
Request and response flow
What happens after you press Enter
A typical load involves DNS lookup, establishing a connection, sending an HTTP request, receiving an HTTP response, parsing HTML, downloading linked assets, building the DOM and CSSOM, and painting pixels to the screen. JavaScript can then modify the page further by changing the DOM or fetching additional data.
Typical page-load sequence
-
1
Step 1: Resolve the domain name to an IP address using DNS.
-
2
Step 2: Open a transport connection to the server.
-
3
Step 3: Send an HTTP request for the desired resource.
-
4
Step 4: Receive the HTML response and begin parsing it.
-
5
Step 5: Fetch linked CSS, JavaScript, images, and fonts.
-
6
Step 6: Build the render tree and paint the page.
-
7
Step 7: Run JavaScript to add interactivity or load more data.
Which component is most directly responsible for translating a domain name into an IP address?
DNS maps human-readable domain names to IP addresses so the browser knows where to send the request.
Correct answer: DNS
What is the primary purpose of HTTP in the web request/response cycle?
HTTP is the communication protocol that structures web requests and responses.
Correct answer: It defines how clients request resources and how servers respond with those resources.
Rendering concepts
From source code to pixels
The browser first parses HTML into the DOM, parses CSS into the CSSOM, combines them into a render tree, lays out elements, and paints them. JavaScript can cause reflow and repaint when it changes layout-affecting styles or content.
Performance insight
Reducing blocking resources and minimizing layout thrashing can improve the time it takes for users to see and interact with content.
Name the browser structure that represents the page content as nodes.
The Document Object Model represents the structure of the HTML document as a tree of nodes.
Correct answer: DOM