Javascript 为什么DOM更新和'；警报'；在Chrome中执行顺序错误？

我发现了一些只发生在Chrome中的特殊行为，我不知道这是预期的行为，还是Chrome中的错误。我已将代码简化为：

function doSequence() {
  document.getElementById('test').innerHTML = '1';
  alert('2');
  document.getElementById('test').innerHTML = '3';
  alert('4');
  document.getElementById('test').innerHTML = '5';
  alert('6');
}

在IE和Edge中，这项功能按预期工作，交替显示

div

和警报框中的数字，顺序正确（1,2,3,4,5,6）

然而，当我在Chrome中运行它时，我会首先看到警报框，即使

div

被分配给first。事实上，我看到警报框三次（2,4,6），div总是空的。警报框第三次关闭后，我在div中看到了数字5。它的行为就像跳过将“1”和“3”分配给div一样。然后在警报关闭后将“5”分配给div（即使分配“5”的指令在“6”警报之前）

我的问题是-这是Chrome的预期行为，还是一个bug？此外，我还可以通过将

alert

命令放置在

setTimeout

函数中来解决这个问题，延迟大约为100ms。有没有其他方法可以解决这种行为

这是一个活生生的例子。它在IE和Edge（1,2,3,4,5,6）中的工作方式与您期望的一样。但是如果你在Chrome上运行它，你会看到数字2,4,6,5

var doSequence=function（）{
document.getElementById（'test'）.innerHTML='1'；
警报（“2”）；
document.getElementById（'test'）.innerHTML='3'；
警报（'4'）；
document.getElementById（'test'）.innerHTML='5'；
警报（“6”）；
}
设置超时（doSequence，1000）
#测试{
字号：48pt；
填充：14px；
利润率：14px；
最大宽度：48px；
最小高度：64px；
边框：实心1px#ccc；
}

DOM更新不保证在Javascript返回到主事件循环之前呈现。我认为没有定义在
alert（）
中阻塞是否计数。这是有意义的，因为
alert
会停止线程。这是规范中定义的（“在Javascript返回到主事件循环之前不保证呈现DOM更新”）吗？或者这只是观察到的行为？我想确切的关系还没有定义。例如：非常有趣。感谢info.DOM渲染，它被称为回流。有很多文章和问答专门用于解决DOM回流问题，导致React.js和Angular等框架使用纯js虚拟DOM完全避免回流以提高渲染性能。由于回流会影响不同浏览器的性能，甚至同一浏览器的不同版本可能会以不同方式触发回流。Chrome似乎已经优化了警报回流以提高渲染速度，而IE和Edge have notDOM更新在Javascript返回主事件循环之前无法保证渲染。我认为没有定义在
alert（）
中阻塞是否计数。这是有意义的，因为
alert
会停止线程。这是规范中定义的（“在Javascript返回到主事件循环之前不保证呈现DOM更新”）吗？或者这只是观察到的行为？我想确切的关系还没有定义。例如：非常有趣。感谢info.DOM渲染，它被称为回流。有很多文章和问答专门用于解决DOM回流问题，导致React.js和Angular等框架使用纯js虚拟DOM完全避免回流以提高渲染性能。由于回流会影响不同浏览器的性能，甚至同一浏览器的不同版本可能会以不同方式触发回流。Chrome似乎已经优化了警报回流以提高渲染速度，而IE和Edge则没有