在复杂的 DOM 中动态调整盒子高度是否性能不佳？

Question

快速总结：我们的网上商店有一个侧边栏。三个盒子叠在一起。其中每一个都显示类似于产品的幻灯片（图片、名称和价格信息）。这些幻灯片的高度各不相同。幻灯片每隔几秒钟从一个产品循环到另一个产品，并且包含框的高度会自动调整。

是否真的需要重新计算 DOM 中的所有封闭元素以及整个页面布局并因此重新呈现？

Answer 1

When does reflow happen in a DOM environment?

根据上一个问题，

当你添加或移除一个 DOM 节点时。

当您动态应用样式时（例如 element.style.width="10px"）。

...发生 DOM 重排（您将受到轻微惩罚）。

什么是“回流”？

Reflow 是 Web 浏览器进程的名称，用于重新计算文档中元素的位置和几何形状，以重新渲染部分或全部文档。 (https://developers.google.com/speed/articles/reflow)

如果包含框的高度“自动调整”，您可能是：

• 将图像添加到“幻灯片”，这算作“添加 DOM 节点”。
• 将图像设置为元素的 CSS 背景，并使用“动态样式”调整该元素的尺寸。

在这两种情况下，根据引用的问题，您都符合回流条件。

为了性能起见，最好将 DOM 交互保持在最低限度。给这些盒子一个固定大小，并使用 CSS 来很好地居中/适合您的图像，这将是明智的。

虽然在大多数情况下这可能不是一个好主意，但您也可以遵循 Google 的建议：

如果您进行复杂的渲染更改（例如动画），请在流程之外进行。使用 position-absolute 或 position-fixed 来完成此操作。

但是绝对化或固定化你的元素可能会很快让你的 CSS 变得一团糟。谨慎使用。

此外，在处理 DOM 时使用常识；避免执行昂贵的任务，但也不要过于陷入优化。