什么时候在 DOM 环境中发生回流？

Question

什么样的活动会触发带DOM的网页回流？

似乎有不同的观点。根据 http://www.nczonline.net/blog/2009/02/03/speed-up-your-javascript-part-4/ ，它发生了

• 添加或删除 DOM 节点时。
• 当您动态应用样式时（例如 element.style.width=“10px”）。
• 当您检索必须计算的测量值时，例如访问 offsetWidth、clientHeight 或任何计算的 CSS 值（通过兼容 DOM 的浏览器中的 getComputedStyle() 或 IE 中的 currentStyle）。

但是，根据 http://dev.opera.com/articles/view/efficient-javascript/?page=3 ，仅当已经有回流操作排队时，进行测量才会触发回流。

有人有更多的想法吗？

原文由 Morgan Cheng 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

两篇文章都是正确的。可以安全地假设，无论何时您正在做一些可能合理地要求计算 DOM 中元素的尺寸的事情，您都会触发回流。

此外，据我所知，两篇文章都说了同样的话。

第一篇文章说回流发生在：

当您 检索必须计算的测量 时，例如访问 offsetWidth 、 clientHeight 或任何计算的 CSS 值（通过 DOM 兼容浏览器中的 getComputedStyle() 或 IE 中的 currentStyle），同时 DOM 更改排队等待进行。

第二条规定：

如前所述，浏览器可能会为您缓存多个更改，并且仅在完成所有更改后才回流一次。但是，请注意， 对元件进行测量会强制其回流，因此测量结果是正确的。这些变化可能会或可能不会被明显地重新绘制，但回流本身仍然必须在幕后发生。

当使用 offsetWidth 等属性或使用 getComputedStyle 等方法进行测量时，会产生这种效果。即使不使用数字，只要在浏览器仍在缓存更改时使用其中任何一个，就足以触发隐藏的重排。如果重复进行这些测量，您应该考虑只进行一次并存储结果，以供日后使用。

我认为这与他们之前所说的意思相同。 Opera 会尽最大努力为您缓存值并避免回流，但您不应该依赖它这样做的能力。

出于所有意图和目的，只要相信他们所说的所有三种类型的交互都会导致回流。

干杯。

原文由 coderjoe 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

查看 Understanding Internet Explorer Rendering Behavior 的“Rendering triggered by Property Read Access”部分，其中 IE 中的以下代码将导致呈现活动。

 function askforHeight () {
  $("#lower").height();
}

原文由 Kevin Hakanson 发布，翻译遵循 CC BY-SA 4.0 许可协议