Browser rearrangement and redraw

Rearrangement (reflux):

Parses generates two internal data structures after the browser download all the resources page: DOM tree and render tree. DOM tree representation of the page structure, rendering shows how the DOM node tree display. DOM element geometry changes, structural changes in the DOM tree, you need to be recalculated render tree, can cause the browser rearrangement and redrawn.

It will trigger the rearrangement of operation:

  1. When the initial page rendering;
  2. Browser window size is changed;
  3. When the element size changes;
  4. Element position is changed;
  5. Element content is changed;
  6. When add or remove visible DOM element;
  7. When acquiring some of the attributes: offsetTop, offsetLeft, offsetWidth, offsetHeight, scrollTop, scrollLeft, scrollWidth, scrollHeight, clientTop, clientLeft, clientWidth, clientHeight, getComputedStyle ()

Rearrangement optimization methods:

  1. Elements from the document flow changes will not affect other elements that can be rearranged many times as necessary elements to set the position property. For example there are elements on the best animation set to absolute positioning.
  2. Since the display attribute none of the elements are not rendering tree, hidden elements of the operation will not lead to rearrangement of other elements. So, if you want to operate a complex element, you can hide it, and then display the operation is complete, so only hide and display the trigger twice rearrangement.

Redraw:

Redraw browser behavior change is the appearance of an element triggered, such as changing the visibility, outline, background color and other attributes. The browser will be redrawn according to the new attribute of the element, the element presents a new look.

Calculation of the render tree usually only need to traverse time to complete, with the exception of table and interior elements, it may be necessary to calculate several times to determine a good attribute values ​​render nodes in the tree, spend twice as much than the same element time, which is one of the reasons should try to avoid using table layout of the page.

Rearrangements and redraw the relationship:

Rearrangements will lead to redraw a rearrangement reaction will usually bring a range of elements, and even trigger rearrangement and redraw the entire document, the cost performance is high.
Redraw will not necessarily lead to rearrangement.

Published 258 original articles · won praise 21 · views 50000 +

Guess you like

Origin blog.csdn.net/wsln_123456/article/details/105298499