javascript - DOM 渲染是否保证在单个(同步)函数执行期间阻塞？

Question

DOM 阻塞是许多不熟悉 JavaScript 严格的单线程同步执行模型的人发现的困难方法，它通常只是我们想以某种方式解决的问题(使用超时、网络 worker 等)。一切都很好。

但是，我想知道阻止实际的用户可见渲染是否是您实际上可以依赖的东西。我有 90% 的把握事实上在大多数浏览器中都是这种情况，但我希望这不仅仅是一个愉快一致的意外。我似乎无法从 DOM 规范甚至 MDM 等 vendor 文档中找到任何明确的声明。

让我有点担心的是，虽然从页面上看确实看不到 DOM 的变化，但内部 DOM 几何结构(包括 CSS 转换和过滤器)确实在同步执行期间实际上更新了。例如:

console.log(element.getBoundingRect().width);
element.classList.add("scale-and-rotate");
console.log(element.getBoundingRect().width);
element.classList.remove("scale-and-rotate");

...确实会报告两个不同的宽度值，尽管该页面不会出现到 flash。在添加类之后同步等待(使用 while 循环)也不会使临时更改可见。在 Chrome 中做一个时间轴跟踪显示内部绘制和重新绘制是一样的，这是有道理的......

我担心的是，如果没有特定原因，一些浏览器，比如那些处理动力不足的移动 CPU 的浏览器，可能会选择在 期间在用户可见的布局中实际反射(reflect)这些内部计算函数的执行，因此会在此类临时操作期间导致丑陋的“闪光”。因此，更具体地说，我要问的是:他们是否有特定的理由不这样做？

(如果你想知道我为什么关心这个，我有时需要使用 getBoundingRect 为处于特定状态的元素测量计算尺寸，以规划间距或动画或其他类似的东西，没有实际上将它们置于该状态或首先为它们设置动画......)

Answer 1

根据各种消息来源，获取 DOM 元素的位置或大小将在必要时触发输出重排，以便返回的值是正确的。事实上，读取元素的 offsetHeight 已成为强制回流的一种方式，如 Alexander Skutin 所报告的那样和 Daniel Norton .

Paul Irish给出了导致回流的几个 Action 的列表。其中有这些元素框度量方法和属性:

• elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight,
• elem.offsetParent elem.clientLeft, elem.clientTop, elem.clientWidth,
• elem.clientHeight elem.getClientRects(), elem.getBoundingClientRect()

Stoyan Stefanov描述了浏览器用于优化回流的策略(例如排队 DOM 更改并批量执行)，并添加以下注释:

But sometimes the script may prevent the browser from optimizing the reflows, and cause it to flush the queue and perform all batched changes. This happens when you request style information, such as

1. offsetTop, offsetLeft, offsetWidth, offsetHeight
2. scrollTop/Left/Width/Height
3. clientTop/Left/Width/Height
4. getComputedStyle(), or currentStyle in IE

All of these above are essentially requesting style information about a node, and any time you do it, the browser has to give you the most up-to-date value. In order to do so, it needs to apply all scheduled changes, flush the queue, bite the bullet and do the reflow.