重排和重绘

95 阅读1分钟

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

一旦渲染树构建完成,就要开始绘制(paint)页面元素了。

当DOM的变化引发了元素几何属性的变化,比如改变元素的宽高元素的位置,导致浏览器不得不重新计算元素的几何属性,并重新构建渲染树,这个过程称为“重排”。完成重排后,要将重新构建的渲染树渲染到屏幕上,这个过程就是“重绘”。

简单的说,重排负责元素的几何属性更新,重绘负责元素的样式更新。而且,重排必然带来重绘,但是重绘未必带来重排。比如,改变某个元素的背景,这个就不涉及元素的几何属性,所以只发生重绘。