From entering the URL until the page is rendered

Knowledge of network and browser working principles.

The preface knowledge

Browser process structure

Browser process is responsible for coordination, control, including the address bar, bookmarks, history stack. The GPU Process is responsible for rendering the entire browser interface. The network Process is responsible for initiating and receiving network requests. The plug-in Process controls plug-ins used in web pages, such as the Flash renderer. Process-per-site-instance: new processes are created when visiting different sites and different pages on the same site. Process-per-site: the same Process is used on the same site. A TAB uses a Single process: the browser engine and the rendering engine share a Single processCopy the code

A, URL

A string containing: protocol name, domain name, port number, path, query, or other fragment

Second, the cache

The browser checks the cache, strong cache and negotiated cache, before making a request

Strong cache

The browser directly determines HTTP header Expires and cache-control expiration times, where Expires is the absolute server time and cache-Control is the relative time.

Negotiate the cache

The browser caches last-Modified and Etag in the response header and writes the changes to the next request header. The server determines whether to allow the browser to use the cache based on the data in the request header. The browser determines whether to use local caching by determining whether the HTTP status is 304.

NDS parsing

  1. Check the browser DNS cache
  2. Checking hosts Files
  3. The operating system searches for the local DNS server
  4. Local DNS lookup root server (local DNS cache IP)

TCP

Three-way handshake

It is used to check whether the sending and receiving is normal

  1. First handshake: Establish a connection. The client confirms whether the peer is allowedreceiveAbility to
  2. Second handshake: Server confirms clientreceiveAbility to
  3. Third handshake: The client confirms the serversendAbility to

The HTTP/HTTPS requests

The HTTP request

Send information in the form of a request line + request header + request body

The request line

Method request-url http-version CRLF Request mode Request path Request Version NewlineGET index.html HTTP / 1.1

Copy the code

Request header

  • The request header allows the client to pass additional information about the request and the client itself to the server.

  • Common request headers include Accept, accept-charset, accept-encoding, accept-language, Content-Type, Authorization, Cookie, user-agent, and so on.

  • Accept is used to specify what type of information the client is used to Accept. Accept-encoding is similar to Accept in that it specifies the accepted Encoding. If the Connection is keep-alive, the client does not need to close the TCP Connection after the HTTP request is completed. In this way, the next HTTP request uses the same TCP channel, saving the time for establishing a TCP Connection.

Request body

When using POST, PUT, and other methods, the client is usually required to pass data to the server. This data is stored in the request body. The request header contains some information related to the request body, for example, the requested data format is JSON. You need to set content-Type: application/json.

HTTPS requests

The method of encrypting data using a symmetric key generated by asymmetric encryption

  1. The browser carries an encrypted request for the public key
  2. Server returns public key
  3. The browser checks the certificate through the CA
  4. The browser generates a key using a public key plus a random number
  5. The server uses the private key to check the key and random number
  6. Start communication

The response

General head

Request Url: address of the requested Web server Request Method: Request Method (Get, POST, OPTIONS, PUT, HEAD, DELETE, CONNECT, TRACE) Status Code: Remote Address: the Address of the requested Remote server (which will be converted to IP)Copy the code

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.

Usually encountered more common status code :200, 204, 301, 302, 304, 400, 401, 403, 404, 422, 500

Response header, response message

  • Common response header fields are: Server, Connection… .

  • The text information returned by the server to the browser, usually HTML, CSS, JS, images and other files are stored in this section.

Browser parsing render

  1. Parsing HTML to generate a DOM tree
  2. Parses the CSS and generates the CSS rule tree
  3. Synthesize CSS and DOM tree to generate Render tree
  4. Render tree (Layout /reflow), responsible for each element size, location calculation
  5. Render the Render tree (paint), which draws the page pixel information
  6. The browser sends each layer of information to the GPU, which merges the layers and displays them on the screen

Parsing HTML tags to generate a DOM tree

The identified tags are constructed into a DOM tree through syntax analysis, and the Document object is created, and the document is taken as the root node of the DOM tree, and nodes are continuously added.

When it comes to web resources such as images and CSS, resources that need to be loaded through the network or cache do not prevent HTML parsing because they do not affect DOM generation.

When script tags are encountered, since the browser does not know if JS will change the HTML structure of the current page (such as when document.write(‘ XXX ‘) is called to modify the current DOM parsing becomes meaningless), it will stop parsing the DOM and load the executing JS resource instead.

Script doesn’t necessarily block HTML parsing, and simply adding defer or async properties can avoid blocking DOM generation problems.

Defer causes the script to execute after the DOM is fully built; The async tag causes scripts to be executed only when fully available and in a non-blocking mannerCopy the code

Parse CSS tags to build CSSOM trees

The browser interprets all styles as style structures (both CSS styles and browser default styles)

Styles that the browser does not recognize cannot be parsed

Ps: CSS does not block HTML parsing, but it will block rendering (for example, js loading will cause the CSS to be blocked after loading, which will eventually lead to a blank page, that is, blocking rendering).

Generate render tree

  1. Computing CSS styles

  2. Building a Render tree

  3. Layout (backflow, Layout, Reflow), main location coordinates and size, whether to wrap, various position overflow Z-index attributes

  4. To draw (redraw, Repaint), to draw an image

Rendering process

  1. The main thread generates the Layout Tree and confirms the drawing order
  2. The main thread passes the above information to the synthesizer thread
  3. The synthesizer thread deletes each layer and generates a synthesizer frame
  4. The synthesizer is passed to the browser process via IPC
  5. The browser process passes the synthesizer frame to the GPU and renders it to the screen
  6. Repeat the process as the page changes

Detailed process

The network thread in the browser process will transfer the data of the OBTAINED HTML to the main process of the renderer through IPC. The main process will parse the HTML into DOM Tree and conduct style calculation. Layout Tree is generated according to DOM Tree and generated style, and the rendering sequence table is generated by traversing Layout Tree. Then the main thread passes the LayerTree and the drawing order information to the synthesizer thread, and the synthesizer thread passes the layer to the degration thread for degration. After degration, the synthesizer gets the draw Quads graph block information generated by the degration thread. According to the information synthesizer, a synthesizer frame is obtained and passed to the browser process via IPC, which is passed to the GPU for rendering.

When changing the size and position of an element, it restyles the calculation, paints the Layout, and everything else.

Changing an element’s color attribute does not retrigger the Layout, but it does restyle the calculation, that is, redraw.

Reflux and redraw

Layout, also known as Reflow, means back flow. This typically means that the content, structure, position, or size of an element has changed, requiring recalculation of styles and rendering trees

Repaint. Meaning that the changes to the element only affect the appearance of the element (for example, the background color, border color, text color, etc.), then simply apply the new style to the element