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

什么样的活动会触发与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 ,只有在已经有回流动作排队的情况下才能进行测量触发器回流。

有没有人有更多的想法?

两篇文章都是正确的。 人们可以安全地假设,只要你正在做的事情可以合理地要求在DOM中的元素的尺寸被计算,你将触发回流。

另外,据我所知,两篇文章都是一样的。

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

当您检索必须计算的度量时 ,例如访问offsetWidthclientHeight或任何计算的CSS值(通过DOM兼容的浏览器中的getComputedStyle()或IE中的currentStyle),DOM更改排队等待进行。

第二篇文章指出:

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

如果使用像offsetWidth这样的属性进行测量,或者使用诸如getComputedStyle之类的方法,则会创建此效果。 即使没有使用这些数字,只要使用这些浏览器仍然缓存的变化,就足以触发隐藏的重排。 如果这些测量重复进行,您应该考虑只取一次,并存储结果,以后再使用。

我认为这是和他们之前说的一样。 Opera会尽最大努力缓存值并避免重新流失,但是您不应该依赖它的能力。

对于所有的意图和目的,只要相信他们都说,当所有三种类型的互动可以导致回流。

干杯。

查看“ 理解Internet Explorer呈现行为 ”中的“属性读取访问触发的呈现”部分,其中IE中的以下代码将导致呈现活动。

function askforHeight () { $("#lower").height(); } 
 document.body.style.display = 'none'; document.body.style.display = 'block'; 

这通常解决了那些不可理解的布局错误。