From entering the URL to the completion of the page rendering

From entering the URL to the completion of the page rendering

Involve knowledge of the network, the working principle of the browser, etc.

Pre-knowledge

Browser process structure

Browser进程
  负责协调、主控，包括地址栏、书签、历史栈。

GPU进程
  负责整个浏览器界面的渲染

网络进程
  负责发起接收网络请求

插件进程
  控制网页中使用到的插件 如flash
  
渲染器进程
  默认使用（Process-per-site-instance）模式
  四种进程模式：
    Process-per-site-instance: 访问不同站点和同一站点的不同页面都会创建新的进程
    Process-per-site: 同一站点使用同一进程
    Process-per-tab: 一个tab使用一个进程
    Single process: 浏览器引擎和渲染引擎共用一个进程

1. URL

Contains: a string of protocol name, domain name, port number, path, query or other fragments

Two, cache

The browser checks the cache before making a request, which are strong cache and negotiation cache

Strong cache

The browser directly judges the expiration time Expires and cache-control Expires is the absolute server time, and cache-control is the relative time.

Negotiation cache

The browser caches the last-modified and Etag in the response header and writes the modified data in the next request header. The server determines whether to let the browser use the cache by judging the data in the request header.
The browser judges whether to use the local cache by judging whether the HTTP status is 304.

NDS analysis

1. Check the browser DNS cache
2. Check the hosts file
3. The operating system looks up the local DNS server
4. Local DNS lookup root server (local DNS cache IP)

TCP

Three handshake

Used to confirm whether the sending and receiving of both parties is normal

1. The first handshake: establish a connection. The client confirms whether the other party receive 160bc4f5af0722
2. The second handshake: the server confirms the client's receiving capability
3. The third handshake: the client confirms the sending capability of the

HTTP/HTTPS request

HTTP request

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

Request line

Method Request-URL HTTP-Version CRLF

请求方式 请求路径 请求版本 换行
GET index.html HTTP/1.1

Request header

• The request header allows the client to pass the requested additional information and the client's own information to the server.
• Common request headers are: Accept, Accept-Charset, Accept-Encoding, Accept-Language, Content-Type, Authorization, Cookie, User-Agent, etc.
• Accept is used to specify which types of information the client is used to accept. Accept-Encoding is similar to Accept in that it is used to specify the accepted encoding method. The Connection setting to Keep-alive is used to tell the client that the TCP connection does not need to be closed after the end of this HTTP request, so that the same TCP channel can be used for the next HTTP request and save the time of TCP connection establishment.

Request body

When using methods such as POST, PUT, etc., it is usually necessary for the client to pass data to the server. These data are stored in the request body. There are some information related to the request body in the request header, for example: the requested data format is json. At this time, you need to set Content-Type: application/json.

HTTPS request

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

1. The browser carries the encryption method to request the public key
2. The server returns the public key
3. The browser checks the certificate through ca
4. The browser generates the key through the public key + random number
5. The server checks the secret key and the random number through the private key
6. Start communication

response

Universal head

Request Url: 请求的web服务器地址
 
Request Method: 请求方式
（Get、POST、OPTIONS、PUT、HEAD、DELETE、CONNECT、TRACE）
 
Status Code: 请求的返回状态码，如200代表成功
 
Remote Address: 请求的远程服务器地址（会转为IP）

1xx: Indication information-indicates that the request has been received and continues to be processed.

2xx: Success-indicates that the request has been successfully received, understood, and accepted.

3xx: Redirection-to complete the request must take further action.

4xx: Client error-The request has a syntax error or the request cannot be fulfilled.

5xx: server-side error-the server failed to fulfill a legitimate request.

The more common status codes encountered in normal times are: 200, 204, 301, 302, 304, 400, 401, 403, 404, 422, 500

Response header

• Common response header fields are: Server, Connection....
• The text information returned by the server to the browser, usually HTML, CSS, JS, pictures and other files are placed in this part.

Browser parsing and rendering

1. Parse html and generate DOM tree
2. Parse CSS and generate CSS rule tree
3. Synthesize CSS and DOM tree, generate Render tree
4. Layout Render tree (layout/reflow), responsible for the calculation of the size and position of each element
5. Draw the render tree (paint), draw the page pixel information
6. The browser sends the information of each layer to the GPU, and the GPU merges the layers and displays it on the screen

Parse html tags and generate DOM tree

Through grammatical analysis, the identified tags are constructed into a dom tree, and a document object is created, and the document is used as the root node of the DOM tree, and nodes are constantly added.

When encountering network resources such as pictures and CSS, the resources that need to be loaded through the network or cache will not prevent the html parsing, because these resources will not affect the DOM generation.

When encountering the script tag, because the browser does not know whether js will change the HTML structure of the current page (for example, the current DOM parsing becomes meaningless when document.write('xxx') is called for modification), so Stop parsing the DOM and instead load and execute JS resources.

Script does not necessarily block HTML parsing, just add defer or async attributes to avoid DOM generation problems caused by blocking.

defer 使得脚本会在dom完整构建之后执行；
async 标签使得脚本只有在完全available才执行，并且是以非阻塞的方式进行的

Parse CSS tags and build CSSOM tree

The browser will parse all styles into style structures (including css styles and browser default styles)

Styles that the browser cannot recognize cannot be parsed

ps: Although CSS will not block HTML parsing, it will block rendering (such as js loading first will cause the css loaded later to be blocked, and finally result in a white screen of the page that is blocking rendering)

Generate render tree

1. Calculate CSS style
2. Build the render tree
3. Layout (reflow, Layout, Reflow), the main positioning coordinates and size, whether to wrap, various position overflow z-index properties
4. Draw (Repaint), draw the image

Rendering process

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

Detailed process

The network thread in the browser process passes the obtained html data to the main renderer process through IPC. The main thread parses the html into a DOM tree and then performs style calculations. Based on the DOM tree and generated style generates Layout Tree . Traverse Layout Tree generate rendering sequence table, then traverse LayoutTree generate LayerTree and then the main thread passes the LayerTree and drawing order information to the compositor thread. The compositor thread passes the layer to the truncation thread for truncation and truncation. The synthesizer obtains the draw quads block information generated by the truncation thread. According to the information, the synthesizer obtains a synthesizer frame, and IPC , and the browser process passes it to the GPU for rendering.

When the element size and position are changed, the style calculation will be re-calculated, the layout ( Layout ) drawing ( Paint ) and all subsequent processes be rearranged as 160bc4f5af0e87.

When changing the color attribute of an element, the layout will not be triggered again ( Layout ), but the style calculation will still be re- , which is 160bc4f5af0ea9.

Reflow and redraw

Layout, also known as Reflow, is reflow. Generally means that the content, structure, position or size of the element has changed, and the style and rendering tree need to be recalculated

Repaint, that is, repaint. It means that when the change of the element only affects some appearance of the element (for example, background color, border color, text color, etc.), you only need to apply the new style to paint