DOM的回流和重绘-JS

回流(reflow)

当DOM元素的结构或者位置发生改变（删除、增加、改变位置、改变大小...）都会引发回流，所谓回流，就是浏览器抛弃原有计算的结构和样式，从新进行DOM TREE或者RENDER TREE，非常非常非常...消耗性能。

重绘(repaint)

当某一个DOM元素样式更改（位置没变只是样式更改，例如：颜色变为红色...）浏览器会重新渲染这个元素。

解决方案

• 基于文档碎片(虚拟内存中开辟的一个容器)可以解决这个问题：每当创建一个LI，我们首先把它存放到文档碎片中（千万不要放到页面中，避免回流），当我们把需要的元素都创建完成，并且都添加到文档碎片中，在统一把文档碎片放到页面中（只会引发一次回流操作）。

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;

• 分离读写(新版本浏览器)

//[引发两次回流]
 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'