What is reflow in javascript

In JavaScript, reflow is also called reflow, which refers to the process in which the browser re-renders part or all of the DOM when part or all of the rendering tree changes due to the size, layout, hiding, etc. of the element. ; To put it simply, it means to reformat the entire page.

The operating environment of this tutorial: windows7 system, javascript version 1.8.5, Dell G3 computer.

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 from the Internet)

##Backflow

When the rendering tree The process of the browser re-rendering part or all of the DOM when part or all of the element's size, layout, hiding, etc. changes.

Reflow is also called rearrangement. In fact, literally, rearrangement is easier to understand (that is, rearrangement of 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.

添加或者删除可见的DOM元素；
元素位置改变；
元素尺寸改变——边距、填充、边框、宽度和高度；
内容变化，比如用户在input框中输入文字，文本或者图片大小改变而引起的计算值宽度和高度改变；
页面渲染初始化；
浏览器窗口尺寸改变，resize事件发生时；
计算offsetWidth和offsetHeight属性；
设置style属性的值；

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 trigger 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.

[Recommended learning:

javascript advanced tutorial

]

The above is the detailed content of What is reflow in javascript. For more information, please follow other related articles on the PHP Chinese website!