The Journey from URL to Web Page Load: A Comprehensive Overview of Events
When you enter an URL into your browser’s address bar and hit Enter, you set in motion a series of events that ultimately lead to the display of a fully rendered web page. Behind the scenes, numerous processes and interactions occur, seamlessly bringing together various technologies. In this article, we will take you on a journey through the complete list of events, from entering a URL to the moment the web page loads before your eyes.
The first step after entering a URL is the Domain Name System (DNS) lookup. The browser extracts the domain name from the URL and sends a query to a DNS server to translate the domain name into an IP address. This process helps the browser locate the server hosting the requested website.
Establishing a Connection
Once the IP address is obtained, the browser establishes a TCP/IP connection with the web server hosting the website. A three-way handshake occurs between the browser and the server to establish a reliable connection.
Sending an HTTP Request
With the connection established, the browser sends an HTTP request to the web server. The request contains various details such as the request method (GET, POST, etc.), headers, cookies, and any additional data required by the server.
Once the server has processed the request and gathered the necessary resources, it generates an HTTP response. This response contains an HTTP status code (e.g., 200 for success, 404 for not found), headers with additional information, and the requested content.
Downloading the Response
The browser receives the HTTP response from the server and starts downloading the response content. This includes the HTML file that forms the basis of the web page, as well as any linked resources referenced within the HTML, such as stylesheets, scripts, images, and other media files.
As the HTML file is downloaded, the browser starts parsing its contents. It builds the Document Object Model (DOM), a hierarchical representation of the HTML structure. During this process, the browser also identifies external resources, such as stylesheets and scripts, and initiates further requests to fetch them.
Once the browser encounters a reference to a stylesheet, it fetches the CSS file. It then parses the CSS rules, applies them to the corresponding HTML elements, and constructs the Render Tree, which represents the visual structure of the web page.
Rendering the Web Page