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

IT技术 javascript performance dom reflow
2021-01-16 14:27:09

哪些活动会触发 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,仅当已经有回流操作排队时,进行测量才会触发回流。

有人有更多想法吗?

3个回答

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

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

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

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

第二条规定:

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

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

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

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

干杯。

@coderjoe,“对元素进行测量将迫使它重排”为什么它们没有缓存在浏览器中?如果我在彼此之后立即调用 getComputedStyle 3 次会发生什么!我会有 3 次回流吗!
2021-03-18 14:27:09
有没有办法强制重绘(除了回流)?为了以小增量呈现大页面,从而提高最终用户感知的呈现速度。
2021-03-29 14:27:09
@faressoft 你误会了。只有在页面上的某些内容发生更改后才会发生回流如果您在调用之间没有对 DOM 进行任何更改,那么假设先前已进行更改,则只有第一个会(可能)导致回流。(呃,可能需要注意的是,我不确定运行动画/过渡的效果......即使JS正在运行用户代码,它们也可能会触发回流......我会否则猜测,但如果他们这样做了,那么每次调用 getComputedStyle() 时可能会导致重排。
2021-04-03 14:27:09

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

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

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

哇,你还需要支持IE6吗?保持坚强,士兵。
2021-03-23 14:27:09
我遇到了一个 ie6 错误,它在错误的位置显示了 swf。通过设置解决swfObj.style.display = "block"
2021-03-29 14:27:09