Specific steps

1. Enter the URL in the address box of the browser and press Enter. 2. The browser checks whether the current URL is cached and compares whether the cache expires. 3. The DNS resolves the IP address of the URL. 4. Establish a TCP connection based on the IP address (three-way handshake). 5.HTTP initiates a request. 6. The server processes the request, and the browser receives the HTTP response. 7. Render the page and build the DOM tree. 8. Close the TCP connection (wave four times).

A detailed description

1. The HTTP cache has multiple rules, which are divided into two types according to whether a request needs to be re-sent to the server: mandatory cache and comparison cache.

Mandatory cache: cache-control: holds a relative time in max-age. After the browser receives a file, the cache takes effect within the corresponding period of time. If both cache-control and Expires are present, the browser preferentially uses cache-Control Expires: it is an absolute time, the server time. The browser checks the current time and uses the cache file if it hasn't expired. One problem with this method is that the server and client time may be inconsistent, so this field is rarely used. Comparison cache: Last-Modified is a field returned by the server when the resource was first requested, indicating when it was last updated. The if-Modified-since field is sent the next time the browser requests the resource. The server compares the local last-Modified time to if-Modified-since time. If the time is inconsistent, it considers the cache expired and returns a new resource to the browser. If the time is consistent, it returns a 304 status code, allowing the browser to continue using the cache. Etag: The entity identifier (hash string) of the resource, which changes when the content of the resource is updated. The server determines whether the Etag has changed and returns a new resource if it has changed, or 304 otherwise.Copy the code

2. Domain name resolution

Entering the domain name in the address bar is not the actual location of the last resource, the domain name is just a mapping of an IP address.

1. The browser checks whether the local hosts file has the URL mapping. If yes, the browser invokes the IP address mapping to complete domain name resolution. 2. If not, the system searches the local DNS parser cache. If not, the system returns. 3. If the system still does not find the DNS server, the system searches for the local DNS server. 4. Iterate to find the IP address in the order of root domain server > top-level domain. cn > Layer 2 domain name > subdomain nameCopy the code

3. Initiate a TCP three-way handshake

After the domain name is resolved, the IP address of the server is obtained, and the connection is established. This is done by TCP, mainly through the three-way handshake.

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. Layer 2 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. Third handshake: The client receives the SYN_ACK packet from the server and 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) to complete the three-way handshake.Copy the code

4. Establish a TCP connection and send an HTTP request

A complete HTTP request consists of three parts: the request line, the request header and the request body. (I don't want to tell you exactly)Copy the code

5. The server responds to the HTTP request, and the browser receives the response

After receiving the HTTP Request from the browser, the server receives AN HTTP packet encapsulated into an HTTP Request object and processes it through different Web servers. The processed result is returned as an HTTP Response object, including the status code, Response header, and Response packet. Status code mainly includes the following parts: 1: xx instructions - said the request was received, to continue to deal with 2 xx: success - said the request has been successfully received and understood, receive 3 xx: redirect - to complete the request further operations must be conducted 4 xx: client - request grammar errors or request cannot be achieved 5 xx: server error: The server failed to legally implement the request response header mainly consists of cache-control, Connection, date, pragma and so on.Copy the code

6. The browser parses the HTML and renders the page

The browser starts rendering the page before it receives the complete HTML file, and the HTTP request repeats the above steps when it encounters an external linked script or image. After receiving the CSS file, re-render the rendered page and add their corresponding styles. The image file is displayed in the corresponding position immediately after loading. Redraw or rearrange may be triggered during this process.

Reflow: also known as layout, reflow means that the content, structure, position, or size of an element has changed, requiring recalculation of the style and rendering tree. Repaint: When the changes to the element only affect the appearance of the element (e.g. background color, border color, text color, etc.), just apply the new style to the element.Copy the code

7. Close the TCP connection by waving four times

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

Second wave: The server sends an ACK request for disconnection. Third wave: the server sends an ACK request for disconnection. Fourth wave: the browser sends an ACK request for disconnectionCopy the code