JavaScript中的reflow(回流)

2024/8/27

以下哪些操作会触发Reflow：
var obj = document.getElementById(“test”);
A. alert（obj.className）
B. alert(obj.offsetHeight)
C. obj.style.height = "100px"
D. obj.style.color = "red"

浏览器计算和更新元素位置及尺寸的过程。当页面中的元素布局、尺寸、内容、边距、填充或边框等属性发生变化时，浏览器会触发 Reflow 以重新计算这些属性并更新页面布局。

触发 Reflow 的操作通常包括：

• 修改元素的几何属性（如宽度、高度、边距等）
• 读取某些属性（如 offsetHeight、scrollHeight等），因为浏览器需要确保返回正确的值
• 添加或删除 DOM 元素

A. alert(obj.className)
obj.className 返回的是 test 元素的 class 属性值，并不会引起页面的任何布局变化。此操作仅涉及获取元素的一个字符串属性，不会触发浏览器的 Reflow 过程

alert(obj.className) 不会触发 Reflow

B. alert(obj.offsetHeight)
offsetHeight 是一个涉及元素布局的属性，它返回元素的高度（包括内边距和边框）。当读取这个属性时，浏览器需要确保计算的高度值是准确的。因此，浏览器会在此操作之前触发 Reflow，以便获取最新的布局信息

alert(obj.offsetHeight) 会触发 Reflow

C. obj.style.height = “100px”
当设置 obj.style.height 时，实际上是改变了元素的几何属性。此操作会立即触发 Reflow，因为它改变了元素的高度，可能影响其周围其他元素的布局。浏览器需要重新计算页面布局以反映这一更改

obj.style.height = “100px” 会触发 Reflow

D. obj.style.color = “red”
color 是一个影响元素文本颜色的属性，它属于绘制（Repaint）属性，而不是影响布局的几何属性。改变颜色仅会触发 Repaint，而不会引起 Reflow，因为文本颜色的改变不会影响元素的位置或大小

obj.style.color = “red” 不会触发 Reflow