javascript - 布局抖动、重排在 HTML 中是同一个意思吗？

Question

我看了一些介绍“Layout thrashing”和“reflow/repaint”的帖子，看得我一头雾水。在一些帖子中，它说“布局抖动”和“回流”是一回事。 ( https://betterprogramming.pub/web-performance-dom-reflow-76ac7c4d2d4f )( https://gist.github.com/paulirish/5d52fb081b3570c81e3a )

但是在csstrigger.com和 this ，导致每个的 CSS 属性不同。如果它们相同，则导致每个的属性将是相同的，这是有道理的。那么“布局抖动”和“回流”是一回事吗？

Answer 1

它们不同。

回流

回流(又名布局)是计算 DOM 元素在网页中的大小和位置的过程。

回流发生在:

• 在 DOM 中添加、删除或更新元素
• 修改网页内容
• 测量元素，例如 offsetHeight 或 getComputedStyle
• 更改 CSS 样式
• 调整浏览器窗口大小等

每当您更改 DOM 中的某些内容时，浏览器将重新计算 DOM 元素的位置和尺寸，然后重新绘制屏幕。

布局颠簸

回流代价高昂，因此浏览器会尝试对更改进行排队并分批应用它们，以尽量减少所需的回流。此策略允许浏览器应用多种样式并仅执行一次回流。

如果我们的 Javascript 代码通过读取属性来请求样式信息，例如:

• offsetTop, offsetLeft, offsetWidth, offsetHeight
• scrollTop, scrollLeft, scrollWidth, scrollHeight
• clientTop, clientLeft, clientWidth, clientHeight

或者通过调用getComputedStyle()，如果有任何排队的变化，为了提供最新的样式信息，浏览器需要刷新所有排队的变化，执行回流，然后为您提供请求样式信息。

这会阻止浏览器优化回流。

如果我们快速连续地重复请求和设置样式，例如在循环中，情况会变得更糟:

for (let i = 0; i < 10; i++) {
    elements[i].style.width = (container.offsetWidth + 10) + "px";
}

在上面的代码示例中，我们不断地读取和更改样式信息。

这种代码会阻止浏览器优化重排，因为一旦你的代码更改了样式信息，然后在循环的下一次迭代中再次请求样式信息，浏览器必须执行重排，为你提供最新的样式信息，并且重绘屏幕。所有这些都发生在一个循环内使情况变得更糟。

这就是所谓的布局抖动，因为我们的代码会导致浏览器不断地重新计算 DOM 元素的尺寸和位置。

可以通过在循环开始之前只读取一次样式信息来改进上面的代码。

const containerWidth = container.offsetWidth;

for (let i = 0; i < 10; i++) {
    elements[i].style.width = (containerWidth + 10) + "px";
}

上面的代码将允许浏览器优化回流，因为我们只请求一次样式信息，并且循环内元素宽度的变化可以排队并批量应用，与之前的代码相比，回流更少示例。

进一步阅读:

• Avoid Large, Complex Layouts and Layout Thrashing

• Repaints and Reflows: Manipulating the DOM responsibly