52

什么样的活动会触发带有 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，仅当已经有回流操作排队时才进行测量触发回流。

有人有更多的想法吗？

4

3 回答 3

49

两篇文章都是正确的。可以有把握地假设，每当你在做一些合理地需要计算 DOM 中元素的尺寸的事情时，你就会触发重排。

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

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

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

第二条规定：

如前所述，浏览器可能会为您缓存多个更改，并在所有更改完成后仅重排一次。但是，请注意，对元素进行测量将迫使其回流，因此测量结果将是正确的。更改可能会或可能不会明显重绘，但回流本身仍然必须在幕后进行。

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

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

出于所有意图和目的，当他们说所有三种类型的交互都可能导致回流时，请相信他们俩所说的话。

干杯。

于 2009-08-14T14:33:37.907 回答
4

查看了解 Internet Explorer 渲染行为的“由属性读取访问触发的渲染”部分，其中 IE 中的以下代码将导致渲染活动。

function askforHeight () {
  $("#lower").height();  
}
于 2010-09-21T15:20:52.730 回答
1 
document.body.style.display = 'none';
document.body.style.display = 'block';

这通常可以解决那些难以理解的布局错误。

于 2009-02-04T07:45:02.043 回答