“This is the 7th day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021.”

When the browser has downloaded the elements needed for the page (HTML tags, CSS cascading style sheets, javascript, images), it generates two things: a Dom tree and a render tree.

1. Rearrange reflow

When the layout and geometry of the page changes, it needs to be rearranged.

The following situations can also be rearranged:

  • Add and/or remove visible DOM elements
  • The position of the element changes
  • The size of the element changes (including changes in margins, margins, border thickness, width, height, etc.)
  • Changes in content (e.g. height changes due to increased content or the image being replaced by another image of a different size)
  • Initialized by the page renderer
  • The browser window size has changed

2. Repaint

When the appearance of an element is changed, the browser will redraw the element based on its new attributes to render the element the new appearance.

Such as color and background color

Rearrangement always leads to redrawing, but redrawing does not necessarily lead to rearrangement.

3. What actual operations will result in backflow and redrawing

3.1 Most expensive operation: Changing the geometry of DOM elements

3.2 “Affordable” operation: Change the DOM tree structure

3.3 The most overlooked operation: Get the value of some specific attribute

  • When you use properties like this: OffsetTop, offsetLeft, When offsetWidth, offsetHeight, scrollTop, scrollLeft, scrollWidth, scrollHeight, clientTop, clientLeft, clientWidth, clientHeight, Pay attention!

  • What does the “like” property look like? The common feature of these values is that they need to be computed in real time. So the browser also backflows to get those values.

  • In addition, when we call the getComputedStyle method, or currentStyle in IE, we also trigger backflow. The principle is the same, both for a “immediacy” and “accuracy”.

4. How to avoid backflow and redraw

4.1 Cache redraw behaviors to avoid frequent changes

  • Do not place DOM node property values in a loop as variables in the loop.
  • Can use anti – shake, throttling
  • Try not to use a table layout.
  • If multiple DOM nodes need to be created, you can use the DocumentFragment to add the Document once after creation.
var fragment = document.createDocumentFragment();
 
var li = document.createElement('li');
li.innerHTML = 'apple';
fragment.appendChild(li);
 
var li = document.createElement('li');
li.innerHTML = 'watermelon';
fragment.appendChild(li);
 
document.getElementById('fruit').appendChild(fragment);
Copy the code
  • Used for animated HTML elementsposition: fixed/absolute, then modify their CSS is not reflow
    • The element is removed from the document flow, and its changes do not affect other elements

4.2 Avoid changing styles line by line and use class names to merge styles

  • Instead of changing the STYLE of the DOM one by one, define the CSS class first and then change the DOM className.
var el = document.getElementById('mydiv');
el.style.width = '300px'; 
el.style.height = '400px';
el.style.margin = '15px';
Copy the code

4.3 Taking the DOM Offline

All of the reflow and redraw we mentioned above can happen if the element is on the page. Once we “take” an element off the page by setting display: None, we will not be able to trigger backflow and redraw — this “take” of the element is called DOM offline.

The advantages of DOM offline are really not obvious when we need to do very little DOM manipulation. Both the “take off” and “put back” overhead will be well worth it once the operation becomes frequent.

5. Browser optimizations: Flush queues: Browsers are not that simple

Because modern browsers are smart. The browser itself knows that if every DOM operation returns a backflow or redraw in real time, performance is unsustainable. So it caches a flush queue of its own, and fills it with the backflow and redraw tasks that we trigger, and then flushes them out when there are more tasks in the queue, or when it reaches a certain interval, or when it “has to.”

So we see that even though we made four DOM changes above, we only fired one Layout and one Paint.

People are especially careful here when they have to. Earlier in our introduction to backflow “triggers,” we mentioned that there is a special class of properties that have a strong “immediacy.” When we access these attributes, the browser will flush the queue ahead of time in order to get the most accurate value for the attributes at the moment – this is called the “forced” moment.