Intensive reading – browser rendering principles

Time:2020-10-1

preface

In our interview process, the interviewer often asks such a question, that is, from entering the URL in the browser address bar to the page display, what happened to the browser? This question seems to be a cliche, but the quality of the answer to this question can really reflect the breadth and depth of the interviewer’s knowledge.

From the perspective of browser, this article tells you what happened inside the browser after entering the URL and pressing enter. After reading this article, you will learn:

  • What are the processes in the browser and what are their functions
  • What do the internal processes and threads do after inputting the URL
  • How do internal processes handle these interactive events when we interact with browsers

Browser architecture

Before we talk about browser architecture, let’s understand two concepts,processandthread

Process is a dynamic concept, which is the basic unit of allocating and managing resources in the process of program execution. Thread is the basic unit of CPU scheduling and dispatching. It can share all the resources owned by the process with other threads belonging to the same process.

In short, a process can be understood as an executing application, while a thread can be understood as an executor of the code in our application. And their relationship can be imagined,Threads run in the processA process may have one or more threads, and a thread can only belong to one process.

As we all know, the browser belongs to an application program, and one execution of the application program can be understood as the computer starts aprocessAfter the process starts, the CPU will allocate the corresponding memory space to the process. After our process gets the memory, it can be usedthread Resource scheduling, and then complete the function of our application.

In the application program, in order to meet the functional needs, the started process will create another new process to deal with other tasks. These new processes have a new independent memory space, and cannot be in memory with the original process. If these processes need to communicate with each other, they can be carried out through IPC mechanism.

Intensive reading - browser rendering principles

Many applications work in this multi process way because processes and processes are independent of each otherNo influence on each otherIn other words, when one of the processes is down, the execution of the other processes will not be affected. You only need to restart the hung process to resume running.

Multi process architecture of browser

If we develop a browser, its architecture can be a single process multi thread application, or a multi process application using IPC communication.

Different browsers use different architectures. Taking chrome as an example, this paper introduces the multi process architecture of browsers.

In chrome, there are four main processes:

  • Browser process: it is responsible for the forward and backward of browser tab, the work of address bar and bookmark bar, and the processing of some invisible underlying operations of browser, such as network request and file access.
  • Render process: responsible for display related work in a tab, also known as rendering engine.
  • Plug in process: responsible for controlling the plug-ins used by web pages
  • GPU process: responsible for processing the GPU tasks of the entire application

Intensive reading - browser rendering principles

What is the relationship between these four processes?

First of all, when we want to browse a web page, we will enter the URL in the browser’s address barBrowser ProcessA request is sent to the URL to get the HTML content of the URL, and then the html is handed to theRenderer ProcessRenderer ProcessParsing HTML content, parsing the resources that need to request the network and then return it to theBrowser ProcessLoad with notificationBrowser Process, needPlugin ProcessLoad the plug-in resources and execute the plug-in code. After the parsing is completed,Renderer ProcessThe image frames are calculated and handed over to theGPU ProcessGPU ProcessConvert it to an image display screen.

Intensive reading - browser rendering principles

Benefits of multi process architecture

Why does chrome use multi process architecture?

First, higher fault tolerance. In today’s web applications, HTML, JavaScript and CSS are becoming more and more complex. These code running in the rendering engine frequently appear bugs, and some bugs will directly cause the rendering engine to crash. The multi process architecture makes each rendering engine run in its own process without affecting each other. In other words, when one page crashes and hangs up, other pages can still work normally There is no impact on the operation of.

Intensive reading - browser rendering principles

Second, higher security and sandboxing. Rendering engines often encounter untrusted or even malicious code on the network. They will take advantage of these vulnerabilities to install malicious software on your computer. To solve this problem, browsers restrict different permissions for different processes and provide sandbox running environment for them to make them more secure and reliable

Third, higher response speed. In the single process architecture, each task competes with each other to seize CPU resources, which makes the browser’s response speed slow, while the multi process architecture just avoids this shortcoming.

Multi process architecture optimization

