Javascript DOM呈现是否保证在单个（同步）函数'；什么是死刑？

DOM阻塞是许多不熟悉JavaScript严格的单线程同步执行模型的人难以发现的问题，而这通常只是我们想要解决的问题（使用超时、web工作者等）。一切都很好

然而，我想知道，是否实际用户可见渲染的阻塞是您可以依赖的。我90%确信大多数浏览器事实上都是这样，但我希望这不仅仅是一个令人愉快的意外。我似乎找不到来自DOM规范甚至MDM之类的供应商文档的任何明确声明

稍微让我担心的是，虽然在页面上看不到对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");

。。。确实会报告两个不同的宽度值，尽管页面看起来不闪烁。添加类后同步等待（使用while循环）也不会使临时更改可见。在Chrome中进行时间线跟踪显示，内部绘制和重新绘制的发生完全相同，这是有道理的

我担心的是，如果没有具体的原因，一些浏览器，比如那些处理动力不足的移动CPU的浏览器，可能会选择在该功能执行期间在用户可见的布局中实际反映这些内部计算，从而在这些临时操作期间导致丑陋的“闪烁”。所以，更具体地说，我要问的是：他们有没有具体的理由不这么做

---

（如果您想知道我为什么关心这一点，我有时需要使用

getBoundingRect

测量处于特定状态的元素的计算尺寸，以规划间距或动画或其他类似内容，而不实际将它们置于该状态或先设置动画…）在Javascript中，与并发性相关的任何内容都不是事实。JS只是没有定义并发模型。一切都是快乐的意外或多年的共识

---

也就是说，如果您的函数不调用XMLHttpRequest或“alert”之类的奇怪东西，您基本上可以将其视为没有中断的单线程。

根据各种来源，获取DOM元素的位置或大小将在必要时触发输出的回流，以便返回的值是正确的。事实上，正如和所报告的那样，读取元件的

离视

，已成为强制回流的一种方式

给出导致回流的几个操作的列表。其中包括以下元素框度量方法和属性：

• 元素偏移左侧，元素偏移顶部，元素偏移网络宽度，元素偏移灯光
• elem.offsetParent elem.clientLeft、elem.clientTop、elem.clientWidth、
• elem.clientHeight elem.getClientRects（），elem.getBoundingClientRect（）

描述浏览器用于优化回流的策略（例如，将DOM更改排队并成批执行），并添加以下备注：

但有时脚本可能会阻止浏览器优化 回流，并使其刷新队列并执行所有批处理 变化。当您请求样式信息时会发生这种情况，例如

斜视，斜视，斜视，斜视

滚动顶部/左侧/宽度/高度

客户端顶部/左侧/宽度/高度

getComputedStyle（）或IE中的currentStyle

以上所有这些基本上都是请求有关 一个节点，任何时候你这样做，浏览器必须给你最大的帮助 最新值。为此，它需要应用所有计划的 更改、刷新队列、咬紧牙关并进行回流

---

更新后的值会立即更新到DOM，但在脚本完成之前不会呈现这些值，除非：Looks-like在IEs中执行期间更新。在小提琴中调整“结果”窗口的大小，使其小到可以滚动，然后单击“滚动”按钮。@Teemu-那么你知道这一点的来源是什么？我当然相信你，但我特别要问的是，这种行为是否碰巧是真的，或者它是否是官方指定的，可以信赖。当然，也有例外情况令人担忧：/来源是我，是的，但你可以用任何IE访问小提琴，并看到平滑的滚动。不幸的是，我无法向您指出任何官方来源来解释IEs中的这种行为，但小提琴本身证明，至少这在IEs中是例外。我猜您搜索的是布局引擎行为的文档，而不是DOM行为。不幸的是，每个引擎都有自己的内部方式来做事情，无论是循环更新还是基于事件的更新（这可能非常昂贵）。布局引擎现在是浏览器war....@brillout.com的核心，没有官方文档，这里有一些非官方文档，解释页面布局何时更新以及强制重新绘制的方法：（1）、（2）、（3）“经典”。据我所知，在没有相反证据的情况下，打电话获取元素位置或大小将在必要时强制重新绘制。好吧，这似乎是我们的运行理论。可能已经很好了。AJAX并不是比赛条件的唯一来源！示例：

x.innerHTML=''；document.getElementById（'herp'）

通常会返回

null

。是否有任何来源可以确认这一点？您将重新绘制和回流混淆。没有什么能强迫你重新油漆。@kaido-谢谢你指出这一点。我修改了答案。