Page display process:

1. Generate a DOM TREE

2. Load the CSS

3. Generate the RENDER TREE, which is related to the style

4. The browser starts to RENDER the page based on the GPU(graphics card)


Redraw (repaint) :

When a DOM element style changes (the position does not change but the style changes, e.g., the color changes to red…) The browser will re-render the element

Example:

box.style.color = 'red'/ /... box.style.fontsize ='16px'Copy the code

The above operation triggered two redraws, which cost performance. In order to optimize performance, it is better to fix the styles that need to be changed at once. For example:

.xxx{
    color:'red',
    font-size:'16px'
}
box.className = 'xxx'Copy the code


Reflux (reflow)

1. Render for the first time

2. When the structure or position of a DOM element changes (delete, add, reposition, resize……)

3. Retrieving certain attributes can also cause backflow

Backflow is when the browser abandonsthe structure and style of the original computation and redo the DOM TREE or RENDER TREE, very, very, very…… Consumption performance


The solution

1. Avoid frequent style manipulation: Do all the styles you need to change at once

2. Avoid frequent DOM manipulation:

Based on document fragments (virtual memory in the opening of a container) can solve this problem: when creating a LI, we first put it there document fragments (don’t on the page, avoid backflow), when we finish the required elements are created, and are added to the document fragments, in unified put document fragments in the page (only trigger a reflux operation)

letfrg = document.createDocumentFragment(); // Create a document shard containerCopy the code