了解执行模型和事件循环

Understanding execution model and event loop

我阅读了很多关于JavaScript单线程执行模型、事件循环和事件队列的文章。

有一件事还不清楚。我创建了一个 fiddle 来说明我的问题:http://jsfiddle.net/yzpmf67f/

<button onClick="window.compute()">Do computation</button>
<button onClick="alert('doing')">Do something else</button>

window.compute = function compute() {
var result = 0;
for (var i = 0; i < 100000; i++) {
    for (var j = 0; j < 100000; j++) {
        result = i + j;
    }
};
var textnode = document.createTextNode(result);
document.body.appendChild(textnode);

}

如果您点击 "Do computation" 按钮,将需要一些时间并阻止该页面。但是如果你点击 "Do something else" 按钮,当页面仍然挂起时,它仍然会被添加到队列中并在我们的计算完成后执行。

那么,如果 JS 是单线程的,那么当我们计算其他东西时,谁将 UI 事件放入事件队列?

So if JS is single-threaded who is putting UI events into event queue while we are computing something else?

显然不是 JS :-) 它是浏览器中的其他线程之一,负责管理 UI 事件(反过来,由 OS 提供)在这种情况下。事实上,有很多事情 运行 与 JS 引擎并行,例如管理网络连接(和排队 ajax 事件)的线程。