如何理解页面的重排和重绘

如何理解页面的重排和重绘

简单介绍一道前端面试题：重排和重绘。

简单理解

​ 作为刚毕业的小白，我们可以用以下这段话来简单说下自己对这两个概念的理解：

1. 重排：当页面的结构发生了变化就会进行重排，比如说调整了字体的大小，增删了DOM，元素等之类的操作；
2. 重绘：重绘就是页面的结构没有变化，知识外观改变了，比如修改了字体的颜色，背景的颜色之类的。

这样的答案并没有什么太大的问题，但针对这个问题，我们可以给出更加详细的解答。

再次理解

实际上这个问题考察的是我们对页面渲染流程和性能优化的理解，而对于这两个概念我们在这里就不在赘述了。

而所谓重排，就是当元素的位置变动时发生，重排也被称为回流，此时在 Layout阶段会计算每一个元素在设备视口内的确切位置和大小，当一个元素的位置发生变化时，其父元素及其后面的元素位置都有可能发生改变，性能消耗极大。由此得知：

重排：重新计算每个元素在设备视口内的确切位置和大小。

再来说重绘，元素的样式发生变动但是位置没有改变，此时在关键渲染路径中的 Paint阶段会将渲染树中的每个节点转换成屏幕上的实际像素，这一步骤通常成为绘制或栅格化。而后半句就是重绘的概念所在。

总结

​ 重排和重绘是浏览器关键渲染路径上的两个节点，浏览器的关键渲染路径就是 DOM 和 CSSOM 生成渲染树，然后根据渲染树通过 Layout的步骤来确定页面上所有内容的大小和位置，确定布局之后，就是将像素绘制到屏幕之上。

​ 在这之中，重排就是当元素的位置发生改变的时候，浏览器重新执行 Layout 这个步骤，来重新确定页面上内容的大小和位置，确定完后就会重新进行绘制到屏幕上，所以重排一定会导致重绘。

​ 而如果元素的位置没有发生改变，仅仅是样式发生了变动，此时浏览器重新进行渲染的时候就会跳过 layout这个步骤，直接进入绘制步骤，这就是所谓的重绘，所以重绘不一定会导致重排。

这里是万物之恋，我们下次再见了。