重绘和回流的解释

Posted 2020-12-20 xiaobupro

（1）回流：当dom元素的结构或位置发生改变（删除，增加，改变位置）都会引发回流，所谓的回流就是浏览器抛弃原有的数据结构和样式，从新进行dom。非常耗能。

（2）重绘：当某个dom元素样式更改（位置没变，颜色等变了），浏览器重新渲染这个元素。

解决方法：
（1）基于文档碎片（虚拟内存中开辟的一个容器）：每当创建一个LI，我们首先把它存放到文档碎片中（千万不要放到页面中，避免回流），当我们把需要的元素都创建完成，并且都添加到文档碎片中，在统             一把文档碎片放到页面中（只会引发一次回流操作）。
　　let frg = document.createDocumentFragment();
　　data.forEach((item, index) => {
　　let curLi = document.createElement(‘li‘);
　　curLi.innerhtml = `<a href="#">
　　<img src="img/1.jpg" >
　　<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;
（2）分离读写（新版本浏览器）
　　//[引发两次回流]
　　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‘