为什么DOM更新和“提醒”在Chrome中按顺序执行？

Question

我发现了一些仅在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中，它按预期工作，以正确的顺序（1,2,3,4,5,6）交替显示div和警告框中的数字。

但是，当我在Chrome中运行它时，即使首先分配div，我也会首先看到警告框。事实上，我看到警报框三次（2,4,6），div总是空白。警报框第三次关闭后，我看到div中的数字5。它的行为就像跳过为div分配'1'和'3'一样。然后它会在警告关闭后将<5>分配给div （即使分配'5'的指令在'6'警报之前）。

我的问题是 - 这是Chrome的预期行为，还是一个错误？此外，我能够通过将alert命令置于setTimeout函数内并延迟大约100毫秒来解决这个问题。有没有其他方法可以解决这种问题？

这是一个实例。它的工作方式与IE和Edge（1,2,3,4,5,6）中的预期相同。但是如果你在Chrome中运行它，你会看到数字2,4,6,5。

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

#test {
  font-size:48pt;
  padding:14px;
  margin:14px;
  max-width:48px;
  min-height:64px;
  border:solid 1px #ccc;
}

<div id='test'>

</div>