一尘不染

何时在DOM环境中发生重排?

javascript

哪些活动将触发DOM的网页重排?

似乎有不同的观点。
* 添加或删除DOM节点时。
* 动态应用样式时(例如element.style.width =“ 10px”)。
* 当您检索必须计算的度量时,例如访问offsetWidth,clientHeight或任何计算出的CSS值(通过DOM兼容浏览器中的getComputedStyle()或IE中的currentStyle)。

但是,根据http://dev.opera.com/articles/view/efficiency-
javascript/?page=3的说法,仅当已经存在重排操作排队时,进行测量才会触发重排。

还有其他想法吗?


阅读 388

收藏
2020-04-25

共1个答案

一尘不染

这两篇文章都是正确的。可以放心地假设,只要您正在执行可能合理地要求DOM中元素尺寸的操作,就会触发重排。

另外,据我所知,这两篇文章都说相同的话。

第一篇文章说回流发生在以下情况:

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

第二篇文章指出:

如前所述,浏览器可能会为您缓存一些更改,并且在所有更改完成后仅重排一次。但是,请注意 对元素进行测量将迫使其回流
,因此测量将是正确的。所做的更改可能会或可能不会进行重新绘制,但重新编写本身仍必须在幕后进行。

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

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

出于所有意图和目的,只要相信当他们说所有三种类型的交互作用都可能引起回流时,他们俩都会说。

2020-04-25