We said before,Renderer ProcessIs responsible for the display related work in a tab, which means that a tab will have a render process. The memory between these processes cannot be shared, and the memory of different processes often needs to contain the same content.

Process mode of browser

In order to save memory, chrome provides four process models. Different process modes will do different processing for tab process.

  • Process-per-site-instance(default) – the samesite-instanceUsing a process
  • Process-per-site –The samesiteUsing a process
  • Process-per-tab –Each tab uses one process
  • Single process –All tabs share one process

Here we need to give the definition of site and site instance

  • siteRefers to the same registered domain name (for example: google.com , bbc.co.uk )And scheme (such as: HTTPS: / /). For example, a baidu.com And B baidu.com It can be understood as the same site (note that this should be distinguished from the same origin policy. The same origin policy also involves subdomain names and ports).
  • site-instanceIt’s a groupconnected pages from the same siteHereconnectedIs defined ascan obtain references to each other in script codeHow to understand this passage. If the following two situations are met and the new page and the old page belong to the same site defined above, they belong to the same sitesite-instance

    • Users through<a target="_blank">In this way, click to open a new page
    • New page opened by JS code (for examplewindow.open)

After understanding the concepts, the four process patterns are explained below

First of allSingle processAs the name suggests, in single process mode, all tabs use the same process. Next isProcess-per-tabAs the name suggests, a new process will be created every time a tab is opened. And forProcess-per-siteWhen you open a baidu.com Page, open B baidu.com In this way, if one tab crashes, the other will crash.

Process-per-site-instanceIt’s the most important, because this is the mode chrome uses by default, which is used by almost all users. When you open a tab to access a baidu.com Then open a tab to access B baidu.com , these two tabs will useTwo processes。 And if you’re in a baidu.com Open B baidu.com Page, these two tabs will useSame process

Default mode selection

So why do browsers use itProcess-per-site-instanceAs the default process mode?

Process-per-site-instanceCompatible with performance and ease of use, it is a more moderate and universal mode.

  • Compared with the process per tab, being able to open a lot of processes means less memory consumption
  • Compared with process per site, it can better isolate unrelated tabs under the same domain name and is more secure

What happened to the navigation process

Previously, we talked about the multi process architecture of the browser, the various benefits of the multi process architecture, and how chrome optimizes the multi process architecture. Next, from the simple scene of users browsing the web, we can deeply understand how processes and threads present our website pages.

Web page loading process

We mentioned most of the browser processes beforeBrowser ProcessResponsible. According to different work, browser process is divided into different work threads

  • UI thread: control the button and input box on the browser;
  • Network thread: process network request and get data from network;
  • Storage thread: control access to files, etc;

Intensive reading - browser rendering principles

Step 1: process input

When we type in the browser’s address bar and press enter,UI threadIt will judge whether the input content is a search query or a URL. If it is a search keyword, it will jump to the default search engine corresponding to the search URL. If the input content is a URL, it will start to request the URL.

Intensive reading - browser rendering principles

Step 2: start navigation

Press enter,UI threadGive the URL corresponding to keyword search or the URL entered to the network threadNetwork threadAt this time, the UI thread displays the icon in front of the tab as loading state, and then the network process makes a series of operations such as DNS addressing and establishing TLS connection to request resources. If it receives 301 redirection response from the server, it will tell the UI thread to redirect, and then it will launch a new network request again.

Intensive reading - browser rendering principles

Step 3: read the response

network threadAfter receiving the response from the server, start to parse the HTTP response message, and then according to theContent-TypeField to determine the media type (MIME type) of the response body. If the media type is an HTML file, the response data will be sent to the render process for the next step. If it is a zip file or other files, the relevant data will be transferred to the download manager.

At the same time, the browser will conduct a safe browsing security check. If the domain name or request content matches a known malicious site, network thread will display a warning page. In addition, the network thread will do a CORBA (cross origin read blocking) check to make sure that sensitive cross site data will not be sent to the rendering process.

Step 4: find the rendering process

After all kinds of checks are completed, the network thread is sure that the browser can navigate to the request page. The network thread will inform the UI thread that the data is ready, and the UI thread will find a render process to render the web page.

