The browser's rendering process

1. Parse HTML and generate DOM tree

2. Parse CSS and generate CSS rule tree (CSSOM)

3. Merge DOM and CSSOM to generate a rendering tree (Render-Tree)

4. Calculate the layout of the rendering tree (Layout)

5. Render the layout to the screen (paint)

What is Reflow and Repaint

Rearrangement: When changes in the DOM cause changes in the geometric properties of elements, such as changing the width and height of elements and the position of elements, the browser has to recalculate the geometric properties of elements and rebuild the rendering tree. This process is called "rearrangement". Row".

Redrawing: When the position, size and other attributes of various boxes, such as color, font size and other attributes are determined, when the browser redraws according to their characteristics, it is called redrawing

In simple terms, when it comes to geometric updates of elements, it is called rearrangement. When only style updates are involved and geometry updates are not involved, it is called redrawing. For both, reflow must cause redraw, but redraw does not necessarily cause reflow. So, when it comes to rearrangement, the browser will perform the above steps again.

What operations will cause rearrangement and redrawing

Obviously, what triggers rearrangement is generally geometric factors, which is relatively easy to understand:

The first rendering of the page When the page is rendered for the first time, all components must be laid out for the first time, which is the most expensive rearrangement
Browser window size changes
When the element's position and size change
Add and remove visible elements
Content changes (number of text or image size, etc.)
Element font size changes
There are other operations that can also cause rearrangements

query some property or call some method

offset(Top|Left|Width|Height)
scroll(Top|Left|Width|Height)
client(Top|Left|Width|Height)
getComputedStyle()

We may not understand why these operations can also cause rearrangement, so let me explain briefly here. Because the current browsers are already very complete, they will automatically do some optimization for us. When we use js to operate the DOM, the browser does not execute it immediately, but stores the operation in a queue . When a certain number is reached or after a certain period of time, the browser will uniformly execute the operations in the queue. So back to our question just now, why does querying these attributes also cause reordering? Because when you query these properties, the browser will force the queue to be refreshed, because if the operations in the queue are not executed immediately, the result may be wrong. So it is equivalent to you forcibly interrupting the optimization process of the browser and triggering a rearrangement.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #test {
      width: 100px;
      height: 100px;
      background-color: red;
      position: relative;
    }
  </style>
</head>
<body>
  <div id="test">

  </div>
  <button onclick="reflow()">click</button>
  <script>
    function reflow() {
      var div = document.querySelector("#test");
      console.log(div.offsetLeft);
    }
  </script>
</body>
</html>

In the above code, when we click the button, the browser immediately recalculates the CSSOM, but does not trigger the rearrangement

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #test {
      width: 100px;
      height: 100px;
      background-color: red;
      position: relative;
    }
  </style>
</head>
<body>
  <div id="test">

  </div>
  <button onclick="reflow()">click</button>
  <script>
    function reflow() {
      var div = document.querySelector("#test");
      div.style.left = '200px';
      console.log(div.offsetLeft);
      div.style.left = '100px';
      console.log(div.offsetLeft);
      div.style.left = '200px';
      console.log(div.offsetLeft);
      div.style.left = '100px';
      console.log(div.offsetLeft);
    }
  </script>
</body>
</html>

The above code triggers 4 reflows

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #test {
      width: 100px;
      height: 100px;
      background-color: red;
      position: relative;
    }
  </style>
</head>
<body>
  <div id="test">

  </div>
  <button onclick="reflow()">click</button>
  <script>
    function reflow() {
      var div = document.querySelector("#test");
      div.style.left = '200px';
      div.style.left = '100px';
      div.style.left = '200px';
      div.style.left = '100px';
      console.log(div.offsetLeft);
      console.log(div.offsetLeft);
      console.log(div.offsetLeft);
      console.log(div.offsetLeft);
    }
  </script>
</body>
</html>

The above code triggers only one reflow

Reflow and repaint

The browser's rendering process

What is Reflow and Repaint

What operations will cause rearrangement and redrawing

Guess you like