面试题：CSS 中哪些操作容易引发重绘与回流

Question

请详细列举出在 CSS 开发过程中，常见的会引发重绘与回流的操作，并简要说明原因。

Answer 1

回流（重排）

1. 改变元素几何属性：
   • 改变元素宽度、高度、内边距、外边距、边框宽度：例如修改width: 100px;为width: 200px;，浏览器需要重新计算元素的位置和大小，以及其对周围元素布局的影响，因为这些属性直接影响元素在文档流中的占位和与其他元素的相对位置关系，所以会导致回流。
   • 改变元素的font-size：字体大小改变会影响文本占据的空间，进而影响元素的布局，因为文本内容的尺寸变化会导致元素的整体尺寸或换行情况改变，从而引发回流。
2. 改变元素位置：
   • 改变元素的top、left、bottom、right（对于定位元素）：当改变这些定位属性的值时，元素在页面中的位置会发生变化，浏览器需要重新计算元素以及其相关元素的位置，重新构建渲染树，所以会引发回流。例如，position: absolute; left: 100px;改为left: 200px;。
3. 改变元素的布局方式：
   • 改变元素的display属性：比如将display: none;改为display: block;，元素从隐藏状态变为显示状态，其在文档流中的存在和布局方式都发生了巨大改变，浏览器需要重新计算其布局以及对周边元素的影响，必然会导致回流。
4. 添加或删除可见的 DOM 元素：
   • 添加新的 DOM 元素：新元素的加入会改变文档的结构，浏览器需要重新计算整个文档的布局，以确定新元素及其周边元素的位置和大小关系，从而引发回流。例如使用document.createElement('div')创建新元素并添加到页面中。
   • 删除 DOM 元素：删除元素同样会改变文档结构，使得浏览器需要重新计算剩余元素的布局，所以也会导致回流。比如使用element.parentNode.removeChild(element)删除某个元素。
5. 获取某些布局相关的属性值：
   • 获取offsetTop、offsetLeft、offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeight：当获取这些属性值时，浏览器为了能准确返回这些值，需要确保布局是最新的，所以会触发回流来更新布局状态，以便提供准确的测量值。例如，console.log(element.offsetWidth)，此时浏览器可能会回流以获取最新的布局信息。

重绘

1. 改变元素的外观属性但不影响布局：
   • 改变元素的颜色：例如修改color: red;为color: blue;，这种改变只影响元素的视觉表现，不会改变元素在文档流中的位置和大小，不影响布局，所以只会触发重绘。浏览器只需要重新绘制该元素的颜色部分，而不需要重新计算布局。
   • 改变元素的背景颜色：如将background - color: white;改为background - color: yellow;，同样仅改变元素的外观，不涉及元素布局的变化，因此仅引发重绘，浏览器只需重新绘制元素的背景部分。
   • 改变元素的边框样式：从border - style: solid;改为border - style: dashed;，这种变化不影响元素的尺寸和位置，只影响边框的外观，所以浏览器仅需重绘边框部分，引发重绘。