The whole process

  1. DNS Domain name Resolution (IP address)
  2. Establishing a TCP connection (three-way handshake)
  3. Sending HTTP requests (requesting data)
  4. Receive the response data and load the parse (generate DOM CSSOM)
  5. Render Tree browser render to page (generate the redering Tree to automatically reorder the page)
  6. Disconnect (wave four times)

DNS Domain name Resolution

The first step is to find the IP address corresponding to the domain name. First, the browser searches the local browser cache -> local DNS cache -> local hosts file mapping based on the URL address. If not, the browser sends a domain name resolution request to the preferred DNS server configured locally for iterative query. Find the IP addresses in the order of root domain server -> top-level domain,.cn-> layer 2 domain, and hb.cn -> subdomain www.hb.cn

Image resolution

Establishing a TCP Connection

Obtain the IP address of the domain name and set up a TCP connection through the IP address

Three handshake process

First handshake: The client sends a request packet with the SYN of the same part set to 1 and a random number N as the start number

Second handshake: The server receives the request, agrees to the handshake information, allocates a cache for the TCP connection, and returns a response packet. The synchronization of the response packet is set to SYN = 1, ACK = 1, ACK = n+1, and generates a random start sequence number K

Third handshake: After receiving the response information, the client sends another packet with the same part: SYN = 0 ACK = 1. Confirm that the ACK segment is the serial number k+1 returned by the server and the random serial number n+1 generated by the client (data can be attached).

HTTP request and response

The request response details are listed at....Copy the code

Load and parse the HTML

The Html document is loaded and parsed from top to bottom, and the parsing process builds the document into a DOM tree

The loading process

When encountering resources such as pictures and videos, the browser sends an asynchronous request to download the resources

Encountered JS file suspends loading and parsing of HTML page until JS is loaded and executed (JS and HTML load parsing are on the same thread)

CSS loading does not affect DOM load parsing and the CSS file is parsed into a CSSOM rule tree

Generate render tree

Create a Rendering Tree by combining DOM Tree and CSSOM rule Tree

Each node in the render tree is a render object

Render object: a rectangle containing various attributes such as style, size, position, etc. (note: invisible elements in the DOM tree are not built into the render tree. Example: display: None)

After the render tree is built, the page is laid out and rearranged (rearranged/rewound) according to the size of the render object.

When the layout is complete, traverse the render tree and call the render object’s Paint method to draw all render nodes onto the page (redraw).

At this point the rendering of the page is almost complete

Disconnect (wave four times)

This is just a quick summary of urL-to-page rendering

There are a lot of places that I will blog about later

1. What is the function of the triple handshake and why is it necessary

2, HTTP request process

3, DOM Tree, CSSOM rule Tree and Rendering Tree

4. What optimizations do browsers make when DOM and CSSOM parse renderings and load JS files? Is there any way to optimize JS loading to block DOM rendering?

5. Reflow (rearrangement), redraw and how to optimize

6. Disconnecting the TCP connection and waving four times