So far we’ve seen how a single request and response are handled between a client and a server. But most of the time, our devices aren’t making a single request. Every time we load a webpage, our device sends a request for each file that makes up that page. So even when we’re just loading one webpage, that page can make multiple requests in order to retrieve different pieces of content, like images.
So how does this process work when we’re making multiple requests simultaneously?
All of the following steps happen in a split second:
- When a user types in a URL and presses enter, the server processes the request and sends the HTML file back to the client. HTML files hold the content of a website and they also contain links for any additional assets or code that are needed to display the site properly.
- The browser will begin to search for elements in the HTML file and it will start to make additional HTTP requests for any other external resources used by the HTML file. This often includes:
- One or more CSS stylesheets. CSS stands for cascading style sheets; CSS creates the style and layout of a web page. The browser will request the CSS stylesheet, and when the server sends it back, the browser analyzes the CSS and starts applying the visual styles to the content of the site.
- The request-response cycle also sends website assets, like images and videos, from the server to the browser. If these files are large, there might even be a noticeable delay before they are rendered by the browser.
In most modern browsers, these additional requests are made in parallel. This means that these requests are initiated at the same time, and the browser does not wait to receive one resource before requesting the next resource.
All of the resources are typically displayed as soon as possible. The HTML will be displayed even if some of the other assets have not been received by the browser.
Voila! The user can now interact with the website that they requested to see. This whole process typically happens in about a second or less, depending on the speed of the user’s connection, the size of the website, and even the physical distance between the browser and the server.
The animation to the right shows the different languages that work together to display a webpage. When you’re ready, move on to the next exercise.