What is the difference between browser redraw and rearrangement?

  • Rearrangement: Parts of the render tree (or the entire render tree) need to be re-analyzed and the node sizes recalculated, in the form of regenerating the layout and rearranging elements
  • Redraw: Parts of the screen need to be fresher when the geometry of the node is changed or due to style changes, such as changing the background color of the element, showing that the appearance of some elements is changed

How to trigger rearrangement and redraw?

Any changes to the information used to build the render tree will result in a rearrangement or redraw:

Add, delete, and update DOM nodes by using display: None to hide a DOM node – triggering rearrangement and redrawing via visibility: Hidden To hide a DOM node – Only trigger redraw, since there are no geometric changes to move or animate the DOM node in the page. Add a style sheet, adjust the style properties user behavior, such as resize the window, change font size, or scroll.

How to avoid redrawing or rearranging?

1. Focus on changing styles

Const theme = isDark? 'dark' : 'light'
Copy the code
Class ele.setattribute ('className', theme)
Copy the code

2.DocumentFragment

The CreateDocumentFragment () method creates a virtual node object that can be batched on during DOM operations and then inserted into the DOM tree, triggering a single rearrangement

var fragment = document.createDocumentFragment(); 
for (let i = 0; i<10; i++){let node = document.createElement("p"); node.innerHTML = i; fragment.appendChild(node);
}
document.body.appendChild(fragment);
Copy the code