The method and loading process of opening the URL in the browser

Different browsers work in different ways. In general, the core of browsers is the browser engine. Currently, almost all of the most popular browsers use different browser engines: ie uses Trident, Firefox uses Gecko, Safari, and chrome uses WebKit. Different browser engines have different W3C specifications. The following describes the process from entering the URL address to completely available pages.

1. Connect to the server where the URL is located

Enter a URL in the address bar and click the go button to ask the browser to open the URL. The first thing the browser does is to find the server where the URL is located and query it from the DNS server, the browser can obtain the IP address of the website where the URL is located. Then, the browser initiates a connection request to the address to establish a connection to the server.

 

2. Obtain the HTML document corresponding to the page

After the connection is established, the browser sends an HTTP request to the server to request the HTML document corresponding to the URL. Whether the requested URL is a static html file or a dynamic script (aspx, PHP, or JSP), the HTML document that the server returns to the browser must be. This HTML document is the page that the browser needs to render.

 

3. parse the document and obtain the required resources

After obtaining the HTML document, the browser parses the document to know the resources required for the page and generate the DOM tree. Generate a DOM tree and download other resources on the page at the same time. Generally speaking, the browser analyzes HTML documents line by line. Once a tag is found, the browser allocates the download of the specified resource according to the tag requirements. After the DOM tree is generated, the domcontentloaded event is triggered.

First, theoretically, all the resources required by the browser to download pages concurrently will bring the best performance experience, but the server must ensure support for as many users as possible, therefore, HTTP/1.1 requires that each client can only establish two connections with each server.

Secondly, not all components can be downloaded in parallel. In general, the page contains two types of JavaScript scripts to be executed, one is the embedded JS statements that are directly identified by the <SCRIPT> label, and the other is to reference external JS files.

 

4. js and CSS files on the page

 

5. onload event

After the HTML document is parsed and a DOM tree is generated, all the resource files required on the page are successfully downloaded and executed, the browser sends an onload event and calls back the onload function in the HTML document.

 

The method and loading process of opening the URL in the browser