1. The browser finds and resolves the domain name IP address
1. Check the local hosts file to see if there is a mapping relationship, there is an IP address mapping, and the domain name resolution is completed
2. Look up the cache of the local DNS resolver to see if there is this URL mapping relationship. If there is, the domain name resolution will be completed. The local DNS server is generally provided by the network access server provider, such as China Telecom and China Mobile.
3. After the domain name DNS request arrives at the local DNS server, the local DNS server will first query its cache record. If there is this record in the cache, it can return the result directly. This process is a recursive query. If not, the local DNS server will also query the DNS root server
4. If the root DNS server does not record the corresponding relationship between the specific domain name and IP address, it will continue to query the domain server and give the address of the domain server. This process is an iterative process.
5. The local DNS server continues to send requests to the domain server, and the server returns the address of the resolution server for the domain name.
6 The local DNS server sends a request to the domain name resolution server. At this time, it can receive a domain name and IP address correspondence. The local DNS server must not only return the IP address to the user's computer, but also store the correspondence in the cache. To prepare for the next query by other users, the results can be returned directly to speed up network access. 
Two, establish a TCP link
1. Get the IP address corresponding to the domain name, and initiate a TCP connection request to port 80 of the WEB server program with a random port (1024~~65535)
2. The request enters the TCP/IP protocol stack of the kernel (used to identify the connection request, unpack the packet, and peel it layer by layer), and may also be filtered by the Netfilter firewall (a module belonging to the kernel).
3. Reach the WEB program, and finally establish a TCP/IP connection.
* For the TCP connection between the client and the server, the "three-way handshake" must be said.
Three handshake
The client sends a data packet with the SYN flag to the server. After receiving it, the server returns a data packet with the SYN/ACK flag to show the confirmation message. Finally, the client sends back an ACK flag. The data packet represents the end of the handshake and the connection is successful.
After popularization is:
- Client: Brother, I want to link with you
- Server: Okay, I agree
- Client: Good
3. The browser initiates an Http request to the WEB server
After the TCP connection is established, an HTTP request is initiated. The request is generally divided into three parts
- Request method URI protocol/version
- Request Header
- Request body
Four, server-side processing
1. After the server receives the request, the web server (or http server to be precise) processes the request, such as Apache, Ngnix, IIS, etc.
2. The web server parses user requests, dispatches corresponding resource files to process user requests and parameters, and calls database information.
3. Return to the browser client through the web server.
Five, close the TCP link
In order to avoid resource occupation and loss of both the server and the client, when there is no request or response to the two parties, either party can initiate a shutdown request. Similar to the 3-way handshake for creating a TCP connection, closing a TCP connection requires a 4-way handshake
Six, browser analysis resources
1. The browser parses HTML, generates a DOM tree, parses CSS, generates a CSS rule tree, and then generates a rendering tree through the DOM tree and the CSS rule tree.
2. The render tree is different from the DOM tree. There are no nodes in the render tree that do not need to be displayed, such as head and display.
3. While parsing CSS, you can continue to load and parse HTML, but when parsing and executing JS scripts, it will stop parsing subsequent HTML, which will cause blocking problems.
Seven, browser layout rendering
1. Calculate the CSS style according to the rendering tree layout, that is, geometric information such as the size and position of each node on the page.
2. HTML is a fluid layout by default. CSS and js will break this layout and change the appearance, style, size and position of the DOM.
3. Two important concepts should be mentioned at this time: reflow and repain.
repaint: Repaint a part of the screen without affecting the overall layout. For example, the background color of a certain CSS is changed, but the geometric size and position of the element remain unchanged.
reflow: It means that the geometric size of the component has changed, and we need to re-verify and calculate the rendering tree. Part or all of the render tree has changed. This is Reflow, or Layout.
In some cases, such as changing the style of an element, the browser will not immediately reflow or repaint once, but will accumulate a batch of such operations, and then perform a reflow, which is also called asynchronous reflow or incremental asynchronous reflow.
In some cases, such as resize the window, change the default font of the page, etc. For these operations, the browser will reflow immediately.
Basically reprinted: https://www.cnblogs.com/yuanzhiguo/p/8119470.html
You can also refer to: https://blog.csdn.net/wlk2064819994/article/details/79756669