Intensive reading - browser rendering principles

In order to optimize the search and rendering process, considering that it takes time for the network request to obtain the response, the browser has searched and started a rendering process in advance at the beginning of the second step. If all the intermediate steps are smooth, when network thread When the data is received, the rendering process is ready, but if redirection is encountered, the prepared rendering process may not be available, and a rendering process will be restarted.

Step 5: submit navigation

At this point, the data and rendering process are ready,Browser ProcessWill toRenderer ProcessSend IPC message to confirm the navigation. At this time, the browser process sends the prepared data to the rendering process. After receiving the data, the rendering process sends IPC message to the browser process to tell the browser process that the navigation has been submitted and the page begins to load.

Intensive reading - browser rendering principles

At this time, the navigation bar will be updated, the security indicator will be updated (the small lock in front of the address), and the history tab will be updated. That is, you can switch the page by going forward and backward.

Step 6: initialization loading completed

After the navigation submission is completed, the rendering process starts to load resources and render the page (details are described below). When the page rendering is completed (the page and the internal iframe trigger onload event), IPC message will be sent to the browser process to inform the browser process. At this time, UI thread will stop displaying the loading icon in the tab.

Principle of web page rendering

After the navigation process is completed, the browser process hands over the data to the rendering process. The rendering process is responsible for all the things in the tab. The core purpose is to transform HTML / CSS / JS code into web pages that users can interact with. So how does the rendering process work?

In the rendering process, the included threads are:

  • A main thread
  • Multiple work threads
  • A compositor thread
  • Multiple rasterization threads

Intensive reading - browser rendering principles

Different threads have different responsibilities.

Building DOM

When the rendering process receives the confirmation information from the navigation, it starts to accept the data from the browser process. At this time, the main thread will parse the data and convert it into a DOM (document object model) object.

DOM is the data structure and API for web developers to interact with web pages through JavaScript.

Subresource loading

In the process of building DOM, resources such as images, CSS and JavaScript scripts will be parsed. These resources need to be obtained from the network or cache. If these resources are encountered by the main thread during the DOM construction process, they will send requests one by one to obtain them. In order to improve efficiency, the browser will also run the preload scanner program. If there are any resources in the HTML, the browser will also run the preload scannerimglinkThe preload scanner passes these requests to theBrowser ProcessNetwork thread for resource download.

Intensive reading - browser rendering principles

Download and execution of JavaScript

If you encounter<script>Tag, rendering engine will stop parsing HTML and load and execute JS code, because JS code may change the structure of DOM (such as executingdocument.write()API)

However, there are many ways for developers to tell browsers how to deal with a resource, for example, if the<script>Added to the tagasyncordeferThe browser will load and execute JS code asynchronously without blocking rendering.

Style calculation – style calculation

DOM tree is just the structure of our page. If we want to know what the page looks like, we also need to know the style of each node in the dom. While parsing the page, the main thread encountered<style>Label or<link>The CSS resource of the tag will load the CSS code and determine the calculated style of each DOM node according to the CSS code.

Calculation style is the specific style of each DOM element calculated by the main thread according to the CSS selectors. Even if your page does not have any custom style, the browser will provide its default style.

Intensive reading - browser rendering principles

Layout – Layout

After DOM tree and calculation style are completed, we also need to know the position of each node on the page. Layout is actually the process of finding the geometric relationship of all elements.

The main thread will traverse the calculation style of DOM and related elements, and build a render tree containing page coordinate information and box model size of each element. During traversal, hidden elements (display: none) will be skipped. In addition, although pseudo elements are not visible on DOM, they are visible on the layout tree.

Intensive reading - browser rendering principles

Paint – paint

After layout, we know the structure, style and geometric relationship of different elements. To draw a page, we need to know the drawing sequence of each element. In the drawing phase, the main thread will traverse the layout tree to generate a series of painting records. Drawing record can be regarded as a note recording the sequence of drawing elements.

Intensive reading - browser rendering principles

Composition

