什么时候在DOM环境中发生回流？ [英] When does reflow happen in a DOM environment?

问题描述

什么样的活动会触发DOM的网页回流？

What kinds of activities will trigger reflow of web page with DOM?

似乎有不同的观点。根据 http：// www。 nczonline.net/blog/2009/02/03/speed-up-your-javascript-part-4/ ，它发生

It seems there are different points of view. According to http://www.nczonline.net/blog/2009/02/03/speed-up-your-javascript-part-4/, it happens

• 动态应用样式（如element.style.width =10px）。


• 检索必须计算的测量值，例如访问offsetWidth，clientHeight或任何计算的CSS值（通过DOM兼容浏览器中的getComputedStyle（）或IE中的currentStyle）。

然而，根据 http://dev.opera.com/articles/view/efficient-javascript/?page=3 ，只有当已经有回流动作排队时，才能进行测量触发回流。

However, according to http://dev.opera.com/articles/view/efficient-javascript/?page=3, taking measurement triggers reflow only when there is already reflow action queued.

有没有人有任何想法？

推荐答案

这两篇文章都是正确的。
一个人可以放心地假设，只要你做某些可以合理地要求DOM中的元素的维度被计算出来，你将触发回流。

Both articles are correct. One can safely assume that whenever you're doing something that could reasonably require the dimensions of elements in the DOM be calculated that you will trigger reflow.

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

In addition, as far as I can tell, both articles say the same thing.

第一篇文章说回流发生在何时：

The first article says reflow happens when:

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

When you retrieve a measurement that must be calculated, such as accessing offsetWidth, clientHeight, or any computed CSS value (via getComputedStyle() in DOM-compliant browsers or currentStyle in IE), while DOM changes are queued up to be made.

第二篇文章指出：

如前所述，浏览器可能会为您缓存多个更改，并且只有当这些更改都已经完成时才回流一次。但是，请注意，对元素进行测量将迫使其回流，以使测量结果正确。这些变化可能也可能不会被明显地重绘，但回流本身仍然必须在幕后发生。

As stated earlier, the browser may cache several changes for you, and reflow only once when those changes have all been made. However, note that taking measurements of the element will force it to reflow, so that the measurements will be correct. The changes may or may not not be visibly repainted, but the reflow itself still has to happen behind the scenes.

当使用诸如 offsetWidth ，或使用 getComputedStyle 等方法。即使没有使用数字，只要浏览器仍然缓存更改，只需使用其中的任何一个，就足以触发隐藏的回流。如果重复采取这些测量，您应该考虑将它们仅仅一次，并存储结果，然后可以使用。

This effect is created when measurements are taken using properties like offsetWidth, or using methods like getComputedStyle. Even if the numbers are not used, simply using either of these while the browser is still caching changes, will be enough to trigger the hidden reflow. If these measurements are taken repeatedly, you should consider taking them just once, and storing the result, which can then be used later.

我认为这是他们以前说过的一样的事情。 Opera将尝试最难以缓存的值，并避免回流，但您不应该依赖其能力来实现。

I take this to mean the same thing they said earlier. Opera will try its hardest to cache values and avoid reflow for you, but you shouldn't rely on its ability to do so.

对于所有意图和目的只是相信什么他们都说他们说三种互动都可以引起回流。

For all intents and purposes just believe what they both say when they say that all three types of interactions can cause reflow.

干杯。

这篇关于什么时候在DOM环境中发生回流？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！