See a lot of interview questions have this problem, then take out in-depth research. If there are any mistakes, please correct them. Recently just set up a good personal blog!

Multi-process architecture for browsers

The entire process from the browser entering the URL to the page rendering is done by the various processes in the browser architecture.

  1. Main browser process: Manages sub-processes and provides services
  2. Render process: Render HTML, CSS, and JS into an interface, with JS engine V8 and typography engine Blink on top. It creates a render process for each TAB page
  3. GPU process: originally responsible for processing 3Dcss, the UI is gradually handed over to GPU to draw
  4. Network process: is responsible for network requests, network resources loading process
  5. Plugin process: The process responsible for running the plugin, since plug-ins are prone to crash, put it in a separate process and don’t let it affect others

process

Different processes come into play at different stages from user input to page presentation, as shown below:

As can be seen from the figure, the whole process needs to be completed in coordination with each other. The process can be roughly described as follows:

  1. The user enters the URL, processes the input, the main process navigates, and the network process does the work

  2. A network process initiates a network request in which a redirect may occur

  3. After the server responds to the URL, the main process tells the renderer that you’re ready to go

  4. When the renderer is ready to commit data, it is called submitting the document

  5. The rendering process receives the data and completes the page rendering.

The specific process

1. Enter the url

The user enters the URL and processes the input information:

If the string is not a URL structure, the browser’s default engine will search for the changed string.

If the string is a URL, the browser’s main process hands it to the network process and begins work.

2.1 Searching the Browser Cache

The network process checks to see if there is a local cache. If there is a local cache, the network process returns the resource directly to the browser process. If there is no local cache, the network process goes to DNS-> IP -> TCP

2.2 the DNS

After obtaining the URL, the network process performs DNS domain name resolution to obtain the IP address. If the request protocol is HTTPS, you also need to establish a TLS connection.

2.3 Establishing a TCP Connection and shaking hands three times

The next step is to establish a TCP connection with the server using the IP address. After the connection is established, a request is sent to the server.

3 Server Response

After receiving the request information, the server generates the response line, response header, and response body according to the request information and sends the response to the network process. After receiving the response information, the network process parses the contents of the response header.

The process by which a network process parses the response line and response header information:

3.1 the redirection

If the response line status code is 301 (permanent redirection) and 302 (temporary), then you need to redirect to another URL. The network process reads the redirected address from the Location field in the response header and re-initiates the network request.

3.2 Response data processing

The navigation determines the type of response body data from the content-Type field in the request header. The browser uses this to determine how to display the content of the response body.

For example, if the request is application/ OCtet-stream, the request is processed according to the download type, and the navigation ends.

If it’s text/ HTML, this tells the browser that the server is returning HTML, and the browser tells the renderer that you need to do your job.

4 Prepare the rendering process

By default, one render process per page. But if it is on the same site (same root domain + protocol) then the renderer will reuse it.

5 Submitting Documents

When the renderer process is ready, the browser process sends a “submit document message”. The renderer process receives the message and transmits data to the web process.

Once the data transfer is complete, the renderer will tell the browser process to confirm the document submission, and the browser will update the page, security status, URL, and back and forth history.

This is the end of navigation and the rendering phase.

Note: As soon as the browser starts loading an address, the icon on the TAB page starts loading. But at this time the page in the figure is still displayed before the open page content, and did not immediately replace the baidu home page. The content of the page will not be replaced until the submission stage.

The browser’s rendering process

Refer to the address

  1. Browsers can’t read HTML directly; they need to build a Dom tree first.

  2. Turn the CSS read into a csSOM tree that the browser can understand.

    Transform property values in the stylesheet to standardize them. 2em is resolved to 32px, red to RGB (255,0,0), bold to 700…

    Figure out the specific style of each node in the DOM tree. Use CSS inheritance, CSS priority, CSS cascading rules to calculate.

  3. The browser iterates through each visible node, starting at the root of the DOM tree, and adds these nodes to the render tree. Invisible nodes are not added to the rendering tree, such as CSS nodes with display none.

  4. Based on the generated render tree, the layout (also known as backflow) is performed to get the exact position and size of each node on the page. (Automatic rearrangement). The output of the layout phase is a box model that accurately captures the exact position and size of each element on the screen, and all relative measurements are converted to absolute pixel values on the screen (redrawn).

  5. Generate a hierarchical tree, where pages are layered on top of each other. For complex CSS animations, z-index, etc., the rendering engine will create a dedicated layer for them and create a layer tree.

  6. Once the layers are built, the rendering engine draws each element in the layer tree. The composition thread turns the layers of the layered tree into blocks.

  7. GPU rasterization turns blocks near Windows into bitmaps, which are then stored in the GPU process. (Because a page can be large and the user can only see part of the page in the viewport, drawing all of them would be expensive, so the composition thread would prioritize bitmap generation based on the map blocks near the viewport.)

  8. Once rasterization is complete, the browser goes into the GPU process and pulls out the page content to display on the screen, completing the rendering phase

Refluxing and repainting

backflow

Backflow occurs when the browser renders the page. The process of calculating the layout tree from the DOM tree and style is called backflow. This step requires calculating the size and position of each element (ignoring the display: None element).

redraw

We convert the layout tree and style to the actual pixels on the screen, which is called the redraw node. Therefore, backflow must lead to repainting, repainting is not necessarily backflow, and the cost of backflow is higher than painting.

When some elements in the Render Tree need to update their attributes, these attributes only affect the appearance and style of the elements, not the layout, such as background-color.

When backflow and redraw occurs

  1. Browser window size changes (because backflow calculates the size and position of elements based on the viewport size)
  2. When the page is first rendered
  3. Add or remove dom
  4. Modify element position or size

To optimize the

Browser performance optimization mechanisms

  • The browser optimizes itself by maintaining a queue for updates, batch-like, and emptying the queue only when the number of tasks or time intervals in the queue reaches a threshold, thereby turning multiple backflows and redraws into one. But if a synchronous layout event is triggered, the browser forces the queue to flush (immediately empty the queue). So we want to avoid triggering synchronous layout events, we are familiar with the following:

GetBoundingClientRect, getComputedStyle(), offsetTop, scrollWidth, clientWidth,

How to reduce backflow and redraw

  • Minimize rearrangement and redraw
    1. The use of el. Style. CssText
    2. Add the class name directly
  • Avoid frequent manipulation of DOM structures and put them in first if necessaryDisplay: noneWait for the DOM operation to finish before releasing the elements (because they don’t appear and trigger a backflow redraw)
  • Elements with complex animation operations use absolute positioning to take them out of the document flow to reduce frequent backflow of parent and subsequent nodes
  • Css3 hardware acceleration/GPU acceleration, which uses CSS to enable CPU acceleration, such as transform, opacity, and filters, without causing backflow redrawing