重排、重绘到底都干啥了呢?

115 阅读2分钟

小知识,大挑战!本文正在参与「程序员必备小知识」创作活动

重绘和重排

什么是重排呢?

我们首先要来了解一下渲染树DOM树Style Tree合并为渲染树。 其实在构建渲染树之前,和DOM树同期会构建Style Tree。

  • DOM树: 表示页面的结构
  • 渲染树: 表示页面的节点如何显示

当Dom的变化影响到了元素的几何属性(宽和高等)。比如说:

  • 页面初始化时
  • DOM结构的变化:添加或者删除可见的DOM元素
  • DOM元素的几何属性发生变化:内边距、外边距、边框的宽度、宽高等
  • 内容的变化:文本的增加或减少,图片的放大或缩小等
  • 浏览器窗口尺寸改变(重排是根据视口的大小来计算元素的位置和大小的)
  • 窗口属性的获取和尺寸改变:offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、 clientTop、clientLeft、clientWidth、clientHeight等 导致元素的高度增加等,会引起浏览器进行重新计算元素的几何属性。

同样,其他元素的几何属性和位置也会因此受到影响。浏览器会使渲染树中受到影响的部分失效。并重新构建渲染树,这个过程称为重排。

什么又是重绘呢?

完成重排之后,浏览器会重新绘制受影响的元素,这个过程被称为重绘。

并不是所有的Dom变化会影响元素的几何属性,例如:

改变背景色,不会影响元素的几何属性,因此,这个时候是不会发生重排,仅仅会发生重绘,因为,元素的布局没有发生变化。

重排和重绘的代价都是昂贵的操作,他们会导致浏览器的UI线程卡顿,因此尽可能避免这类操作。