标签:top 内容 文档 sele 虚拟 cto let 避免 dom
(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‘
标签:top 内容 文档 sele 虚拟 cto let 避免 dom
原文地址:https://www.cnblogs.com/xiaobupro/p/13893030.html