How a Web Page Gets Loaded
Last updated
Was this helpful?
Last updated
Was this helpful?
The high-level steps the browser takes when you enter an URL into the search input box are the following:
Enter a URL into a web browser
Browser looks up the IP address for the domain name via DNS.
Browser sends a HTTP request to the server.
Server sends back a HTTP response.
Browser begins rendering the HTML.
Browser sends requests for additional objects embedded in HTML (images, CSS, JavaScript) and repeats steps 3-5.
Once the page is loaded, the browser sends further asynchronous requests as needed.
Step 5-6: The web browser reads through and and parses the HTML text file line-by-line. As it encounters references to external files, it will send additional requests to the server for each one.
Stylesheets
Fonts
JavaScript files
Images
Below is an example of what references to external files within an HTML document might look like.
It is now common for the process of preparing a web site for delivery to bundle files of the same type into a single package. For example, all of the JavaScript files would reside in a single package and all of the CSS files would reside in a separate package.
The image below shows the Request and Response taken from the Chrome Developer Tools when inspecting the Network traffic after the URL csszengarden.com is entered into the search input box of the browser.
As you can see, the request asks for (Request Method: GET) some data from the web server for the given URL.
The web server responds with the contents of the default HTML document for the site. Looking at the line highlighted in red, you can see a request for the stylesheet file "/214/214.css". A request will be made to the web server for this file next.
The web server next makes another request for the CSS file and gets back the contents of that files in the response.