We have information about document structure, element style, element geometric relationship and drawing order. If we want to draw a page at this time, what we need to do is to convert these information into pixels in the display. This transformation process is calledRasterization(rasterizing)。

Then we want to draw a page. The simplest way is to only rasterize the web page content in the view. If the user scrolls the page, move the raster frame and rasterize more content to make up for the missing part of the page, as follows:

Intensive reading - browser rendering principles

The first version of chrome adopted this simple rendering method. The only drawback of this method is that whenever the page scrolls, the raster thread needs to rasterize the newly moved view content, which is a certain performance loss. In order to optimize this situation, chrome adopts a more complex method called compositing.

So, what is synthesis? Synthesis is a process of combiningThe page is divided into several layersAnd then rasterize them separately, and finally merge them into a page in a separate thread, the composite thread. When the user scrolls the page, all the browser needs to do is compose a new frame to show the effect of scrolling, because all the layers of the page have been rasterized. The animation effect of the page is also similar, move the layer on the page and build a new frame.

Intensive reading - browser rendering principles

In order to implement the composition technology, we need to layer the elements to determine which elements need to be placed in which layer. The main thread needs to traverse the rendering tree to create a layer tree. For thewill-changeCSS attributes of the elements, will be seen as a separate layer, Nowill-changeThe browser will decide whether to put the element in a separate layer according to the situation.

Intensive reading - browser rendering principles

You may want to give all the elements on the page a separate layer, but when the page has more than a certain number of layers, the layer composition operation is slower than rasterizing a small part of the page in each frame, so it is very important to measure the rendering performance of your application.

Once the layer tree is created and the rendering order is determined, the main thread will inform the compositor thread of this information, and the compositor thread will begin to rasterize each layer of the number of layers. Some layers can reach the size of the whole page, so the composition thread needs to cut them into pieces of tiles, and then send these small blocks to a series of raster threads for rasterization. After the end of the grating line path, the raster result of each block will existGPU ProcessIn memory.

Intensive reading - browser rendering principles

In order to optimize the display experience, the compositing thread can give different priority to different raster threads, and rasterize those layers in or near the view.

When the tiles on the top of the layer are rasterized, the composition thread collects the tiles on the layer calledDrawing quadrilateral(draw quads) information to build aComposite frame(compositor frame)。

  • Drawing quadrilateral: include blocks inLocation of memoryAnd the position of the block on the page after layer composition.
  • Composite frame: a quadrangle representing the content of a frame on the pageaggregate

After all the above steps are completed, the composition thread will commit a rendered frame to the browser process through IPC. At this point, another composite frame may be submitted by the UI thread of the browser process to change the UI of the browser. These composite frames are sent to the GPU for display on the screen. If the composition thread receives the page scrolling event, the composition thread builds another composition frame and sends it to the GPU to update the page.

Intensive reading - browser rendering principles

The advantage of composition is that the main thread is not involved in this process, so the synthetic thread does not need to wait for the style calculation and JavaScript to complete execution. This is why compositor related animation is the most fluent. If an animation involves layout or drawing adjustment, it will involve the recalculation of the main thread, which will naturally be much slower.

Browser’s handling of events

When the page rendering is finished, the interactive web page has been displayed in tab. Users can move the mouse and click on the page. When these events occur, how does the browser handle these events?

Take click event as an example. When the mouse clicks on a page, the first person to receive the event information isBrowser ProcessHowever, the browser process only knows the type and location of the event. How to handle this click event depends on the tabRenderer ProcessYes. After the browser process receives the event, it will then pass the information of the event to the rendering process. The rendering process will find the target object according to the coordinates of the event, and run the listener function of the target object’s click event binding.

Intensive reading - browser rendering principles

The compositor thread receives events during rendering

As we mentioned earlier, the compositor thread can create composite frames independently of the main thread through the rasterized layer, such as page scrolling. If no event related to page scrolling is bound, the compositor thread can create composite frames independently of the main thread. If the page is bound with page scrolling events, the compositor thread will wait for the main thread to process the event before creating the group Frame. How does the synthesizer thread determine whether the event needs to be routed to the main thread?

