Browser render passes

Preface

After the browser enters a web address , After getting the relevant resource data through the connection with the back end , The browser needs to parse the web page data 、 Rendering 、 draw , The final display is the interface content we see . In front-end development , Understanding the browser's rendering process is helpful for us to perform rendering tuning in the actual process 、 Performance tuning processing , So it is very necessary .

Browser Introduction

One 、 Browser structure

The composition of the browser is roughly as follows , Here is a detailed introduction ：
1. The user interface
The user interface is the shell of the browser , It is the browser interface we usually see , Including the search bar 、 Bookmarks 、 Forward and backward buttons, etc . When we operate in the user interface , It transfers our operations to the browser engine for processing .
2. Browser engine
The browser engine is used to receive the “ Operation command ”, Then call the corresponding rendering engine interface .
3. Rendering engine
The rendering engine is the top priority of the browser , The main work of the rendering engine is to get the html、css And other resources , Then render the page .
4. Network module
Responsible for network requests , Such as http request . It includes platform independent interfaces and platform independent implementations
5.JS Interpreter
For parsing 、 Compile implementation JS Code , Specific to different browsers JS The engine can view the following table .
6.UI backstage
Draw base components , Such as combo box and window .
7. Local data storage
The browser needs to store all the data on the hard disk , Such as cookies. new HTML5 The specification specifies a complete （ Although lightweight ） Database in the browser of web database.

Two 、 Modern browser engines

Modern mainstream browsers and their corresponding engines are as follows （ Picture source ：https://www.cnblogs.com/mike-mei/p/11989145.html）：

Chrome and Opera The current rendering engines all adopt Blink,Blink Is based on Webkit Extended rendering engine .

3、 ... and 、 Multi process processing of browser

Why are browsers multiprocessing ？

1. Single process processing , If a bug Causes the rendering engine to crash , The entire browser will not work properly , This is unacceptable to users .
2. make the best of CPU Multi core advantage of , Manage different web pages through different processes , It can improve the response speed of a single web page in the browser
3. Easy to use sandbox model to isolate processes such as plug-ins , Improve browser stability , For example, put plug-ins or web applications in a process different from the browser itself , Improve the robustness of the browser , It is also convenient for users to manage plug-ins and application programs .

The browser adopts a multi process architecture , Each new tab is equivalent to a new process , Multiple processes lead to higher response speed 、 Beyond security , It will also consume more resources . When dealing with , If it is two tabs that do not cross sites , The browser will make it a common process , So as to save some memory space .

Browser process partition

1.Browser process
The main thread of the browser , Mainly responsible for browser page management 、 Bookmarks 、 Forward and backward 、 Resource download management and the creation and destruction of other processes , There is only one browser application , Corresponding to the browser engine in the above browser composition .

2. Rendering Progress
Kernel process , Responsible for page rendering 、JS perform , Corresponding to the above rendering engine and JS engine , A browser can contain multiple rendering processes , Every Tab The window page corresponds to a rendering process . The rendering process is also divided into multiple threads , Specific for ：

• GUI Threads ： Mainly responsible for parsing HTML、CSS And build DOM Trees and RenderObject Trees , Layout and drawing, etc , This thread is executed when redrawing and reflow are triggered . JS Engine threads ： Responsible for parsing and executing JS Code .
• Event thread ： Control event loop , For example, when JS The engine runs to setTimeOut when （ It can also come from other threads in the browser kernel , As a mouse click 、AJAX Asynchronous request, etc ）, The corresponding task will be added to the event thread .
• Timer thread ： The browser creates a timer through the timer thread , Complete timing operation （ If you put it in JS Engine threads , The timing may be inaccurate due to blocking ）, When the clock is up , The task is added to the event queue , etc. JS Execute when the engine is idle ,setInterval And setTimeout The thread .
• Asynchronous request thread ： stay XMLHttpRequest After connecting, the browser will create an asynchronous request thread to detect the state change of the request , If you set a callback function , An asynchronous thread generates a state change event and puts it in JS The engine's processing queue is waiting for processing .

