重排和重汇 详细版

1.重排和重绘的概念     

 重排（reflow）指的是浏览器需要重新计算元素的位置和大小，这可能会影响到整个页面的布局。重排会导致页面的性能下降，因为它需要浏览器重新计算元素的布局，并且可能会触发其他元素的重排。

        引发重排的操作包括改变元素的位置、大小、边距等属性，会影响到整个页面的布局。

        重绘（repaint）指的是浏览器需要重新绘制元素的样式，但不会影响到元素的布局。重绘通常发生在元素的样式发生改变时，例如颜色、背景等。重绘不会影响到整个页面的布局，因此性能上相对于重排来说更轻量级。

        引发重绘的操作包括改变元素的颜色、背景、边框等样式属性，但不会影响到元素的布局。

        重排一定重绘，重绘不一定重排！

2.引发重流和重绘的操作

引发重排的操作：

1. 修改DOM元素的结构，例如插入、删除、移动元素等。
2. 修改元素的尺寸，包括宽度、高度、内边距、外边距等。
3. 修改元素的位置，例如改变定位属性、调整浮动等。
4. 修改元素的内容，例如改变文本内容或者图片的大小。
5. 改变字体大小或者字体类型。
6. 计算offsetTop、offsetLeft、offsetWidth、offsetHeight等需要实时计算的属性。
7. 改变浏览器窗口大小。
8. 添加或移除样式表。
9. 操作表格布局。
10. 调用window.getComputedStyle方法。

引发重绘的操作：

1. 修改元素的背景颜色或背景图片。
2. 修改元素的边框样式。
3. 修改元素的文本颜色或字体样式。
4. 修改元素的透明度。
5. 修改元素的可见性。
6. 添加或移除阴影效果。
7. 修改元素的outline样式。
8. 修改元素的背景定位。
9. 修改元素的文本装饰，例如下划线、删除线等。
10. 修改元素的滤镜效果。

附录：

1.页面渲染流程：

1. 解析 HTML：当浏览器接收到 HTML 文档时，会先进行解析，构建文档对象模型（DOM）树。
2. 解析 CSS：浏览器会解析样式表（CSS），构建层叠样式表（CSSOM）树。
3. 合并 DOM 和 CSSOM：将 DOM 树和 CSSOM 树合并，生成渲染树（Render Tree），渲染树中包含需要显示的所有元素以及它们的样式信息。
4. 布局：对渲染树进行布局（Layout），计算每个元素在屏幕上的位置和大小。
5. 绘制：根据布局信息，使用绘图命令将每个元素绘制到屏幕上。
6. 重绘和回流：当页面发生变化时（如元素样式改变、大小变化等），浏览器会进行重绘（Repaint）和回流（Reflow）。重绘是指重新绘制元素的外观，而回流是指重新计算元素的位置和大小。这些操作可能会导致性能损耗，因此应尽量减少回流和重绘的次数。

        在页面渲染的前5个流程中都有可能涉及到重排和重绘。

2.问题：position:absolute会引发重排还是重绘呢？

答案是：当将元素的position属性设置为absolute时，会引发重排和重绘，原因如下：

        重排（reflow）是指浏览器需要重新计算元素的几何属性（例如位置、大小），以及整个页面的布局。设置元素为position：absolute会影响到整个文档流的布局，因为它会脱离正常的文档流，可能会导致其他元素的位置和大小发生变化。这将触发浏览器重新计算并调整元素的布局，因此会引发重排。

        重绘（repaint）是指浏览器需要重新绘制元素的样式，但不会影响到元素的布局。当设置元素为position：absolute时，可能会改变元素的层叠顺序或者其他样式属性，从而触发重绘。

        因此，设置元素为position：absolute会引发重排和重绘，因为它会影响到元素的布局和样式。

3.问题：操作DOM元素的对鼠标的样式和元素是否可点击属性进行改变时，引发重流还是重绘？

答案是：通过js操作dom元素，设置鼠标样式为none，元素不可点击等会引发重绘。因为这些操作会改变元素的样式或可点击状态，从而触发浏览器重新计算元素的布局和重新绘制页面。