admin 管理员组

文章数量: 1184232

什么是重排、重绘,如何优化

概念

重排:当渲染树的一部分必须更新并且节点的尺寸发生了变化，浏览器会使渲染树中受到影响的部分失效，并重新构造渲染树。

重绘:是在一个元素的外观被改变所触发的浏览器行为，浏览器会根据元素的新属性重新绘制，使元素呈现新的外观

什么时候会发生

重排(又叫回流)
  这一阶段主要是计算节点的位置和几何信息，当页面布局和几何信息发生变化时，就需要重排。
  引起重排的几种情况：

  1. 页面初始化的时候
  2. DOM结构数的变化：添加或者删除可见的DOM元素
  3. DOM元素的几何属性发生变化：外边距、内边距、边框厚度、宽高等
  4. 内容发生变化：文本的增加或减少、更换不同尺寸的图片
  5. 浏览器窗口尺寸改变(重排是根据视口的大小来计算元素的位置和大小的)
  6. 窗口属性的获取和尺寸改变：offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、 clientTop、clientLeft、clientWidth、clientHeight、getComputedStyle() (currentStyle in IE)

重绘
  DOM元素的字体颜色、改变visibility、outline、背景色等

区别

  • 重绘不会带来DOM元素的重新计算，所以重绘并不一定伴随重排（回流）
  • 重排一定会引起浏览器的重绘

浏览器的性能优化方案

  由于每次重排都会造成额外的计算消耗，因此大多数浏览器都会通过队列化修改并批量执行来优化重排过程。浏览器会将修改操作放入到队列里，直到过了一段时间或者操作达到了一个阈值，才清空队列。但是！当你获取布局信息的操作的时候，会强制队列刷新，比如当你访问以下属性或者使用以下方法：
offsetTop、offsetLeft、offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeight、getComputedStyle()、getBoundingClientRect()
  以上属性和方法都需要返回最新的布局信息，因此浏览器不得不清空队列，触发回流重绘来返回正确的值。这也是为什么在获取这些值时会引起重排（回流）、重绘的原因，因此，我们在修改样式的时候，最好避免使用上面列出的属性，他们都会刷新渲染队列。如果要使用它们，最好将值先保存起来。

如何解决

  1. 分离读和写的操作（避免触发同步布局事件）
let ulDom = document.getElementById("box");
var curLeft=ulDom .offsetLeft;
var curTop=ulDom .offsetTop;
ulDom .style.left=curLeft+1+'px';
ulDom .style.top=curTop+1+'px';
//不要写成这样
let ulDom = document.getElementById("box");
var curLeft=ulDom .offsetLeft;
ulDom .style.left=curLeft+1+'px';
var curTop=ulDom .offsetTop;
ulDom .style.top=curTop+1+'px';

  获取offsetLeft和offsetTop会导致浏览器强制清空队列，进行强制同步布局
2. 样式集中改变，而不要一个一个的改变（减少重绘重排）

let ulDom = document.getElementById("box");
ulDom.style.left = '100px';
ulDom.style.top = '200px';// 改成let ulDom = document.getElementById("box");
ulDom.style.cssText ='left :100px;top:200px;'//或者使用class名也可以
ulDom.className ='boxcls';
  1. 批量修改DOM
  • 如果可以的话，在重排时，可以使用absolute脱离文档流，这样，元素的尺寸改变时，就不会影响其它元素了。先让元素absolute。然后给元素中放入若干个dom，再把元素的absolute去掉
  • 使用createDocumentFragment或拼接html字符串的方式进行DOM的增加

参考文章：
知乎：重绘和重排的区别
CSDN:页面的重排和回流（提升移动端网页性能）

本文标签： 什么是重排重绘 如何优化

版权声明：本文标题：什么是重排、重绘,如何优化 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://roclinux.cn/b/1687167889a71709.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。