Who dominates redraw and reflow in the rendering phase?-HTML Tutorial-php.cn

Who dominates redraw and reflow in the rendering phase?

王林

Release： 2024-01-26 10:15:06

Original

925 people have browsed it

Who dominates redraw and reflow in the rendering phase?

Redraw and reflow in the rendering phase: who plays the leading role?

With the continuous advancement of Web technology, the rendering process of web pages has become more and more complex. In the process of browser rendering web pages, repaint and reflow are two very important concepts. This article will introduce in detail the concepts of redraw and reflow and their role in the rendering process, and further illustrate their operating mechanism through specific code examples.

First of all, it needs to be clear that redrawing and reflow are two independent stages of web page rendering. Redrawing occurs when the appearance of an element changes without affecting its layout. Reflow refers to the operation performed when the size, position, or other layout properties of an element change. The reflow operation is relatively more computationally intensive because it requires recalculating the layout.

So, in the rendering process, which one plays the leading role, redrawing or reflow? Really, it depends on the trade-offs between various factors. Generally speaking, if there is only a redraw operation, redraw will play a dominant role because the cost of redraw is relatively low. And if there is a reflow operation, no matter where the reflow mark appears, reflow will play a leading role because the cost of reflow is higher.

Next, we will use a specific code example to illustrate the relationship between redrawing and reflow. Let's say we have a simple web layout that contains a button element and a textbox element. When the button is clicked, the redraw and reflow operations of the text box element are triggered by changing the value of the text box. The code is as follows:

<!DOCTYPE html>
<html>
<head>
  <title>重绘和回流示例</title>
  <style>
    .container {
      width: 200px;
      height: 100px;
      background-color: #ccc;
    }

    .btn {
      padding: 10px;
      background-color: #f00;
      color: #fff;
    }

    .input {
      width: 180px;
      height: 30px;
      margin-top: 10px;
    }
  </style>
</head>
<body>
  <div class="container">
    <button class="btn" onclick="changeText()">改变文本</button>
    <input class="input" type="text" value="原始文本">
  </div>

  <script>
    function changeText() {
      var input = document.querySelector('.input');
      input.value = '改变后的文本';
    }
  </script>
</body>
</html>

Copy after login

In this example, when we click the button, the value of the text box is changed through JavaScript code. This operation will trigger the redraw and reflow operations of the text box element. Specifically, changing the value of the text box will cause the size and content of the text box to change, causing reflow; at the same time, changing the appearance of the text box will also cause redrawing.

To sum up, redrawing and reflow are two important concepts in web page rendering. Redraw mainly involves a change in the appearance of an element, while reflow involves a change in the layout of an element. During the rendering process, the costs of redrawing and reflowing are different and need to be weighed on a case-by-case basis. In the process of writing web page code, you can reduce the redrawing and reflow operations of the web page through reasonable layout design and code optimization, thereby improving the rendering performance of the web page.

References:

https://developers.google.com/web/fundamentals/performance/rendering#css
https://developers.google .com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing

The above is the detailed content of Who dominates redraw and reflow in the rendering phase?. For more information, please follow other related articles on the PHP Chinese website!