何时在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 ，只有当已经排队的重排操作时，测量才会触发重排。

有没有人有更多的想法？

Answer 1

两篇文章都是正确的。 人们可以放心地假设，无论何时你做了一些可能合理要求计算DOM中元素尺寸的东西，你就会触发回流。

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

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

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

第二篇文章指出：

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

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

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

对于所有意图和目的，当他们说所有三种类型的相互作用都可能导致回流时，只要相信他们所说的话。

干杯。

Answer 2

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

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

Answer 3

document.body.style.display = 'none';
document.body.style.display = 'block';

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