【Front end tutorial】JS browser reflow & repaint

JS browser reflow reflow repaint repaint

What is reflow and redraw

Rearrange and redraw are common processes for browser rendering

  • Rearrangement means that when the position, size, etc. of an HTML element changes, the browser needs to recalculate its position and the position of all elements affected by it.
    This process of recalculation is called rearrangement

  • Redrawing means that when any changes occur to the HTML elements, the content of the browser window needs to be redrawn. The process of redrawing is called redrawing.

It can be seen from this that when any changes are made to HTML elements, it is possible to trigger browser rearrangement and redraw

What’s wrong with reordering and redrawing?

Browser reordering and redrawing is a very time-consuming process, which means that it is a bottleneck point that greatly affects performance

It will involve a lot of calculation process, image drawing process, etc.

Let’s look at the process of rearranging and redrawing

Let’s take a look at the following picture


Reflow and redraw

This picture depicts the rendering process of the browser

HTML parses HTML to generate a DOM tree
CSS rules After CSS parsing, a rule tree is generated

DOM tree and rule tree are combined to generate a rendering tree
The rendering tree is directly rendered in the browser window after being processed by the GUI

Rearrangement is the process of regenerating the render tree Render Tree
Redrawing is the process of redrawing the Render Tree to the browser window Display

In comparison, rearrangement has a larger amount of calculation and consumes more performance than redrawing. In actual online products, redrawing is inevitable, but rearrangement can come in to reduce the number of times.

What changes will cause rearrangement

  • When the HTML is first loaded for rendering, the rendering tree is generated for the first time, and all elements need to be calculated once.
  • The browser window size changes by stretching (if the browser position is changed, it will not be rearranged)
  • the change process of displaying and hiding HTML elements
  • The process of increasing or decreasing HTML content, because the content length changes cause the size of HTML elements to change.
  • wait for other HTML changes

In short, as long as it affects the size, position, and hidden status of HTML elements, it will trigger rearrangement.

What changes will cause redraw

All HTML changes cause the process of rearrangement, which will definitely cause redrawing, because it needs to be redrawn to the browser

But redrawing doesn’t necessarily trigger reflow

For example, the various color changes of HTML elements, the display and hiding of visibility, will cause redrawing, but will not cause rearrangement.

How can I improve performance in reordering and redrawing?

Rearrangement and redrawing are inevitable, but we can minimize the number of rearrangements and redraws

First of all
We also know that there are some optimization methods for reordering and redrawing in modern browsers.
Reordering operations are buffered and merged in a very short time

Second
When we develop code, we should be aware of the time when rearrangement and redrawing occur

As general code:

1
2
3
el.style.left = '10px';
el.style.top = '20px';
el.style.fontSize = '30px';

Here are three modifications to the HTML element, each of which triggers a rearrangement (affecting the size and position of the element)

Optimized code:

1
el.style.cssText += '; left: 10px; top: 20px; font-size: 30px;';

Merge changes to HTML elements, triggering only one reflow and redraw

Of course the first way of writing, the browser will also optimize the merge operation to some extent

Persist in original technology sharing, your support will encourage me to continue to create!