The flow chart

Some preparatory work

HTTP1.1 Find strong cache: check if there is a resource in the browser cache, if there is a copy of the resource, and end the request directly

1.DNS domain name resolution

After entering the domain name, the client first searches the local hosts file (the hosts file is rarely modified by users) to check whether the corresponding domain name and IP address exist in the hosts file. If yes, directly initiate the request. If no, search the DNS server to obtain the corresponding IP address

2. Establish the TCP connection

TCP is a connection-oriented, reliable, byte stream - based transport-layer communication protocolCopy the code

After receiving the IP, the client can establish a TCP connection with the server. A three-way handshake is required to establish a TCP connection

  1. The client sends a SYN packet to the server
  2. The server sends a SYN/ACK packet to the client
  3. The client sends an ACK packet to the server

The three-way handshake is essentially to make sure that both the client and the server are receiving and sending properly

  • Chrome requires a maximum of six TCP connections in the same domain, or more. The rest will have to wait

3. Send an HTTP request

Once the TCP connection is established, you can send an HTTP request to the server. An HTTP request consists of three parts (request line, request header, and request body)

  1. Request line GET/index.html HTTP1.1
  2. Request Headers
  3. The only common scenario where the Request Body exists under the POST method is a form submission

4. The server processes the request

After receiving the HTTP request from the client, the server starts processing the request (Apache, Nginx, IIS, etc.) and parses the user request and performs a series of operations as shown in the figure below

5. Return the response result

After processing the request, the server passes the data to the browser. The response result also has three parts (response row, response header, and response body)

  1. The response line HTTP/1.1 200 OK consists of the HTTP protocol version, status code, and status description.
  2. Response Headers
  3. The body of the response is typically an HTML file

6. Close the TCP connection

Should I close the TCP connection after the response is returned? The answer is not necessarily

Connection:Keep-Alive
Copy the code

If the preceding fields are displayed in the browser or server header, the TCP connection is still maintained. Maintaining the TCP connection saves the time for establishing a TCP connection in the next request and improves the resource loading progress.

Four waves are required to close a TCP connection

  1. The client sends a FIN packet to the server.
  2. The server sends an ACK packet to the client (yes, yes! Let me see if I have any more data to upload.
  3. The server sends a FIN packet to the client.
  4. The client sends an ACK packet to the server (yes, yes!).

7. The browser parses the HTML(to get the styles of the DOM tree and elements in the DOM tree)

7.1 Building a DOM Tree

The DOM tree is essentially adocumentIs the multi-fork tree of the root nodeCopy the code

The browser converts the HTML string into a meaningful and easy to manipulate data structure => DOM tree

  • Whereas normal programming languages are context-free grammars, HTML is context-free
  • Therefore, the HTML parsing algorithm is divided into two stages: 1. Tokenization 2

7.2 Style Calculation

  • (1) Format the stylesheet to convert the CSS text to a structured object styleSheets(you can view it in the console by typing Document. styleSheets)
  • CSS text has many attribute values such as 2em, Blue and bold, which are not easily understood by the rendering engine. All values need to be converted to standardized computed values that the rendering engine can easily understand. (a)
  • (3) Computing the specific style of each node in the DOM tree mainly involves two rules of CSS :1. Inheritance 2. Cascading inheritance: The parent element sets some attributes, and the child element can also be used, such as color, font, font size and other attributes can be inherited. Cascading: Cascading is a basic feature of CSS. It is an algorithm that defines how to combine attribute values from multiple sources. It is at the heart of CSS, which is highlighted by its full name, cascading style sheets. The final output is the style of each DOM node and is stored in the structure ComputedStyle (window.getComputedStyle).

8. Browser layout rendering (calculating the geometry of visible elements in the DOM tree)

8.1 Building a Layout tree

  • Add visible elements from a DOM Tree to a Layout Tree that contains only visible elements

8.2 Layout Calculation

  • Layout tree => Layout operation => Calculate the layout tree of node coordinate position

8.3 the layered

  • Calculate the layout Tree of node coordinate position => Explicit composition and implicit composition => Generate Layer Tree

8.4 Layer Drawing

  • Draw each layer in the layer tree to get a draw list. The list contains a set of instructions that record the drawing steps, each of which is a simple drawing operation (draw a rectangle or draw a line).
You can see the Layers panel by using the Chrome developer tool More ToolsCopy the code

8.5 Rasterization (Bitmap generation by GPU)

The rasterization process mainly uses the GPU to speed up the generation, which is sent to the composition thread after completion

8.6 Composition and display

After the rasterization operation is complete, the composite thread generates a draw command, called “DrawQuad”, which is sent to the browser process. The viz component of the browser process receives the command and draws the page contents into memory, which is then sent to the graphics card

When memory is low, the browser is slow to generate images and the images are not sent to the graphics card in a timely manner. The refresh frequency of the display is fixed, generally 60 Hz (60 frames), so there will be a situation of lag

The relevant knowledge

Redraw and reflux TCP three-way handshake four-way wave performance optimization

Refer to the article

“Day dragon eight steps” details what happened after the browser input URL (1.6W words) browser soul ask, can you catch a few? Front-end fundamentals of the browser