DOM操作代码是否排队或同步运行？

Question

我有以下HTML和CSS：

HTML：

<div id="box"></div>

CSS：

#box {
  width: 100px;
  height: 100px;
  background-color: blue;  
}

为什么下面的第一个代码段与第二个代码段的行为不同？

在第一个代码段中，box.style.backgroundColor = 'red';无延迟地运行，在第二个代码段中，box.style.backgroundColor = 'red';仅在while循环完成后运行。 就像在第一种情况下，它排队到事件队列，在第二种情况下，它同步运行而不排队。

首先：

  var box = document.getElementById('box');
  box.style.backgroundColor = 'red';

  var start = new Date;
  while (new Date - start < 5000) {
    // wait 5 seconds...
  };

第二

setTimeout(function() {
  var box = document.getElementById('box');
  box.style.backgroundColor = 'red';

  var start = new Date;
  while (new Date - start < 5000) {
    // wait 5 seconds...
  };
}, 0);