A piece of insight from the inputURLThe process to page rendering

From entering a URL to rendering a page requires multiple processes in Chrome, so let’s talk about the current multi-process architecture of Chrome.

A,Chromearchitecture

Chrome currently adopts a multi-process architecture, which can be divided into five main categories: Browser main process, GPU process, NetWork process, multiple rendering process and multiple plug-in process.

• Browser process. It is mainly responsible for interface display, user interaction, sub-process management, and storage.
• Rendering process. The core task is to makeHTML,CSS 和 JavaScriptConvert to web pages that users can interact with, a typography engineBlinkandJavaScriptengineV8Are running in this process, and by default,ChromeFor eachTabTag creates a rendering process. For security reasons, renderers are run in sandbox mode.
• GPUprocess. In fact,ChromeNot when we first launchedGPUThe process. whileGPUThe original purpose of using is to achieve3D CSSThe effect is only subsequent pages,ChrometheUIThe interface is selectedGPUTo draw, which makesGPUBecome a common browser requirement. In the end,ChromeIt is also introduced on its multi-process architectureGPUProcess.
• Network process. It is responsible for loading web resources on the page. It used to run as a module in the browser process until recently, when it became a separate process.
• Plug-in process. It is mainly responsible for the running of plug-ins. Plug-ins are prone to crash. Therefore, plug-ins need to be isolated through the plug-in process to ensure that the plug-in process crash does not affect the browser and page

With Chrome’s multi-process architecture, you’ll be able to understand the process from entering urls to rendering, which is divided into navigation and rendering stages.

Second, the navigation stage

ⅰ. Browser main process

1. User inputURL

• **1, ** browser process checkurl, assembly agreement, constitute completeurl, there are two situations:
  • Enter search content: The address bar will use the browser’s default search engine to synthesize a new one with search keywordsURL.
  • The input is a requestURL: The address bar will add protocol to this section of content according to the rules and synthesize it into a complete oneURL;
• ** Browser processes communicate through interprocess communication (IPC) theurlThe request is sent to the network process;

ⅱ. Network processes

2.URLRequest process

• **3. ** The network process receives the messageurlAfter the request, check whether the local cache has cached the requested resource, and return the resource to the browser process if so.

This involves the browser and HTTP protocol cache policy issues, interested can see this article: a detailed explanation of the HTTP protocol

• **4, ** Prepare IP addresses and ports: Search the cache for DNS resolution before using the DNS server.

  • Browser cache;
  • Native cache;
  • hostsFile;
  • Router cache;
  • ISP DNSThe cache.
  • DNSRecursive query (localDNSServer -> PermissionsDNSServer -> Top levelDNSServer – >13Taiwan rootDNSThe server)

• **5, ** waiting TCP queue: the browser maintains a maximum of six TCP connections for each domain name. If all six TCP connections are busy when an HTTP request is made, the request will be queued. Solution:

  • Adopt domain name sharding technology: put the resources of one site into multiple (CDN) domain name.
  • Upgrade toHTTP2There is no6aTCPConnection limits;

• ** Establish TCP connection through three-way handshake:

  

  • ** The first time: ** The client sends a synchronization packet to the serverTCPHeader in: flag bit: ** synchronizationSYN* * for1, indicating that this is a packet requesting to establish a connection. The serial numberSeq=x.xIs the sequence number of the first byte of data to be transmitted, followed by entrySYN-SENTState;

  If the flag bit value is 1, the flag bit is valid.

  • ** The second time: ** The server received the packet according toSYNThe flag bit is judged to be a request to establish a connection, and an acknowledgement packet is returned with the flag bitSYN=1.ACK=1And the serial numberseq=yAnd confirm,ack=x + 1Indicates that the client has received the transmissionxByte data and hope next time fromx+1Bytes start to pass and enterSYN-RCVDState;

  Here we need to distinguish the flag bit ACK and the confirmation number ACK;

  • ** Third time: ** After the client receives the packet, it sends a confirmation packet to the server, indicating the bitACK=1And the serial numberseq=x+1And confirm,ack=y+1And then enterESTABLISHEDState;

  After receiving the message, the server enters the ESTABLISHED state. The TCP connection is ESTABLISHED and data can be transmitted.

  • Why the third wave? Avoid wasting resources caused by server waiting. Specific reasons are as follows:

  If there is no last packet confirmation (third handshake), A sends A request packet to establish A connection first, but is detour due to network reasons. User A does not receive the confirmation packet from user B after the preset timeout period.

  A second request packet is sent to establish A connection, this time the network is free, and B’s confirmation packet soon reaches A. So A and B start transmitting data;

  After A while, the request packet sent by A for establishing A connection for the first time reaches B, and B thinks it is establishing A connection again, so it sends another confirmation packet. Since A has already received one confirmation packet, it will ignore the second one sent by B. However, after B sends the confirmation packet, it has to wait for A’s reply, and A will never reply.

  This causes a waste of server resources, in which case the computer may stop responding.

• ** Build and send HTTP request information;

• ** The server side processes the request;

• **9, ** Client processing response, first check the server response packet status code:

  • If it is301/302Indicates that the server has changed its domain name and needs to be redirectedLocationField reads the redirect address, and then initiates a new oneHTTPorHTTPSRequest, jump back to number one4Step.
  • If it is200, you checkContent-TypeField, with a value oftext/htmlThat is theHTMLThe document isapplication/octet-streamFile download.

• ** the request ends when the header field is genericConectionnotKeep-AliveWhen, that is notTCPLong connection, by four wave disconnectionTCPConnection:

