Redraw and rearrangement of rearrangement in HTML

This article shared the content of the use of re-drawing and rearrangement in HTML. Xiaobian feels quite practical, so share it with you to do a reference. Let’s take a look at Xiaobian.

Browser loading page Principle

When the document is initially loaded, the browser engine parses the HTML document to build a DOM tree, and then constructs according to the geometric attributes of the DOM element. A tree for rendering. Each node of the rendering tree has attributes such as size and margins, similar to the box model (because the hidden elements do not need to be displayed, the rendering tree does not include an element hidden in the DOM tree). When the rendering tree is built, the browser can place the element to the correct position, and then draw the page according to the style attribute of the rendering tree node. Due to the flow layout of the browser, the calculation of the rendering tree is usually only traversed once. But except for Table and its internal elements, it may require multiple calculations to determine the properties of their nodes in the rendering tree, usually spend 3 times the time of the same element. This is why we want to avoid using table for a reason for layout.

Redraw is a change in the appearance of an element that is triggered, such as changing attributes such as VIDIBILITY, OUTLINE, background colors. The browser will resemble the elements based on the new attributes of the elements to present new appearances. Redrawing will not bring re-layout, and it is not necessarily accompanied by rearrangement. The browser is to pay high performance costs when redraw and rearrange.


The rearrangement is a more obvious change, it is understood that the rendering tree needs to be recalculated. Here is a common trigger rearranged operation:

    The geometric attribute changes of the DOM element.
  1. The structure of the DOM tree.

  2. , for example, the increase or decrease, movement, etc. of the node.

  3. acquires some attributes.

When some properties are obtained, the browser will also trigger the rearrangement. This makes the browser’s optimization invalid. These properties include: offsetTop, offsetLeft, offsetWidth, offsetHeight, scrollTop, scrollLeft, scrollWidth, scrollHeight, clientTop, clientLeft, clientWidth, clientHeight, getComputedStyle () (currentStyle in IE). Therefore, caching should be carried out multiple times.

Further, some styles of the elements are changed, and the browser window size, the scroll bar appears, and the like will also trigger the rearrangement.

Reduces the number of rearrangements and the rearrangement impact range

1, the operation of changing the pattern properties is combined into one operation. For example,

JS: var changep = document.getlementByid (‘ChangeP’); ChangeP.Style.Color = ‘# 093’; ChangeP.Style.Background = ‘#eee’; = ‘200px’; can merge to: css: p.changep {background: #eee; color: # 093; height: 200px;} js: document.GtelementByid (‘changep’). Classname = ‘change (123)

2, the elements that will require multiple rearrangements, the position attribute is set to absolute or fixed so that this element is separated from the document stream, and its change does not affect other element. For example, an element with animation effect is preferably set to absolute positioning.

3. Multiple operation nodes in memory, then add it to the documentation. For example, you need to take the table data asynchronously and render it to the page. You can first obtain the data, build the HTML segment of the entire table in memory, and then add each line to the document again, not a loop to add each row. 4. Due to the element of the Display property is None is not rendered, the hidden element operation does not cause rearrangement of other elements. If you want to perform a complex operation of an element, you can hide it, and then display it after the operation is complete. This triggers 2 heavy rows only when hidden and displayed.
 5, when needed, when you need to take the property value that causes the browser rearrangement, you want to cache the variable   Thank you for reading! Regarding the use of redrawing and rearrangement in HTML, sharing here, I hope that the above can help everyone, let everyone learn more knowledge. If you feel that the article is good, you can share it out to let more people see it! 
© Copyright Notice
Just support it if you like
comment Grab the couch

Please log in to comment