3.GPU process
be responsible for GPU Rendering , There is only one browser application , be used for 3D Drawing etc. .

4. Plug in process
Browser installed plug-ins ( add-in ), Each plug-in creates a process

Be careful ：
1.GUI Rendering thread and JS Engine threads are mutually exclusive , When JS Engine execution time GUI Thread will be suspended （ It's like being frozen ）,GUI Updates will be saved in a queue medium to JS Execute immediately when the engine is idle , When JS When the execution time of the thread is too long, the rendering of the page will be inconsistent , Block rendering .
2.JS The execution of engine thread code may involve the execution of DOM、CSS Operation of style tree , If JS It's multi-threaded , There may be multiple threads modifying the same DOM Node situation , It will lead to more complex processing mechanisms , Therefore JS It's single threaded .

Browser render pass

One 、 Rendering process

The rendering process can be roughly divided into five processes ：

1. HTML Parse build DOM Trees
The browser doesn't recognize html file , Need to put html It can be interpreted as DOM Trees , The parsing process is a deep traversal process , Only when all the child nodes under a node are traversed can the next sibling node be resolved . At this stage ,

2.CSS analysis ： and HTML The parsing process of is executed synchronously , The browser will recognize all CSS Style information , And build to form CSSOM Trees .CSSOM The tree is roughly as follows ：

Be careful

a.HTML、CSS The parsing process of may be JS Blocked by engine threads .
b. Some tree nodes with invisible style （display:none） It will also be built into the tree structure , Only in the back render Trees do filtering .

3. Style and structure merge
CSSOM Trees and DOM Tree merging , formation Render Trees . formation Render In the process of trees , The browser will filter out all visible nodes （visibility: hidden Elements in Render Tree in ）, Match its... Against the visible node CSSOM The trees, CSS The rules .

4. Layout stage
The layout phase is mainly to traverse the rendering tree , Write element nesting relationships to the document stream in the form of a box model . This stage calculates the space each tree node should occupy and its position in the view , Some layout styles such as float、absolute、fixed The resulting offset will take effect at this stage .

5. Drawing phase This stage will convert our rendering tree into pixels , And decode all the media files .

Two 、 Reflow and redraw

After the page is loaded for the first time , We may be due to interaction or some JS operation , This causes the layout and style of the page to change , This triggers the browser's rendering process again , During this period, two situations, reflow and redraw, will be involved .

1. backflow

When our operation triggered DOM Changes in Geometry （ For example, change the width of an element 、 High or hidden elements, etc ） when , The browser needs to recalculate the geometric properties of the elements （ The geometric properties and positions of other elements will also be affected ）, Then draw out the result of calculation . This process is rearrangement （ It's also called backflow ）.

Trigger backflow ：

a. change DOM Tree structure , Like moving 、 Delete 、 Add node 、 Modify node size and other operations
b. Get the values of some specific properties , Such as offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeight etc. , These attributes need to be calculated in real time , Browsers to get their values , It also triggers a return flow .
c. Manual call getComputedStyle Such method , It will also trigger the real-time calculation of the browser , It also triggers backflow .

2. Repaint

When we are right DOM The changes in the style caused by 、 But it doesn't affect its geometry （ For example, change the color or background color ） when , The browser doesn't have to recalculate the geometry of the element 、 Draw a new style directly for the element （ Skip the loop shown above ）. This process is called redrawing .

3. How to reduce reflow and redraw

• You can modify the DOM Element settings display:none, because display:none The element of will not be included in renderTree in , When the changes are finished , When it is set to display:block This will trigger only one reflow operation .
• Try to avoid reading that will trigger backflow css attribute
• Use transform The deformation and displacement can be reduced reflow Use absolute positioning to separate some complex elements from the document flow , To form a new RenderLayer, Reduce the cost of backflow .

Reference material
https://cloud.tencent.com/developer/article/1495980
https://www.imooc.com/read/70/article/1948
https://juejin.cn/post/6844904040346681358#heading-10
https://www.jianshu.com/p/e6252dc9be32
https://zhuanlan.zhihu.com/p/102082221
https://www.cnblogs.com/mike-mei/p/11989145.html