• ** First time: ** The client (actively disconnects) sends a packet to the server with flag bitsFIN=1And the serial numberseq=uAnd stop sending data;
• ** The second time: ** The server cannot close the connection immediately after receiving the packet because it still needs to transmit the data. It returns a flag bit firstACK=1And the serial numberseq=vAnd confirm,ack=u+1Data packets of;
• ** Third time: ** When the server is ready to disconnect, it returns a packet with flag bitsFIN=1, markACK=1And the serial numberseq=wAnd confirm,ack=u+1;
• ** Fourth time: ** The client returns a flag bit after receiving the packetACK=1And the serial numberseq=u+1And confirm,ack=w+1Packet of data.

This disconnects the TCP connection with four waves of the hand.

For details, see “Three-way handshake” and “four-way handshake” (part 1).

• Why does ** wave four times? ** The server could not be disconnected immediatelyFINRelease the connection packet andACKConfirm that the received packet is transmitted in two times, that is, the second and third wave.

3. Prepare the rendering process

• **11, ** Prepare render process: the browser process checks the currenturlWhether it is the same as the root domain of the page that opened the rendering process before, if the same, then reuse the original process, if not, then start a new render process;

4. Submit documents

• **12, ** Submit documents:
  • When the renderer process is ready, the browser sends a “submit document” message to the renderer process. After receiving the message, the renderer process establishes a “pipeline” with the network process to transfer data.
  • After receiving the data, the renderer sends a “confirm submit” message to the browser
  • After receiving the confirmation message, the browser process updates the browser interface status, including the security status, URL of the address bar, historical status of forward and backward operations, and Web page updates

Third, the rendering stage

In the rendering stage, the rendering line is used to complete the rendering of the page with the cooperation of the main thread of the rendering process and the synthetic thread.

ⅲ. Rendering process

The main thread part of the rendering process

5. BuildDOMThe tree

• 13. Decompress the requested data, then the HTML parser splits the HTML byte flow word into tokens, and then generates nodes, which are finally parsed into a browser-recognized DOM tree structure.

  You can use the Console option of the Chrome debugger to open the Console and type Document to see the DOM tree.

The rendering engine also has a security check module called XSSAuditor that checks for lexical security. After the toener parses the tokens, it checks whether the modules are secure, such as referencing external scripts, complying with CSP specifications, and making cross-site requests. XSSAuditor intercepts the script or the download task if non-conforming content occurs.

When the HTML is parsed for the first time, the renderer starts a pre-parsed thread. When it encounters JavaScript and CSS references embedded in the HTML document, the renderer synchronously downloads these files in advance, depending on the time of the last file to be downloaded.

6. BuildCSSOM

• The CSS parser converts CSS to browser-aware styleSheets (CSSOM), which can be viewed by typing document.styleSheets on the console.

  Consider blocking, because JavaScript has the ability to modify CSS and HTML, so wait until the CSS file is downloaded and the CSSOM is generated, then execute the JavaScript script, and then continue building the DOM. Because of this blocking, the parse screen is blank;

Optimization scheme:

• removejsandcssDownload files from: InlineJavaScript, inlineCSS;
• Minimize file size: such as bywebpackTools such asremoveunnecessaryannotationAnd,The compressionjsfile;
• Will not be inDOMOperation orCSSstyle-modifiedJavaScriptOn the tagsyncordeferAsynchronous introduction;
• Use media to query properties: will be bigCSSA document divided into several different usesCSSFiles are loaded only in certain scenariosCSSFile.

You can use DOMContentLoaded in the Network panel of the browser debugger to see how long it takes to generate the DOM tree.

7. Style calculation

• ** convert attribute values in the stylesheet to standardize them. Such as theemconvertpx.colorconvertrgb;
• **16, ** calculationDOMThe specific style of each node in the tree is followed hereCSSInheritance and cascading rules of Can be achieved byChromeDebug toolElementsOf the optionsComputedView the final style of a label.

8. Layout

• ** Create a layout tree that traverses all nodes in the DOM tree, removing all hidden nodes (e.g., head, display: None) and leaving only visible nodes in the layout tree.

• ** Calculates the coordinate positions of nodes in the layout tree (complicated, not expanded here);

9. The layered

• **19, ** layer the layout tree and generate a hierarchical tree (Layer Tree), can passChromeDebug toolLayerOption view. Each node in a hierarchical tree belongs directly or indirectly to a layer (if a node has no corresponding layer, then it belongs to the parent node’s layer).

10. Layer drawing

• ** generates a draw list (i.e., draw instructions) for each layer and submits it to the composition thread. All of the above operations are done in the main thread of the renderer process. After submission to the composite thread, the main thread is not blocked.

The composition thread portion of the renderer process

11. Slice and dice

The composition thread will cut the layer into fixed size blocks (256×256 or 512×512) and then draw the blocks close to the viewport first, which can greatly speed up the page display speed;

Ⅳ.GPUprocess

12. Rasterization operation

• 22,inRasterize thread poolsLt.The mapConverted toThe bitmap“Is usually used in this procedureGPUTo speed up the generation, useGPUThe process of generating a bitmap is calledFast rasterizationOr,GPURasterized, the generated bitmap is saved inGPUMemory.

ⅴ. Browser main process

13. Synthesis and display

• **23, ** Composition: Once all blocks have been rasterized,Synthesis of the threadIt combines them into a single image and generates a command to draw a block –“DrawQuad“And then submits the command to the browser process.

Note: the compositing process is done in the renderer’s compositing thread and does not affect the main thread of the renderer;

• **24, ** display: there is a browser process calledvizComponent to receive messages from the composite threadDrawQuadCommand, and then according toDrawQuadCommand to draw the contents of their page into memory, and finally display the memory on the screen.

At this point, through this series of stages, the HTML, CSS, JavaScript, etc., written by the browser will display a beautiful page.

Resources: How browsers work and practice