Since executing JS is the work of the main thread, when the page is composed, the synthesizer thread will mark the area of the page bound with an event handler asNon fast scrolling area(non fast scrollable region). If the event occurs in these marked areas, the synthesizer thread will send the event information to the main thread and wait for the main thread to process the event. If the event does not occur in these areas, the synthesizer thread will directly compose new frames instead of waiting for the response of the main thread.

Intensive reading - browser rendering principles

For the mark of non fast scrolling area, developers need to pay attention to the binding of global events. For example, we use event delegation to send the event of target element to the root element body for processing. The code is as follows:

document.body.addEventListener('touchstart', event => {
  if (event.target === area) {
    event.preventDefault()
  }
})

From a developer’s point of view, this code is OK, but from the browser’s point of view, this code binds an event listener to the body element, which means that the whole page is edited as a non fast scrolling area. This will make even if some areas of your page are not bound with any events, the synthesizer thread needs to contact the main line every time the user triggers an event Program communication and wait for feedback, the smooth synthesizer independently processing the composite frame mode is invalid.

Intensive reading - browser rendering principles

In fact, this situation is also very easy to handle. It only needs to be passed when the event is listeningpasstiveThe parameter is true,passtiveIt will tell the browser that you want to bind the events, and let the compositor thread skip the event processing of the main thread and directly synthesize to create composite frames.

document.body.addEventListener('touchstart', 
event => {
    if (event.target === area) {
        event.preventDefault()
    }
 }, {passive: true});

Find the event target for the event

When the synthesizer thread receives the event information and determines that the event is not in the non fast rolling area, the synthesizer thread will send the time information to the main thread. The first thing the main thread gets the event information is to find the target object of the event through hit test. The specific hit test process is to traverse the paint records generated in the drawing phase to find the element object containing the event occurrence coordinates.

Intensive reading - browser rendering principles

Browser optimization of events

Generally, the frame rate of our screen is 60 frames per second, that is, 60fps. However, the frequency of triggering certain events exceeds this value, such as wheel, mousewheel, MouseMove, pointermove, touchmove. These continuous events are generally triggered 60-120 times per second. If each trigger event sends the event to the main thread for processing, the refresh rate of the screen is relatively high Low, so that the main thread will trigger excessive hit tests and JS code, making performance unnecessary loss.

Intensive reading - browser rendering principles

For optimization purposes, the browser merges these consecutive events and delays rendering until the next frame is executed, that isrequestAnimationFrameBefore.

Intensive reading - browser rendering principles

For discontinuous events, such as Keydown, Keyup, MouseDown, mouseup, touchstart, touchend, etc., they will be directly dispatched to the main thread for execution.

summary

The multi process architecture of the browser divides different processes according to different functions, and different tasks in the process divide different threads. When the user starts to browse the web page, the browser process processes the input, starts to navigate the request data and request response data, finds the new rendering process, submits the navigation, and then parses HTML to build Dom and build the process Load sub resources, download and execute JS code, style calculation, layout, rendering, composition, and build an interactive web page step by step. After that, the browser process receives the interactive event information of the page and gives it to the rendering process. In the rendering process, the main process performs hit test, finds the target elements and executes the bound events, and completes the page interaction.

Most of the content of this article is also the collation, interpretation and translation of the series of articles on inside look at modern web browser. The process of sorting out is still very fruitful. I hope readers can only have some inspiration after reading this article.

Related reference links

  • Why do browsers use multi process architecture
  • How chrome works
  • Browser multiprocess architecture
  • The basic working principle of graphic browser
  • Inside look at modern web browser (part 2)
  • Inside look at modern web browser (part 3)

Recommended Today

Comparison and analysis of Py = > redis and python operation redis syntax

preface R: For redis cli P: Redis for Python get ready pip install redis pool = redis.ConnectionPool(host=’39.107.86.223′, port=6379, db=1) redis = redis.Redis(connection_pool=pool) Redis. All commands I have omitted all the following commands. If there are conflicts with Python built-in functions, I will add redis Global command Dbsize (number of returned keys) R: dbsize P: print(redis.dbsize()) […]