We all use browsers to access Web sites in our daily lives, but have you ever wondered what happens in the process? Why is it that we can access a Web page by typing a URL in the browser’s address bar? Here is a brief description of the process

  • 1. DNS resolution
  • 2. Initiate TCB connection
  • 3. The client sends an HTTP request
  • 4. The server processes the request and returns the HTTP packet
  • 5. The browser parses the rendered page
  • 6. Disconnect

The entire process is also called an HTTP transaction

Specific implementation process

The DNS

DNS is a domain name resolution system, which stores the corresponding relationship between IP address and domain name. For example, if you enter baidu’s website www.baidu.com, it is not the real address of Baidu, but only a domain name. We can get the IP address of baidu website server through DNS resolution.

A TCP connection

After the DNS is resolved, the IP address of the server is obtained. At this time, the channel between the browser and the server needs to be established. The TCP protocol needs to be used for communication, and then the data can be transmitted. A TCP connection is full-duplex, which means that data reads and writes between the two parties can be performed through the same connection. To ensure the reliability of the two parties, TCP adopts the three-way handshake policy when the two parties establish a connection. The three-way handshake is as follows

  • The client sends a SYN request packet to the server and then enters the SYN_send state, waiting for the server’s response (first handshake).
  • After receiving the SYN packet from the client, the server sends an ACK message to confirm the SYN packet. You also send your own SYN request. The server puts the above information into a packet segment (SYN+ACK packet segment) and sends it to the client. At this point, the server enters the SYN_RECV state. (Second handshake)
  • After receiving a packet containing the SYN+ACK field, the client sends an ACKNOWLEDGEMENT packet containing the ACK field to the server to complete the third handshake

Sends the HTTP request and the server processes the request

Sending HTTP requests is the process of constructing HTTP request packets and sending them to the specified port of the server through TCP. The server then processes the request and returns an HTTP message, which is how the server sends the group data to the browser.

The browser parses the rendered page

The basic process of browser rendering is as follows: parse HTML files to build a DOM tree -> build a Render tree -> layout the render tree -> draw the render tree

  • First, the browser parses the HTML file into a DOM tree. The DOM tree is built through a deep traversal process, which means that the sibling nodes of the child node are not laid out until all the child nodes are laid out.
  • Then build the CSS into a CSS rule tree.
  • Build the Render tree from the DOM tree and the CSS rule tree (no header tags or display: None tags appear in the Render tree).
  • The Render tree is generated without the browser knowing exactly where each node is in the browser. Then enter the Layout Render tree. Layout and determine the actual position of each node in the browser, width, height, color, etc.
  • The final step is to draw the Render tree. The browser draws the render tree that is laid out.

disconnect

The process of breaking a TCP connection is similar to the process of establishing a connection, except that the middle two parts do not always move in one step, so it is divided into four actions, Wave (fin) – Smile (ACK) – wave (fin) – smile (ACK). If the client is compared to Party A and the server is compared to Party B, when Party A sends a disconnection request, Party B receives the disconnection request; Party B may still have data in transmission, so party B cannot immediately disconnect. In the same way, Party A can not be disconnected. All it takes is four “waves.”