在复杂 DOM 中动态调整框高度是否不高效

Is it imperformant to adjust a box height dynamically in complex DOM?

本文关键字：高度 是否 高效 调整 复杂 DOM 动态      更新时间：2023-09-26

快速摘要：我们的网上商店中有一个侧边栏。有三个盒子堆叠在一起。其中每个都显示类似于产品的幻灯片(图片，名称和价格信息(。这些幻灯片的高度各不相同。载玻片每隔几秒钟在产品之间循环，收纳盒的高度会自动调整。

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

DOM 环境中何时发生回流？

根据前面的问题，

添加或删除 DOM 节点时。

动态应用样式时(例如 element.style.width="10px"(。

。发生 DOM 回流(您将受到轻微的惩罚(。

什么是"回流焊"？

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

如果包含框的高度是"自动调整"，则可能是：

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

在这两种情况下，根据引用的问题，您都有资格进行回流。

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

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

如果进行复杂的渲染更改(如动画(，请在流程之外执行此操作。使用绝对位置或固定位置来实现此目的。

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

而且，在处理DOM时要运用常识;避免执行昂贵的任务，但也不要太纠结于优化。

相关文章：