DOM reflux and redraw -JS

Reflow (reflow)

When the structure or position of the DOM element is changed (deleting, adding, changing position, resizing ...) will trigger reflux, the so-called reflux, is the browser to abandon the original structure and style of computing, new or carried DOM TREE RENDER TREE, very very very ... consumption performance.

Redraw (repaint)

When a DOM element style changes (position not changed only style changes, such as: color to red ...) browser will re-render this element.

solution

• Based on (a container to open up virtual memory) file fragmentation can solve this problem: Whenever you create a LI, we first put it into a document stored fragments (do not put the page to avoid reflux), when we need elements are created, and are added to the document fragments, fragments into a unified the document page (only trigger a reflow operation).

let frg = document.createDocumentFragment();
data.forEach((item, index) => {
     let curLi = document.createElement('li');
     curLi.innerHTML = `<a href="#">
             <img src="img/1.jpg" alt="">
             <p title="${title}">${text}</p>
             <span>"${price}"</span>
             <span>时间：${date}</span>
             <span>热度：{$hot}</span>
         </a>`;
     frg.appendChild(curLi);//=>每一次把创建的LI存放到文档碎片中
 });
 document.querySelector('.productBox').appendChild(frg);//=>把文档碎片中的内容，统一存放到页面中
 frg = null;

• Separate Read (the new version of the browser)

//[引发两次回流]
 box.style.top = '100px';
 console.log(box.style.top);//=>'100px'
 box.style.left = '100px';

//[引发一次回流]
box.style.top = '100px';
box.style.left = '100px';
console.log(box.style.top);//=>'100px'