javascript - 怎么理解js的这个看起来同步，但是却是异步的demo

Question

http://jsfiddle.net/hidoos/SNBYV/259/embedded

html<style>
    #box {
        width: 100px;
        height: 100px;
        background-color: blue;
    }
</style>
<p id="box"></p>

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

var start = new Date;
while (new Date - start < 3000) {
    // wait 3 second...
};

box的初始颜色是blue,我以为按照顺序执行的话，不用等待3s就能直接修改box的颜色为red，而实际的情况则是要等待了3s才修改box的颜色。不是很明白为什么会这样。

为什么不直接执行dom操作，非要等while执行这个3s，才去执行dom操作呢？

Answer 1

while循环 3秒内busy wait，使浏览器一直在执行js从而阻止了浏览器渲染

Answer 2

var start = new Date;
while (new Date - start < 3000) {
    // 打开页面后，3秒都在做这里面的东西了
};

其实一打开页面，box 的 backgroundColor 已经变为red 了；
只是那段JS 影响了页面的渲染；
你把 while 那段代码去了，就知道了；