The process from entering a URL to rendering the entire page consists of three parts:
1. The process of DNS parsing URL
2. The process of the browser sending a request to interact with the server
3. The browser renders the received html page
1. The process of DNS parsing URL
The process of DNS resolution is to find out which server has the requested resource. Because the IP address is not easy to remember, the URL domain name (such as www.baidu.com) is generally used as the URL. DNS resolution is the process of translating domain names into IP addresses.
Specific process:
1) Browser cache: The browser will cache DNS records according to a certain frequency
2) Operating system cache: If the required DNS record cannot be found in the browser cache, it will take the DNS record found in the operating system.
3) Routing cache: routers also have DNS cache
4) ISP's DNS server: ISP has a dedicated DNS server to respond to DNS query requests
5) Root server: After the ISP’s DNS server cannot be found, it will send a request to the root server for recursive query
2. The interaction process between browser and server
1) First, the browser uses the tcp protocol to establish a connection with the server through a three-way handshake
HTTP requests include header and body. The header includes the request method (get and post), the requested protocol (http, https, ftp), the requested address ip, and the cache cookie. The content of the request is in the body.
2) The browser initiates an http get request based on the resolved IP address and port number.
3) After the server receives the http request, it starts to search for the html page and returns a response message using http
4) If the status code is 200 and the response is successful, the browser starts rendering the page after receiving the returned html page
3. Browser page rendering process
1) The browser traverses the html nodes into a dom tree according to the depth traversal method
2) Parse css into a CSS DOM tree
3) Construct the dom tree and CSS DOM tree into a render tree
4) JS calculates the position of all nodes on the screen according to the obtained render tree, and performs layout (reflow)
5) Traverse the render tree and call the hardware API to draw all nodes (redraw)