布局颠簸、回流在HTML中的含义是相同的吗？

Question

我读了一些介绍“布局颠簸”和“回流/重绘”的帖子，这让我感到困惑。在一些帖子中，它说“布局颠簸”和“回流”是一回事。(https://betterprogramming.pub/web-performance-dom-reflow-76ac7c4d2d4f) (https://gist.github.com/paulirish/5d52fb081b3570c81e3a)

但是在csstrigger.com和this中，导致它们的CSS属性是不同的。如果有相同的，导致每个的属性都是相同的，这是有意义的。那么“布局颠簸”和“回流”是一样的吗？

Answer 1

它们是不同的。

回流

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

在以下情况下会发生回流：

在网页内容的DOM

• modification中添加、删除或更新元素样式对元素进行测量，如 or getComputedStyle
• change a CSS
• offsetHeight
• 调整浏览器窗口的大小等。

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

布局抖动

回流和重绘的开销很大，因此浏览器会尝试将更改排队并批量应用，以最大限度地减少所需的回流和重绘。此策略允许浏览器应用多个样式，并且只进行一次回流和重绘。

如果我们的Javascript代码通过读取以下属性来请求样式信息：

• offsetTop，offsetLeft，主板，scrollHeight
• clientTop，scrollLeft，主板，offsetHeight
• scrollTop，scrollLeft，主板，scrollWidth，主板，scrollHeight
• clientTop，scrollWidth，主板，scrollHeight
• clientTop，clientLeft，主板，clientWidth，主板

或者调用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

Answer 2

在不允许浏览器执行布局优化的过程中，当我们对DOM执行一系列连续的读写操作时，就会发生布局颠簸。

更改一个元素的属性或修改其内容不仅会影响该元素；相反，它会导致一系列更改。例如，设置一个元素的宽度可能会导致该元素的子元素、同级元素和父元素发生更改。下面是我们使用术语reflow。reflow计算页面的布局。元素上的回流会重新计算元素的尺寸和位置，并且还会触发对该元素的子元素、祖先元素以及在DOM中出现在该元素之后的元素进行进一步的回流。因此，无论何时进行更改，浏览器都必须计算这些更改的影响。

由于重新计算的代价很高，因此浏览器在队列中批处理尽可能多的写操作，以便这些操作可以一次性执行并注入到DOM中。然后，如果我们需要更新布局，我们向浏览器发出命令，浏览器执行所有批处理操作，最后更新布局。当我们的代码对DOM执行一系列连续的读写操作，而不允许浏览器优化布局操作时，就会发生Layout thrashing。

React.js之所以能获得出色的性能，其中一个原因就是消除了layout thrashing。React.js在虚拟DOM上执行所有修改。然后，在适当的时候，React使用虚拟DOM来确定必须对实际的DOM进行哪些更改，以便使UI保持同步。这种批量更新提高了应用程序的性能。