Reduce page reflow and redraw (Reflow & Repaint)

If your HTML becomes very large and complex, it may not be the complexity of the JavaScript code that affects your JavaScript performance, but the reflow and redrawing of the page.

reflux (Reflow) is the process by which the layout engine calculates graphics for a frame. A frame is a rectangle that has a wide height and an offset relative to the parent container. Frame is used to display the box model (content model), but a content model may be displayed as multiple frames, such as line-wrapping text, each of which appears as a frame.

For a description of the CSS box model, please refer to: CSS box model and its rendering method

Redraw (Repaint) occurs when the visibility of an element changes, such as the background color, foreground color, and so on. So backflow is bound to cause repainting.

HTML layout

HTML uses a streaming layout model (flow based layout), which means that in most cases, all graphical displays can be computed in a single scan. Elements that are behind the stream generally do not affect the graphics of the preceding elements, so the layout process can be left-to-right, top-to-bottom.

All HTML reflow starts with the root frame (the HTML tag) and recursively handles some or all of the child frames. It is also possible to create a new frame during reflow, such as text that has a newline. The backflow of a frame causes all its parent nodes and all subsequent elements to reflow.

Some HTML reflow is performed immediately (immediate to user or script) and affects the entire frame tree, such as window size changes, changing the document's default font, and some HTML reflow is asynchronous, progressive (incremental), For example, more document flows are arriving from the network, and these progressive backflow can be queued for batch processing.

Causes of reflux

The browser handles the frame recursively when it implements the reflow. There is a reason for the backflow of each frame, which is passed down as the frame progresses (which may change during delivery). The reason for the reflux is that the current frame reflux behavior, there are 5 reasons:

1. Initialization (Initial). The first reflow after the DOM is loaded will traverse all frames.
2. Progressive (Incremental). When a frame has a gradual reflow, it means that the elements in front of it have not changed, but that the elements inside it have changed. This can cause a bottom-up effect.
3. Change the size (Resize). When the container boundary of an element changes, the inner state of the element does not change at this time. The internal state can be reused while calculating the top-down layout constraints.
4. Style Change (stylechange). The entire frame tree should be traversed.
5. Dirty. When a container has cached the incremental reflux of many child elements, the container is out of dirty state.

The reflux of the previous four causes is called immediately in the presentation shell, and the last reflux only occurs when the incremental reflux has reached the target frame. (Since the bottom-up effect is calculated, the container's graphical display can be determined)

If you are a web developer, you may be more concerned about the specific reasons why the browser will reflow, listed below:

2. resizing windows
4. Change font Size
6. Style sheet Changes
8. element content changes, especially input controls
10. CSS pseudo-class activation
12. DOM Operations
13. offsetWidth,width,clientWidth,scrollTop/scrollHeightCalculation, the browser will flush the progressive reflow queue and perform the reflow immediately.

offsetheight , to summarize these confusing HTML element attributes:

• clientheight : The inner viewable area size.

  returns the inner height of an element in pixels, including padding and not the horizontal scrollbar height, border, or margin

• offsetheight : The entire viewable area size, including border and ScrollBar.

  is a measurement which Includes the element borders, the element vertical padding, the element horizontal scrollbar (if present, if rendered) and The element CSS height.

• scrollheight : The height of the element content, including the overflow section.

  is a measurement of the height of an element ' s content including content is not visible on the due to overflow

• scrollTop: How many pixels the element content scrolls up.

  The number of pixels that content of a element is scrolled upward.

Best practices

The most useful thing for our web developers is how to do it to reduce page reflow. Let's take a first example:

var s = Document.Body.style; s.padding = "2px"; //reflow + redraws.Border = "1px solid Red"; //re-reflow + redraws.Color = "Blue"; //Redraw agains.BackgroundColor = "#ccc"; //Redraw agains.fontSize = "14px"; //re-reflow + redraw//Add node, once again Reflow + redrawDocument.Body.appendchild(Document.createTextNode(' abc! '));

You can see that each time a DOM element's style operation throws a redraw, and if the layout is involved, it also causes reflux. This example is from: http://www.blogjava.net/BearRui/archive/2010/05/10/320502.html

There are many ways to avoid a lot of page reflow, which is essentially minimizing the DOM operations that cause reflow and redrawing:

2. style property, or define the style list as class and change once class property.

3. avoid looping the DOM. Create a documentfragment or div , apply all DOM operations on it, and finally add it to window.document .

   can also be in a display:none the element on the and eventually displays it. Because display:none does not cause reflow and redraw.

5. Avoid offsetLeft properties such as cyclic reads. Save them before the loop.

7. Absolute positioning of elements with complex animations. Absolute positioning to leave it out of the document Liu, otherwise it will cause the parent element and subsequent elements of a large number of reflux.

   Good performance can also be achieved with CSS3 's transition.

Unless noted, this blog article is original, reproduced please link to the form of this article address: http://harttle.com/2015/08/11/reflow-repaint.html

Copyright NOTICE: This article is for bloggers original articles, reproduced please attach the original link.

Reduce page reflow and redraw (Reflow & Repaint)