Javascript 中的事件循环是否在单独的线程中执行？

Question

我仍然认为Javascript是单线程的，但是当我想到事件处理机制时，我有些疑惑。

event loop是不是一个单独的线程，从中一个一个的拉取事件排队和处理。

为什么我这样想是因为即使在处理队列中的一个事件时，它也可以侦听或将事件推送到同一队列。我创建了一个示例如下：

<html>
<head>
<script>
function clicked(){
    alert("clicked in between..");
}
function longRun(){
    for(var i=0;i<50000;i++){
        console.log(i);
    }
    alert("completed .... ");
}

</script>
</head>
<body>
    <input type="button" value="quick!" onclick="clicked();"/>
    <input type="button" value="long run!" onclick="longRun();"/>
</body>
</html>

当我点击 long 运行! 时需要一些时间才能完成，但同时如果我点击 quick! 会加入到事件队列中，在长运行事件后立即执行。

到底发生了什么？谁能解释/纠正我

Answer 1

每个选项卡只有一个线程。此线程执行 JavaScript 执行和屏幕更新。当 longRun 正在执行时，您无法对按钮的点击做出反应；您注册的事件将在所有 50000 次迭代完成后触发。

澄清一下：事件被放入队列中。队列正在按选项卡线程的顺序执行。

编辑：而且，确实有工作人员，但他们的行为就好像他们在不同的选项卡中执行一样 - 他们有自己的上下文，并且只能使用 postMessage.

Answer 2

除了 webWorkers（我们这里不讨论），浏览器中每个 window 只有一个 "user thread"。这意味着您的用户 Javascript.

只有一个线程运行

这并不意味着幕后的浏览器引擎没有一些其他线程来处理非Javascript处理。事实上，这种情况很有可能发生。但是，由于这些其他可能的线程实际上从未运行您的任何 Javascript 或影响您的任何 Javascript 变量，因此它们不会直接影响 JS 执行环境。

是的，这些其他线程确实可能会将东西插入 JS 事件队列中，稍后当主 JS 线程准备好处理下一个事件时，这些东西将被拾取。

查看此答案 How does JavaScript handle AJAX responses in the background? 了解更多信息和相关文章列表。

Answer 3

如果您使用 safari，每个浏览器都会使用堆栈，因此您会在检查元素中看到该操作被放入堆栈中，因此根据您的脚本代码，它首先会完成 5000 次迭代的循环。

Answer 4

Javascript 对单个 thread.Event 进行排队并按 fifo 顺序处理。

我们正在做的是编写事件处理程序，它只是回调函数，一旦事件从队列中处理完毕就会执行，因此它是单线程的，但本质上是异步的。

您可以从 http://blog.carbonfive.com/2013/10/27/the-javascript-event-loop-explained/

了解更多信息

Javascript 中的事件循环是否在单独的线程中执行？

Is the event loop in Javascript executing in a separate thread?

javascript

dom-events