This article is based on the multi-process structure of Google Chrome – see the content of b station up master Luke

process

Process is the basic unit of operating system resource allocation and scheduling, can apply for and have computer resources, is the basic execution entity of the program.

thread

A thread is the smallest unit of operation scheduling that an operating system can do. Multiple threads can be concurrent in a process, and each thread performs different tasks in parallel

Each process is allocated an independent memory space, and processes communicate with each other through IPC pipes.

Google Chrome processes are divided by features:

  1. Cache processes
  2. GPU process – responsible for rendering the entire browser interface
  3. Plugin process – Controls all plug-ins used by the site, such as Flash
  4. Network process – responsible for initiating and receiving network requests
  5. Cache processes
  6. Renderer process
  7. Browser process – controls chrome’s user interface outside of tabs, including the address bar, bookmarks, back and forward buttons, and works in coordination with other processes in the browser, setting process models

After your url

Browser process of UI thread will capture your input information, if it is to launch a request, the UI thread will start a thread to network, requests the DNS domain name resolution, then started to connect to the server to get data, when the network thread to get the data later, will inform the UI thread, the UI thread will create a renderer process to render the page, The browser process passes data to the renderer process through the IPC pipeline to enter the rendering phase.

Rendering phase

When the network thread gets the data, the network thread notifies the UI thread, and then the UI thread creates a renderer process. The browser process passes the data to the renderer process through the IPC pipeline and enters the rendering process. The renderer process receives HTML data, and the core task of the browser process is to combine HTML, CSS, JS, The main thread of the renderer process parses THE HTML and constructs the DOM data structure. DOM, also known as the document object model, is the internal representation form of the browser and the data structure and API that web developers can interact with through JS. HTML is firstly tokeniser tokenized, and the input HTML content is parsed into multiple tags through lexical analysis. DOM tree construction is carried out according to the tags after identification. Document object is created in the process of DOM tree construction, and then DOM tree with Document as root node is continuously modified. You add elements to it, and HTML code often introduces some extra images and CSS that have to be downloaded over the network or loaded directly from the cache, and those resources don’t block parsing of THE HTML, because they don’t affect DOM generation, but when you get script tags in parsing the HTML, This is because the browser doesn’t know if js execution will change the HTML structure of the current page. If document. write is used to modify the HTML in the JS code, the previous parsing is meaningless. You can use async or defer properties. To asynchronously load and execute JS, the main thread needs to parse CSS, and determine the calculation style of each DOM node, know the DOM structure and the style of each node, which position on the page, that is, the coordinate of the node and the node needs, this stage is called layout. The main thread generates the layoutTree node by traversing the DOM and calculating the style. Both the x and y coordinates and the border size are recorded. Note that DOMtree and layoutTree do not necessarily correspond one to one. None, etc. Layouttree is corresponding to the nodes that are displayed on the screen last. We also need to know in what order to draw (paint), z-index will affect node drawing, so to ensure that the correct hierarchy is displayed on the screen, The main thread traverses the Layouttree to create a paintRecord, which records the order in which the documents will be drawn. This stage is called paint. Now that you know the order in which the documents will be drawn, you can turn this information into pixels for display on the screen, which is called rasterization

rasterize

The original, always simple method of rasterizing only the contents of the user’s viewport, and then rasterizing more contents to fill in the missing parts as the user scrolled through the page, which caused display delays, has been improved to a more complex rasterization process. Composting is a method of combining parts of a web page into multiple layers, rasterizing them, and combining them individually with compositing threads. Basically, all elements of a web page are layered according to certain rules. The main thread traverses the LayoutTree and generates the Layer tree. When the layertree is generated and the drawing order is determined, the main thread passes this information to the synthesizer thread. Rasterize synthesizer thread will each layer, due to a layer may be as large as the whole length of the page, so the synthesizer thread shard or split them into many blocks (tiles), then each figure piece sent to rasterize threads, thread rasterize rasterize each figure piece, and store them in the GPU memory, when after the completion of the tiles rasterize the, The synthesizer thread will collect block information called “drawquads”, which record the location of the block in memory and where to draw the block on the page. Based on this information, the synthesizer generates a synthesizer frame, which is then transmitted to the browser process via IPC. Then the browser process sends the synthesizer frame to the GPU, and the GPU renders it to the screen, and when your page changes, say you scroll the page, a new synthesizer frame is generated, and the new frame is passed to the GPU, and then rendered to the screen again

Redraw and rearrange

When we change the size and position attributes of an element, we redo the computedstyle, layout paint, and all the rest of the process. This is called rearrangement. When we change the color attributes of an element, the layout is not retriggered. It could trigger style calculation and drawing, this is redrawn, rearrangement and re-paint will occupy the main thread, js also run on the main thread, can appear to grab the execution time of the problem, if you write a continuously lead to redraw rearrangement animation, the browser is required in every frame running style, layout and drawing operations. When the page refresh rate of 60 frames per second (ms) of 16 per frame, caton, users won’t feel page if you are running animation as there are a lot of JS, tasks need to be performed, because of the layout, drawing and JS performs in the main thread running, when at the end of the layout and draw a frame of time, if there is time remaining, JS will get access to the main thread, If the JS execution time is too long, it will cause the main thread to not be returned at the beginning of the next frame, resulting in the next frame not being rendered on time. This problem can be solved by requestAnimationFrame (), which is called every frame, through the API callback, Then we can break up the JS execution into smaller chunks (each frame) and pause the JS execution before each frame runs out and return it to the main thread so that at the beginning of the next frame, the main thread can execute the layout and draw on time. Reactfiber has done a lot of optimization with this API. Rasterization of the entire process does not occupy the main thread, only in the synthesizer thread and raster thread running, which means that there is no need to preempt the main thread and JS, CSS has an animation property intersecting transform, through the property of the animation will not go through the layout and drawing, but directly run in the synthesizer thread and raster thread.

Comb summary

After the network thread in the browser process requests and obtains THE HTML data, it sends the data to the main thread of the renderer process through IPC. The main thread parses the HTML to construct a DOM tree, and then calculates the style. According to the DOM tree and the generated style, layouttree is generated. By traversing layoutTree to generate a drawing order table, and then traversing LayoutTree to generate a Layertree, and then the main thread will be layertree and drawing order information together to the synthesizer thread, synthesizer thread according to the rules of layers, After rasterization is complete, the synthesizer thread receives the “drawquads” information from the rasterization thread. Based on this information, the synthesizer line synthesizes a synthesizer frame, and sends the synthesizer frame back to the browser process via IPC. The browser process then sends the GPU to render, which is then displayed on the screen