码迷,mamicode.com
首页 > 其他好文 > 详细

重绘和回流的解释

时间:2020-10-29 10:25:37      阅读:19      评论:0      收藏:0      [点我收藏+]

标签: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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!