This is a classic front-end problem, mainly about having an understanding of how browsers work!
The network communication generally follows the five-layer Internet protocol, as shown in the figure below. The picture comes from https://images2018.cnblogs.com/blog/882926/201711/882926-20171127181032128-471806615.png
The general steps are as follows:
1. Domain name resolution
The browser searches for the IP address of the domain name. This step includes the specific search process of DNS, which belongs to the application layer protocol. The client will check whether there is a corresponding IP address locally, and return if it exists, otherwise request the upper-level DNS server until it is found or finally to the root node.
Obviously, this process may be very time-consuming, so many websites will use dns-prefetch, so that the browser can convert these domain names into IP addresses in idle time, which can effectively reduce the time. Take Taobao as an example:
2. TCP three-way handshake, the client sends an http request to the server
The server may respond with a permanent server redirect, and the client continues to follow the redirect address.
3. The server returns an http response
4. The client gets the html code
5. The client parses the HTML code and requests resources in the HTML code (image, audio, css, js, etc.)
6. The browser renders the page and displays it to the user
It mainly parses html to form a dom tree, parses css to form a render tree, and combines the dom tree and the render tree for layout and drawing!
Reference link: