preface

Review the classic interview questions

The Critial Rendering Path is the sequence of steps that the browser takes from retrieving an HTML file until it draws the page’s content on the screen as pixels.

A brief description of how the browser renders the page

1. Build a DOM tree based on the HTML structure

When we open a web page, the browser goes to the server and asks for the corresponding HTML file, but the browser gets the HTML file in bytes, so the browser converts the bytes into characters, the HTML code that we write

But this code is understandable to us, but not to the computer, so it needs to be translated into a language that the computer can understand, so the browser converts characters into tokens, which can be interpreted as labels, for example<div>Convert to the start tag</div>In this way, the computer can generate Node objects according to the Token. All Node objects are linked together to form a tree, which is calledThe DOM tree

2. Build the CSSOM tree

CSSOM is a representation of the style in the DOM structure. When the browser parses to the tag, it sends a request to the server to get the CSS file according to href. The following process is similar to the process of building a DOM tree

Create the Render Tree

When the DOM and CSSOM are built, the browser will integrate the two trees into a Render Tree

4. Layout (Reflux)

When the render tree is built, the browser lays it out according to the render tree

The browser takes the structure of the render tree, node positions, and sizes, and arranges and nested according to the box model

5. Apply colours to a drawing

The task of rendering a tree is to match the NODES of the DOM and CSSOM, capture the visible content, and render the captured visible content into the page

Analytical metlink,script,imgWill tags block browser rendering

An encounter with a LINK tag requesting a CSS file does not block HTML parsing, but it does block rendering, because building a render tree requires DOM and CSSOM, both of which are necessary

Stop building DOM when you encounter a script tag, because JS can manipulate DOM and CSSOM, so the browser needs to build DOM and CSSOM before it executes JS, otherwise some element will appear and disappear. That’s why you put the script tag at the bottom of the body tag

When requesting a JS file, it is up to you to get the CSS file first or the JS file first, but if you get and parse the JS file first, it will block because you have to wait until the CSSOM is built before you can execute the JS file, because the render tree can’t be built until the DOM and CSSOM are built. And JS can manipulate CSS styles.

However, when parsing the CSS file and building the CSSOM, the browser can download and parse the JS file, and then execute the JS file after the CSSOM is built.

Analytical metdisplay: none;Will it enter the rendering process

A render tree is a tree representation of the elements that can eventually be rendered to the page. That is, the browser encounters display: None; Elements are placed in the DOM tree, but not in the render tree

What does redraw mean? What is reflux?

Redraw (repaint)

Redraw is when elements only need to change their appearance and style without affecting their layout. Changing background-color, for example, is called redrawing

Reflux (reflow)

Backflow is the process of rebuilding the render tree when an element needs to change size or layout

The difference between

  • Backflow always causes redraw, and redraw does not necessarily cause backflow. Like just changingcolorRedraw will only occur without causing backflow
  • Backflow costs more than drawing, and the more nodes in the rendering tree that need to be rebuilt, the more overhead

This means that redraw and backflow have a significant impact on browser performance

What are some ways to get a document out of the document flow?

  • float
  • absolute
  • fixed

Reduce redraw and reflux for improved performance

As a developer, save as much memory as you can, optimize your browser performance, improve the user experience, and don’t do fancy animations for the thrill of the moment (I’m looking at you: the product manager). Promise me you’ll be nicer to the browser

1. Usevisibility: hidden;Instead ofdisplay: none;

The difference between them is: visibility: hidden; Is to hide an element, but the hidden element still needs to occupy the location, will enter the render tree. And display: none; An element that disappears completely, does not occupy its original position, and does not enter the render tree.

That is, we are using display: None; When switching the display, the page will backflow and rebuild the node, which will have a significant impact on performance, and we use visibility: hidden; Switching between displays only causes redrawing and not backflow, which is browser-friendly.

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

Table elements are always dependent on each other, and a small change can result in an expensive rearrangement of the entire table

3. CSS selectors avoid too many layers

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

CSS reads from right to left, that is: find all spans, start from the first span, search p along the parent element of the span, add to the result set if a matching node is found along the way, and repeat the process from the next span if not all the way to the root HTML element. Too many layers can add overhead to the browser, so avoid this nesting behavior

Recommended reading

  1. What is backflow, what is redraw, what is the difference?
  2. CSS selectors match rules from right to left
  3. Nuggets of information – The front end of the interview process