Reflow is the size, layout, hiding, or reconstruction of elements in a page. This is called reflow (reflow blocks the user’s actions in the browser). Backflow is a performance killer because it can cause the entire DOM tree to be restructured. Backflow will certainly cause redrawing, and redrawing will cause backflow differently. However, backflow is top-down, so we can modify the information at the very end with less impact on the overall situation.

Browser kernel rendering engine rendering principles

Page redrawing and refluxing and optimization

When reflux occurs

1. Add or remove DOM elements 2. Change element position 3. Change element size (margin, padding, border, width, height) 4. Element content changes (text changes, image size changes due to the calculated value and height changes) 5. Page rendering initialization 6. Browser window changes (when resize is triggered) 7. Fixed positioned elements will always flow back when dragging the scrollbar 8. Set the value of styleCopy the code

redraw

To put it plainly, it is to change the background color of elements, font color and so on. Redrawing only affects the appearance and style of elements, and does not affect the layout

How to reduce backflow and redraw

var s = document.body.style; s.padding = "2px"; // backflow + redraw s.order = "1px solid red"; // Redraw s.color = "blue"; // Redraw s.buckgroundcolor again = "# CCC "; // Redraw s.ontSize = "14px" again; / / return again + redrawing / / add a node, reflux + redraw the document again. The body. The appendChild (document. The createTextNode (' ABC! '));Copy the code

Avoid backflow

Avoid backflow in CSS 1. Change class 2 as far as possible at the end of the DOM tree. Avoid setting multiple inline styles 3. Apply the animation effect to elements whose position attribute is absolute or fixed 4. Sacrifice smoothness for speed 5. Avoid table layouts 6. Avoid JavaScript expressions with CSS 2. JS operations avoid backflow 1. Avoid changing styles item by item. It is best to change the style property once, or define the style list as class and change the class property once. 2. Avoid cyclic DOM manipulation. Create a documentFragment or div, apply all DOM operations to it, and finally add it to window.document. 3. You can also operate on a display: None element to display it. Because DOM operations on display: None do not cause backflow and redraw. (Visibility: hidden, so it will cause backflow) 4. Avoid cyclic reading of properties such as offsetLeft. Save them before you loop. 5. Absolutely locate elements with complex animations. Absolute positioning removes it from the document liu, which would otherwise cause massive backflow of the parent and subsequent elements.Copy the code

Reference source

Interview: Pages load with tons of data

CreateDocumentFragment () createDocumentFragment() for a large amount of DOM that needs to be manipulated with a lot of data

function addDivs(element) { var div; // Creates a new empty DocumentFragment. var fragment = document.createDocumentFragment(); for (var i = 0; i < 20; i ++) { div = document.createElement('a'); div.innerHTML = 'Heya! '; fragment.appendChild(div); } element.appendChild(fragment); } window.requertAnimationFrame(addDivs)Copy the code

Page re-paint, will inform window. RequertAnimationFrame

Details can be viewed.

Does requestAnimationFrame have wool?

Advantages:

1. Centralized DOM operations (backflow, redraw, rearrange) of each frame in one backflow or redraw 2. Low CPU,GPU, and memory usage 3. The page is not activated and the method is not calledCopy the code

If you have any questions, please feedback in time.