JavaScript reduces reflux

Reduced reflux (reflows)

When the browser re-renders the elements in the document, they need to recalculate their position and geometry, which we call reflux. Reflux can block the user's actions in the browser, so it is very helpful to understand how to increase the reflow time.

Reflow Time Chart

You should trigger reflow or redraw in batches, but use these methods sparingly. It is also important to try not to handle the DOM. You can use DocumentFragment, a lightweight document object. You can use it as a way to extract part of the document tree, or create a new document "Fragment". Instead of adding DOM nodes continuously, use only one DOM insert after the document fragment to avoid excessive reflow.

For example, we write a function to add 20 div to an element. If you simply append a div into the element each time, this triggers 20 reflux.

function Adddivs (Element) {  var div;  for (var i = 0; i <; i + +) {    div = document.createelement (' div ');    div.innerhtml = ' heya! ';    Element.appendchild (div);}  }

To solve this problem, you can use DocumentFragment instead, we can add a new div to the inside each time. Adding DocumentFragment to the DOM after completion will only trigger a reflow.

function Adddivs (Element) {  var div;  Creates a new empty documentfragment.  var fragment = Document.createdocumentfragment ();  for (var i = 0; i <; i + +) {    div = document.createelement (' a ');    div.innerhtml = ' heya! ';    Fragment.appendchild (div);  }  Element.appendchild (fragment);}

JavaScript reduces reflux