快速总结：我们的网上商店有一个侧边栏。三个盒子叠在一起。其中每一个都显示类似于产品的幻灯片（产品图片、名称和价格信息）。这些幻灯片的高度各不相同。幻灯片每隔几秒钟从一个产品循环到另一个产品，并且容纳盒的高度会自动调整。
是否确实需要重新计算 DOM 中的所有封闭元素以及整个页面布局并因此重新呈现？
问问题
124 次
1 回答
1
根据之前的问题，
添加或删除 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 时使用常识；避免执行昂贵的任务，但也不要过于关注优化。
于 2013-09-29T05:43:02.770 回答