First, the browser opens a new TAB page, at least four processes

They are: browser process, network process, renderer process (sandbox environment, TAB pages on the same site share the same renderer process), GPU process; There will also be plug-in processes and so on.

  • Browser processMainly responsible for user interaction, sub-process management and file storage.
  • Network processIs for rendering processes and browser processes to provide network download capabilities.
  • Rendering processIts main responsibility is to parse HTML, JavaScript, CSS, images and other resources downloaded from the Internet into pages that can be displayed and interactive. Because all the contents of the renderer process are obtained through the network, there will be some malicious code to exploit browser vulnerabilities to attack the system, so the code running in the renderer process is not trusted. This is why Chrome makes the rendering process run in a security sandbox, just to keep the system safe.

Two, from the input URL to the page display

1. Enter the URL and press Enter

2. The browser process checks the URL, assembles the protocol, and forms the complete URL

  • 2.1. For search content, the address bar will use the browser’s default search engine to synthesize a new URL with search keywords.

  • 2.2. If the input content complies with URL rules, for example, time.geekbang.org is entered, the address bar will combine this content with the protocol according to the rules and synthesize it into a complete URL, such as time.geekbang.org.

3. The browser process sends the URL request to the network process via interprocess communication (IPC), GET /index.html HTTP1.1

4. After receiving the URL request, the network process checks whether the requested resource is cached in the local cache and returns the resource to the browser process

5. If no, the network process sends an HTTP request to the Web server. The request process is as follows:

  • 5.1 Performing DNS Resolution to Obtain the SERVER IP Address and port number: If the DNS data cache service has cached the current domain name information before, the DNS data cache service directly returns the cached information. Otherwise, a request is made to obtain the IP address and port number resolved based on the domain name. If there is no port number, the default value is 80 for HTTP and 443 for HTTPS. If the request is HTTPS, you need to establish a TLS connection.

  • 5.2 Establishing a TCP Connection with the Server using an IP Address: The FOLLOWING figure shows the TCP connection.

  • 5.3 After the connection is established, the browser constructs the request header, request line and other information, and attaches cookies and other data related to the domain name to the request header, and then sends the constructed request information to the server.

  • 5.4 After receiving the request information, the server generates response data (including the response line, response header, and response body) based on the request information and sends it to the network process

  • 5.5 The network process receives the response header and response information, and parses the response content

6. Network process parsing and response process:

  • 6.1 Checking the status code. If the status code is 301/302, redirection is required and the address is automatically read from Location. Repeat Step 4

  • 6.2 If there is no redirection, the server will determine whether the requested resource is updated according to the if-none-match value in the request header. If there is no update, the 304 status code will be returned, which is equivalent to telling the browser that the previous cache is still available, and no new data will be returned.

  • 6.3 Otherwise, return the new data, the status code of 200, and add a field in the corresponding header if you want the browser to Cache the data: cache-control: max-age =2000

  • 6.4 When data transfer is complete, TCP waves four times to disconnect the connection. If the browser or server adds the following information to the HTTP header, TCP remains connected. Keeping a TCP Connection saves the time for establishing a Connection next time, indicating the loading speed of resources Connection: keep-alive

  • 6.5 The network process will parse the data packet obtained and check the response Type of Content-Type. If it is byte stream Type, the request will be submitted to the download manager. The navigation process ends and no further rendering will be carried out.

7. Prepare the rendering process

  • 7.1 The browser process checks whether the current URL is the same as the root domain name of the previously opened renderer process. If they are the same, the original process will be reused; if they are different, a new renderer process will be started

8. Transfer data and update status

  • 8.1 After the renderer process is ready, the browser process sends a message of “submit document” to the renderer process, and the renderer process receives the message and establishes a “pipeline” for data transmission with the network process.

  • 8.2 After the renderer receives the data, it sends “Confirm submit” to the browser

  • 8.3 After receiving the confirmation message, the Browser Process updates the browser interface status, including security, URL, forward and backward historical status, and Web page update.

9. Rendering process

  • 9.1 DOM Tree Construction: The input content of DOM tree construction is a very simple HTML file, which is parsed by THE HTML parser, and finally outputs the DOM tree structure. (Document is the DOM structure, and DOM is an in-memory tree structure, whose contents can be queried or modified by JavaScript.)

  • 9.2 Style Calculation:

    • When the rendering engine receives CSS text, it performs a conversion operation that converts the CSS text to styleSheets (Document. StyleSheets) in a structure that the browser can understand.

  • Transform property values in the stylesheet to standardize them

  • Figure out the specific style of each node in the DOM tree (CSS inheritance rules, cascading rules)

  • 9.3 Layout stage: Calculate the geometric positions of visible elements in the DOM tree

    Create layout tree (layout tree of visible elements)–> Layout calculation (Calculates the layout information of DOM elements and saves it in the layout tree)

  • 9.4 Layering: The rendering engine also needs to generate special layers for specific nodes and a corresponding layer tree; The browser page is actually divided into layers, which are superimposed to create the final page;

The principles of layering are:

Elements with cascading context attributes need to be clipped to satisfy any of these points and then promoted to a single layer

  • 9.5 draw
  • 9.6 block
  • 9.7 Rasterization and synthesis

If downloading CSS files is blocked, will it block DOM tree synthesis?

< HTML >< body> Geek time <script type="text/javascript" SRC ="foo.js"></script> </body> </ HTML >Copy the code
  • Case 1: When JavaScript is parsed, DOM parsing will be suspended and the foo.js file will be downloaded. After the download is complete, the js file will be executed and then the DOM parsing will continue. This is why JavaScript files block DOM rendering.
< HTML > <head> <style type="text/ CSS "SRC =" theme. CSS" /> </head> <body> <p> Let e= document.getElementsByTagName('p')[0] e.style.color = 'blue' </script> </body> </html>Copy the code
  • Case 2: When I access the style of an element in JavaScript, I have to wait for the style to be downloaded before I can proceed, so CSS blocks DOM parsing in this case as well.