什么是回流，什么是重绘，有什么区别？

水深无声 2022-09-13 09:15 664阅读 0赞

什么是回流？

页面中元素的尺寸，布局，隐藏等改变而需要重新构建页面，就会引起回流。

什么是重绘？

页面中元素属性发生改变，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为重绘。

有什么区别？

回流必将引起重绘，而重绘不一定会引起回流。比如：只有颜色改变的时候就只会发生重绘而不会引起回流
当页面布局和几何属性改变时就需要回流
比如：添加或者删除可见的DOM元素，元素位置改变，元素尺寸改变——边距、填充、边框、宽度和高度，内容改变

优化项目，提高性能 应用场景：

1. 我们可以改变一些写法减少回流和重绘

比如改变样式的时候，不去改变他们每个的样式，而是直接改变className 。

2. 将频繁的操作改为一次性操作，通过创建文档碎片，最后一次性加入文档碎片。

  1. // 创建文档碎片
  2.   let frag=document.createDocumentFragment();
  5.   for(var i=0;i<3;i++){ 
  6.     let dot=document.createElement('li');
  7.     dot.innerHTML=`${ i}`
  8.     frag.appendChild(dot)
  9.   }
  11.   oUl.appendChild(frag)

发表评论

表情：
评论列表 （有 0 条评论，664人围观）

还没有评论，来说两句吧...

相关阅读