小知识,大挑战!本文正在参与「程序员必备小知识」创作活动
重绘和重排
什么是重排呢?
我们首先要来了解一下渲染树: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线程卡顿,因此尽可能避免这类操作。