[html] 第664天 页面的重绘和回流是什么？

[haizhilin2013]

第664天 页面的重绘和回流是什么？

作者：haizlin

3+1官网

我也要出题

[Yaob1990]

1. 由于节点的几何属性发生改变或者由于样式发生改变而不会影响布局的，称为重绘。
2. 回流是布局或者几何属性需要改变就称为回流。

回流必定会发生重绘，重绘不一定会引发回流。

[zeevenn]

• 回流： 当节点发生改变时，浏览器重新渲染部分节点或者全部文档，这个过程为回流。
• 重绘： 当操作的节点并不导致元素位置发生变化时，如 color background-color 等，浏览器会将新的样式赋值给这些节点，这个过程为重绘。
• 简单理解会引起元素位置变化的就会 reflow，只是在以前的位置进行改变背景颜色等，只会 repaint

什么是回流与重绘(Reflow & Repaint)

[chenzhengWin]

重绘，是指在一个元素的外观（如颜色、背景、边框等样式属性）发生改变，但布局信息并未改变时，浏览器需要重新绘制这个元素的过程。

重排，或者被称为回流，指的是浏览器计算和确定元素在页面中的位置和大小的过程。当DOM的变化影响了元素的几何信息（如位置、大小、样式或内容），浏览器需要重新计算元素的几何属性，重排操作可能会消耗较多的计算资源和时间。