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

问题描述

什么样的Activity会触发DOM页面的reflow?

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

• 当您添加或删除 DOM 节点时.
• 动态应用样式时(例如 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 值(通过 >getComputedStyle()(在 DOM 兼容浏览器中或 currentStyle 在 IE 中)，而 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屋！