重绘重排，什么时候重绘引起重排，什么时候重排引起重绘
在网页开发里，重绘（Repaint）和重排（Reflow，也叫回流）是影响页面性能的重要因素。
- 重排（Reflow） ：当一个元素的位置、尺寸等几何属性发生变化时，浏览器需要重新计算该元素的几何属性并将其摆放到正确的位置，这个过程称为重排。重排通常发生在页面初次渲染、添加或删除DOM元素、元素尺寸变化、浏览器窗口大小改变等情况下。
- 重绘（Repaint） ：指在不改变布局的情况下更新页面元素的外观，例如改变颜色、背景、边框等。重绘不涉及元素位置或大小的改变，仅仅是重新绘制元素的外观。
通常，重绘本身不会引发重排，因为重绘仅涉及元素外观的改变，不影响布局信息。
不过，若在重绘操作后直接触发了需要重新计算布局的操作，就可能会引发重排。
一、重排必然会触发重绘
1.1.DOM元素的增删改
- 添加元素：在文档中插入新的 DOM 节点，浏览器需要重新计算布局来确定新元素的位置和大小，从而引发重排和重绘。
- 删除元素：移除文档中的 DOM 节点，剩余元素的布局会发生改变，导致重排和重绘。
- 修改元素内容：改变元素的文本内容或子元素，可能影响元素的大小和布局，触发重排和重绘。
1.2.元素尺寸和位置的改变
- 修改宽度和高度：直接改变元素的宽度、高度属性，会使元素的布局发生变化，触发重排和重绘。
- 修改边距和内边距：调整元素的外边距（margin）和内边距（padding）会影响元素在文档流中的位置和大小，引发重排和重绘。
- 修改定位属性：如将元素的
position属性从static改为relative、absolute或fixed，或者修改元素的top、left、right、bottom值，都会改变元素的位置，触发重排和重绘。
1.3.浏览器窗口大小改变
当用户调整浏览器窗口的大小时，页面上的元素布局可能会受到影响，浏览器需要重新计算元素的位置和大小，触发重排和重绘。
1.4.字体大小的改变
修改元素字体大小会影响文本的占用空间，可能导致元素的大小和布局发生变化，从而触发重绘和重排。
二、重绘触发重排的情况
一般情况下，重绘本身不会直接引发重排，因为重绘只涉及元素外观的改变，不影响布局信息。
不过某些特殊情况，重绘之后会跟着重排
2.1.先重绘再修改布局属性
若在重绘操作之后紧接着修改元素的布局属性，就会触发重排。像先改变元素的颜色（重绘），接着马上改变元素的宽度（重排）。
2.2.重绘后读取布局信息再修改布局
在重绘之后，如果读取了元素的布局信息（如 offsetWidth、offsetHeight、scrollTop 等），然后再修改元素的布局属性，浏览器为保证获取到的布局信息是最新的，会强制刷新布局，从而触发重排。
2.3.重绘后改变元素显示状态影响布局
重绘后改变元素的显示状态，如从 display: none 变为 display: block 等，会影响页面布局，从而触发重排。
先改变元素背景颜色重绘，之后将元素的 display 属性从 none 改为 block，元素会重新参与布局，进而触发重排。
三、重绘不触发重排的情况
仅改变元素的外观显示，不会对元素的布局信息产生影响，所以只会触发重绘不会触发重排。
3.1.改变元素颜色相关属性
-
背景颜色：- 修改元素的
background-color属性，仅改变元素的背景填充颜色，不会影响元素的布局，因此只会触发重绘。 -
文字颜色：改变元素的
color属性，只影响文本的颜色显示，不会改变元素的布局，仅触发重绘。
3.2.调整元素的透明度
修改元素的 opacity 属性，改变元素的透明度，不会影响元素的布局，只会触发重绘。
3.3.修改元素的可见性（visibility）
将元素的 visibility 属性设置为 hidden 或 visible，只会控制元素的显示与隐藏，不会影响元素在文档流中的布局，仅触发重绘。
3.4.应CSS3渐变、阴影等效果
添加或修改元素的 box-shadow、text-shadow、gradient 等 CSS3 效果，这些效果主要影响元素的外观，不影响布局，会触发重绘。
