Entering the URL in the browser to display the web page consists of the following parts: Network communication and page rendering The communication between network devices on the Internet follows the TCP/IP protocol. When the TCP/IP protocol family is used for network communication, the devices communicate with each other in a hierarchical order. The layers in descending order are application layer, transport layer, network layer, and data link layer. The sending end goes down from the application layer, and the receiving end goes down from the data link layer

1. Enter the URL in the address box of the browser and press Enter

Our common RUL looks like this :www.baidu.com. The domain name usually consists of three parts: the protocol domain name port number

  1. Protocol: HTTP protocol, HTTPS protocol, FTP protocol, FILe protocol
  2. Domain name: The middle part of the URL is the domain name or IP address
  3. Port number: Usually hidden by default HTTP port number is 80 HTTPS port number is 443

Cross-domain When a front-end data request is made, a cross-domain request exists because the browser has a different same-origin policy, protocol, domain name, and port number. The cross-domain request needs to be processed. For the related cross-domain method, click p1-jj.byteimg.com/tos-cn-i-t2…

2.DNS domain name resolution

The unique identification of every computer on the Internet is its IP address, but IP addresses are not easy to remember. Users prefer to find other computers on the Internet using easy-to-remember sites, such as baidu’s. Therefore, Internet designers need to make a tradeoff between user convenience and usability, and this tradeoff is a url to IP address translation, the process is DNS resolution, that is, the implementation of the url to IP address translation

The parsing process

DNS resolution is a recursive query process.

google.com
www.google.com
The actual website is www.google.com
google.com
www.google.com

DNS optimization

DNS cache and DNS load balancing

DNS cache

DNS has multiple levels of cache, sorted by distance from browser: browser cache, system cache, router cache, IPS server cache, root DNS cache, top-level DNS cache, and primary DNS cache.

  1. Type :chrome:// DNS/into your Chrome browser and you can see chrome’s DNS cache.

  2. The system cache is stored in /etc/hosts(Linux) :

DNS Load Balancing

Behind the real world of the Internet there are hundreds of servers, large websites and even more. But from the user’s point of view, all it needs to do is process his request, and it doesn’t matter which machine does it. DNS can return the IP address of a suitable machine to the user, for example, according to the load of each machine, the geographical distance of the machine from the user, etc. This process is DNS load balancing, also known as DNS redirection

3. Establish the TCP connection

After the DNS domain name is resolved, the server IP address is obtained. After the IP address is obtained, a connection is established using TCP. The connection is mainly through the three-way handshake.

  1. First handshake: When establishing a connection, the client sends a SYN packet (SYN = J) to the server and enters the SYN_SENT state, waiting for confirmation from the server.
  2. Second handshake: After receiving a SYN packet, the server must acknowledge the client’s SYN (ACK = J +1) and send a SYN packet (ACK = K). In this case, the server enters the SYN_RECV state.
  3. Third handshake: After receiving the SYN+ACK packet from the server, the client sends an ACK packet (ACK = K +1) to the server. After the packet is sent, the client and the server enter the ESTABLISHED state (TCP connection is successful) and complete the three-way handshake.We need to understand the meaning of ACK and SYN

    After completing the TCP connection, enable the request to the server

4. Send a request to the server

A complete HTTP request consists of three parts: the start line, the header, and the body.

5. The server receives the response

After receiving the HTTP Request from the browser, the server encapsulates the received HTTP packet into an HTTP Request object and processes it through different Web servers. The processing result is returned as an HTTP Response object, including the status code, Response header, and Response packet. The status code mainly includes the following parts:

1XX: indicates that the request has been received and processing continues. 2xx: success – The request is successfully received, understood, or accepted. 3xx: Redirect – Further action must be taken to complete the request. 4XX: client error – The request has a syntax error or the request cannot be implemented. 5xx: Server side error – The server failed to fulfill a valid request.

Response headers are mainly composed of cache-control, Connection, Date, Pragma and so on. The response body is the information returned by the server to the browser, which consists of HTML, CSS, JS, and image files.

6. Page rendering

If the content of the response is an HTML document, it needs to be parsed and rendered to the user by the browser. There are two aspects to the whole process: parsing and rendering. Before rendering the page, you need to build the DOM tree and the CSSOM tree. Before the browser receives the complete HTML file, it renders the page, and when it encounters an external linked script tag or style tag or image, it sends an HTTP request to repeat the above steps. After receiving the CSS file, the rendered page will be re-rendered, adding their due style, and the image file will be displayed immediately after loading the corresponding location. Redraw or rearrange pages may be triggered during this process. There are two important concepts involved: Reflow and Repaint.

  1. Reflow, also known as Layout, usually means that the content, structure, position, or size of an element has changed, requiring recalculation of the style and rendering tree.
  2. Repaint: when the changes to an element only affect the appearance of the element (e.g. background color, border color, text color, etc.), you simply apply a new style to the element. This process is called Repaint.

So the cost of Reflow is much higher than the cost of Repaint. Every node in the DOM tree has a reflow method, and a node’s reflow is likely to result in reflows for its children, or even its parents, and siblings.

7. Close the TCP connection or keep it open

Close the connection with four waves (FIN ACK, ACK, FIN ACK, ACK).

  1. First wave: The Client sends a FIN to stop data transmission from the Client to the Server, and the Client enters the FIN_WAIT_1 state.
  2. Second wave: After receiving a FIN, the Server sends an ACK to the Client. The ACK sequence number is +1 (the same as that for SYN, one FIN occupies one sequence number). The Server enters CLOSE_WAIT state.
  3. Third wave: The Server sends a FIN to disable data transfer from the Server to the Client, and the Server enters the LAST_ACK state.
  4. Fourth wave: After receiving the FIN, the Client enters the TIME_WAIT state and sends an ACK to the Server to confirm that the FIN number is +1. The Server enters the CLOSED state and waves four times.