Interviewer: in brief, the process of rendering pages in the browser

alexis 2021-09-15 09:09:04

Preface

Review the classic interview questions

Browser get from HTML File until the browser draws the contents of the page in pixels on the screen , A series of steps during this period , be called Critical render path (Critial Rendering Path).

Simply put, the process of rendering a page by the browser

1. according to HTML Structure construction DOM Trees

When we open a web page , The browser will ask the server for the corresponding HTML file , However, the browser gets byte content HTML file , So the browser converts bytes into characters , That's what we wrote HTML Code

image.png But we can understand the code , But the computer can't understand , It needs to be converted into a language that the computer can understand , So the browser converts the characters to Token, You can put the Token Understood as label , For example <div> Convert to start tag , take </div> Convert to end tag , So the character is Token Changed , thus , The computer can according to Token Generate node objects Node, Put all nodes into the object Node together , It's a tree , Let's call this DOM Trees

image.png

2. structure CSSOM Trees

CSSOM yes DOM A representation of a structural style , The browser is parsing to <link> When labeling , Will be based on href Send a request to the server to get CSS file , The following process and DOM The tree construction process is similar

image.png

3. Build the render tree Render Tree

When built DOM and CSSOM after , The browser will integrate the two trees into Render tree Render Tree

image.png

4. Layout ( backflow )

When the rendering tree is built , The browser will layout according to the rendering tree

The browser will get the structure of the rendering tree 、 Node location and size , Arrange and nest according to the box model

5. Rendering

The task of rendering a tree is to match DOM and CSSOM The node of , And capture visible content , Render the captured visible content to the page

Parsing encountered linkscriptimg Wait for tags to block browser rendering

encounter link Tag request CSS At the same time as the document It won't block html analysis , But it will block rendering , Because the construction of the rendering tree requires DOM and CSSOM, You can't have one without the other

encounter script The tag will stop building DOM, because JS Can operate DOM and CSSOM, So the browser needs to be built DOM and CSSOM Re execution JS, Otherwise, some elements will appear and disappear , That's why script The label on the body The reason for the bottom of the label

request JS When you file , In practice, we get CSS The file or JS The document depends on the specific situation , But if you get it first and parse it JS Files can also be blocked , Because we have to wait CSSOM Only after the build is complete can you execute JS file , Because the rendering tree needs to DOM and CSSOM You cannot build until the build is complete , and JS It can be manipulated CSS Styling .

But in parsing CSS File and build CSSOM When , The browser can download and parse JS file , etc. CSSOM Once the build is complete, you can execute JS The file .

Parsing encountered display: none; Will it enter the rendering process

The rendering tree is a tree structure representation of the elements that can eventually be rendered to the page . in other words , The browser encountered... While parsing display: none; The element will be put into DOM Trees , but Will not enter the rendering tree

What is redrawing ? What is reflow ?

Repaint (repaint)

Redrawing is when an element only needs to change its appearance 、 style , It doesn't affect the layout . For example, change background-color, It's called redrawing

backflow (reflow)

Reflow is when the element needs to change size 、 Layout time , The process of rebuilding the rendering tree

difference

  • Reflow must cause redrawing , Redrawing does not necessarily cause backflow . For example, only change color It will only redraw without causing backflow
  • The overhead required for backflow is more than , The more nodes on the render tree need to be rebuilt , The more expensive it is

In other words, redrawing and reflow greatly affect the performance of the browser

What are the ways to get a document out of the document stream ?

  • float
  • absolute
  • fixed

Reduce redrawing and reflow , Improve performance

As a developer , Memory should be saved as much as possible , Optimize browser performance , Improve user experience , Don't make some fancy animation for a moment's stimulation ( It's about you : The product manager ). Promise me , Better for browsers

1. use visibility: hidden; Instead of display: none;

The difference between them is :visibility: hidden; Is to hide an element , But hidden elements still need to take up position , Will enter the rendering tree . and display: none; Is to make an element disappear completely , Not occupying the original position , And will not enter the rendering tree .

That is to say, they are using display: none; When switching display , Page reflow , Rebuild the node , Great impact on Performance , And we use visibility: hidden; When switching display, it will only cause redrawing without reflow , Browser friendly .

2. Use less or no forms <table></table>

Table elements always affect the whole body , Maybe a small change will cause the whole table to be rearranged , Costly

3. CSS Selectors avoid too many levels

.nav-bar div p span {
font-size: 16px;
}
 Copy code 

CSS The reading order of is From right to left , in other words : Find all of them first span, From the first span Start along span Parent element lookup for p, If a matching node is found halfway, it will be added to the result set , If you go up to the root element html If none of them meet the conditions , From the next span Start repeating the process . If there are too many levels, it will increase the overhead of the browser , So we should try to avoid this kind of " Dolls " act

Recommended reading

  1. What is reflow , What is redrawing , What's the difference? ?
  2. CSS Right to left matching rules for selectors
  3. The nuggets pamphlets - Front end interview
Please bring the original link to reprint ,thank
Similar articles

2021-09-15

2021-09-15