How to reduce page backflow and redraw

Reduce manipulation of the DOM

When you need to add, delete, modify, or query multiple DOM, do not directly operate on a single DOM

<ul id="box"></ul>

<script>
  	// Example 1- Create a virtual DOM object using the createDocumentFragment method, copy the object that needs to be modified for the new DOM, modify the created DOM accordingly, and finally replace the old DOM with the new DOM
  	// This can merge multiple changes to the DOM into one, greatly reducing the number of reflows and redraws
    let box = document.querySelector('#box')
    let test = document.createDocumentFragment()
    for (let i = 0; i < 5; i++) {
        let li = document.createElement("li")
        li.appendChild(document.createTextNode(i))
        test.appendChild(li)
    }
    box.appendChild(test)
  
  
  	Example 2- Hide the DOM that needs to be modified, and display the DOM again after the modification is complete
  	// With display: None the render tree will not render the current DOM, so multiple operations will not trigger multiple backflows and redraws
  	let box = document.querySelector('#box')
    box.style.display = 'none';
  	for (let i = 0; i < 5; i++) {
        let li = document.createElement("li")
        li.appendChild(document.createTextNode(i))
        box.appendChild(li)
    }
</script>
Copy the code

Takes the element out of the document flow

Because some elements on the page are constantly animated, they will always trigger backflow and redraw. In this case, you can remove these elements from the document flow to reduce the number of page backflow and redraw.

Float, relative, and Absolute are used to remove elements from the document flow.

Avoid or reduce access to certain properties

The browser’s render queue mechanism stores the actions that trigger backflow or redraw by queuing them until a certain amount of time or time has passed before they are executed.

However, certain operations can cause the browser to force a queue refresh, such as: OffsetTop, offsetLeft, offsetWidth, offsetHeight, scrollTop, scrollLeft, scrollWidth, scrollHeight, clientTop, clientLeft, clientW Idth, clientHeight, getComputedStyle, getBoundingClientRect;

In order to get the latest page information, the browser needs to perform all operations in the queue immediately. If this method is used frequently, it will trigger frequent backflow and redraw.

The above methods/attributes need to be minimized or avoided

Avoid single changes to the CSS

// Avoid using style more than once
let box = document.querySelector('#box')
div.style.width = '20px';
div.style.backgroundColor = '# 555';

// You can use cssText to combine multiple times into one
div.style.cssText += "; width: 20px;";

// Add class
div.className += " newBox";
Copy the code

Will-change (poor compatibility)

The MDN: CSS attribute will-change provides web developers with a way to tell browsers that an element is about to change, so that browsers can optimize it before it actually changes. This optimization prepares some of the more complex calculations ahead of time, making the page more responsive and responsive.

Matters needing attention:

Do not apply will-change to too many elements, as this will consume too much browser resources and result in slow page response. Just like the property management of only one building, if suddenly become the management of ten buildings, then it will lead to the management of the situation;
Instead of writing will-change directly in your CSS, try to set it before it changes.

PS: To see how a browser parses and renders a page, take a look at my article on how a browser parses and renders a page

How to reduce page backflow and redraw