Shulou(Shulou.com)06/02 Report--

This article mainly explains "what is backflow in javascript". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "what is backflow in javascript".

In javascript, backflow is also called rearrangement, which refers to the process that the browser renders part of the DOM or all of the DOM when part or all of the rendering tree changes due to the size, layout, hiding, and so on of the elements; to put it simply, it means rearranging the entire page.

The operating environment of this tutorial: windows7 system, javascript1.8.5 version, Dell G3 computer.

First of all, take a look at the rendering process of the browser (the picture is from the network)

The process of generating a render tree by a browser (the picture is from the network)

Reflux

When some or all of the rendering tree changes due to the size, layout, hiding, and so on, the browser renders some or all of the DOM.

Backflow is also known as rearrangement, but literally, rearrangement is easier to understand (that is, relayout the entire page).

Redraw

When a page element style change does not affect the position of the element in the document stream (such as background-color,border-color,visibility), the browser simply assigns the new style to the element and redraws it.

When will reflow or redraw be triggered?

There are a large number of user behaviors and potential DHTML changes that trigger backflow. For example, change the size of the browser window, use some JavaScript methods, including calculation styles, add or remove elements to DOM, or change the class of elements.

Add or remove visible DOM elements; element position changes; element size changes-margins, fills, borders, width and height; content changes, such as calculated width and height changes caused by user typing text in input box, text or picture size change; page rendering initialization; browser window size change, resize event occurs; calculate offsetWidth and offsetHeight properties; set the value of style attribute

Repainting is bound to cause repainting, and repainting does not necessarily cause reflow.

How to reduce backflow and redraw? Avoid reflow and redrawing in CSS

1. Change the class at the end of the DOM tree as much as possible

two。 Avoid setting multi-layer inline styles

3. Animation effects are applied to elements whose position attribute is absolute or fixed

4. Avoid using table layouts

5. Using css3 hardware acceleration, you can make transform, opacity, filters and other animation effects do not cause reflow redrawing.

2. Avoid reflow and redrawing in JS operation

1. Avoid using JS to modify one style and then change the next. It is best to change the CSS style at once, or define the style list as the name of the class.

two。 To 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 it, because the DOM operation on display:none does not cause reflow and redrawing

4. Avoid reading properties such as offsetLeft in a loop and save them before the loop

5. For complex animation effects, use absolute positioning to detach them from the document stream, otherwise it will cause a large number of backflows of parent and subsequent elements

Thank you for your reading, the above is the content of "what is backflow in javascript". After the study of this article, I believe you have a deeper understanding of what backflow is in javascript, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.