Question

什么类型的活动会触发带有DOM的网页重排？

似乎有不同的观点。根据{{3}}，它发生了

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

但是，根据http://www.nczonline.net/blog/2009/02/03/speed-up-your-javascript-part-4/，只有当已经排队的重排操作时，进行测量才会触发重排。

有人有更多想法吗？

Answer 1

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

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

第一篇文章说，在以下情况下会发生回流：

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

第二篇文章指出：

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

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

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

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

干杯。

Answer 2

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

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

Answer 3

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

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

何时在DOM环境中进行重排？

3 个答案: