Browser rendering principle and rearrangement and redrawing

Browser rendering principle

Browser rendering is divided into five stages .

The first stage ：HTML analysis --> DOM Trees

Browsers cannot directly understand HTML file , First, analyze it , And in the process of parsing, send various external resource requests for page rendering DOM Trees .

The second stage ： CSS analysis --> CSSOM Trees

Similarly, browsers can also directly understand CSS Code , Need to identify and load CSS The code is processed into what you understand CSSOM Trees .

The third stage ： Style and structure merge --> Render tree

The browser will DOM Trees and CSSOM Trees are combined to generate rendering trees （:after :before And other pseudo elements will be built to DOM In the tree ）.

Render tree features ： Contains only the nodes needed to render the web page .

The process of building a rendering tree

• First step ： from DOM The root node of the tree starts traversing , Filter out all visible nodes ;
• The second step ： Match visible nodes CSSOM Trees ;

The fourth stage ： The page layout --> Layout rendering tree

The browser traverses the rendering tree , Write the nested relationship between elements into the document flow box model in the form of box model , And calculate the exact size and location of the elements in the layout process . After the calculation , Write the corresponding information back to the rendering tree to form “ Layout rendering tree ”.

The fifth stage ： Page drawing --> Display page

At this stage, the browser finally gets all the information about drawing the page , Convert every node in the rendering tree into visible pixels , Finally, the page will be presented in front of us .

rearrangement

When we modify DOM Width of node 、 High or hidden , The browser needs to recalculate the geometric attributes of nodes , Then the process of plotting the results of the calculation is called rearrangement （ It's also called backflow ）.

Browser rearrangement process

Conditions triggering rearrangement

• change DOM Tree structure ： The increase or decrease of nodes 、 Mobile, etc
• Get some through " Instant Computing " Get the attribute of the value ：offsetWidth、offsetHeight、offsetTop、offsetLeft、 scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeight And call getComputedStyle Method , perhaps IE Of currentStyle Method .

Repaint

When we modify DOM The style of （ Does not affect its geometric properties ） when , Browsers need to redraw new styles for elements. The process is called redrawing .

Browser redrawing process

Conditions that trigger redrawing

modify DOM The style of , But without affecting its geometric attributes, redrawing will occur .

Optimize

Rearrangement and redrawing are more performance consuming , So in the development process , We should be Avoid rearrangement and reduce redrawing .

This concludes the article

If you have any other ideas , Welcome to the comment area ！