Introduction to knowledge related to reflow (reflow) and redrawing in JavaScript (code examples)

This article brings you knowledge about reflow (reflow) and redrawing in JavaScript (code examples). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you. Helps.

Let’s briefly understand the rendering process of the browser (pictures come from the Internet)

The process of the browser generating the rendering tree(Pictures come from the Internet)

Reflow

Reflow When part of the render tree or All because when the size, layout, hiding, etc. of the element change, the browser re-renders part of the DOM or the entire DOM. Reflow is also called reflow. In fact, literally, reflow is easier to understand (that is, reflowing the entire page).

Redraw

When the page element style change does not affect the element's position in the document flow (such as background-color, border-color, visibility), the browser will only assign the new style element and repaint it.

When will reflow or redraw be triggered?

There are a large number of user behaviors and potential DHTML changes that can trigger reflow. For example, change the size of the browser window, use some JavaScript methods, including calculating styles, adding or deleting elements to the DOM, or changing the class of elements, etc.

Add or delete visible DOM elements;
Element position changes;
Element size changes - margins, padding, borders, width and height;
Content changes, such as when the user inputs Enter text in the box, and the calculated value width and height change caused by the change in text or picture size;
Page rendering initialization;
When the browser window size changes and the resize event occurs;
Calculate the offsetWidth and offsetHeight properties;
Set the value of the style attribute;

Reflow will definitely cause redrawing, but redrawing will not necessarily cause reflow.

How to reduce reflow and redraw?

1. Avoid reflow and redrawing in CSS

1. Change the class at the end of the DOM tree as much as possible
2. Avoid setting multiple layers of inline styles
3. Animation effects are applied to elements whose position attribute is absolute or fixed
4. Avoid using table layout
5. Use css3 hardware acceleration to prevent animation effects such as transform, opacity, and filters from causing reflow and redraw

2. JS operations to avoid reflow and redraw

1. Avoid using JS to modify one style and then change the next style. It is best to change the CSS style at once, or define the style list as a class Name
2. Avoid frequent DOM operations, use document fragments to create a subtree, and then copy it to the document
3. Hide the element first, modify it and then display the element, because the DOM operation on display:none Will not cause reflow and redraw
4. Avoid looping to read attributes such as offsetLeft and save them before looping
5. For complex animation effects, use absolute positioning to separate them from the document flow, otherwise it will cause the parent A large number of reflow elements and subsequent elements

Summary:

Reflow is a user-directed operation in the browser, so know how to improve the reflow time and know various document attributes (DOM nodes The impact of depth, CSS rendering efficiency, various style changes) on reflow time is very helpful for front-end development. Sometimes even reflowing a single element may require that its parent element and any following elements also be reflowed. For example, if you need to change the background of an element, this does not involve the attributes of the element, so only redrawing occurs.

The above is the detailed content of Introduction to knowledge related to reflow (reflow) and redrawing in JavaScript (code examples). For more information, please follow other related articles on the PHP Chinese website!