再谈JavaScript线程

在 JavaScript 的多线程模型中，主线程（也称为 UI 线程）是唯一的线程，负责执行 JavaScript 代码、渲染页面，以及处理用户交互事件等任务。由于 JavaScript 是单线程执行的，因此它的处理能力是有限的。当某个耗时的任务需要执行时，主线程就会被阻塞，页面就会失去响应，用户体验也会受到影响。为了解决这个问题，JavaScript 引入了一些机制，如事件循环（Event Loop）和 Web Worker，来分担主线程的工作负载。

事件循环

事件循环是 JavaScript 中比较重要的一个概念。当主线程执行完当前任务后，它会进入一个等待的状态，并且始终处于该状态，直到有新的任务需要执行。这种等待的机制就是事件循环。事件循环的机制可以分为以下几个步骤：

执行完当前任务后，JavaScript 引擎会检查任务队列（Task Queue）中是否有任务需要执行。
如果任务队列中有待执行的任务，则将其取出并执行。
执行完当前任务后，若事件队列中仍有待执行的微任务，则会按照顺序依次执行。
当任务队列和微任务队列均为空时，JavaScript 引擎就会进入等待状态，等待下一个任务的到来。

以下代码示例展示了事件循环的过程：

console.log('start');

setTimeout(() => {
  console.log('setTimeout');
}, 0);

Promise.resolve().then(() => {
  console.log('Promise');
});

console.log('end');

上述示例中，setTimeout 和 Promise 都是异步任务，它们会被添加到相应的任务队列中，等待执行。这里 setTimeout 的延迟时间为 0，实际上它会被放到宏任务队列的尾部。运行上述代码后，控制台输出的结果如下：

start
end
Promise
setTimeout

从输出结果可以看出，setTimeout 执行的时间比 Promise 更晚，这是由于 setTimeout 被放到了宏任务队列的尾部。

Web Worker

Web Worker 是 HTML5 中新增的 API，在 JavaScript 中支持多线程。通过 Web Worker，我们可以创建多个子线程来并行处理任务，从而提高 JavaScript 的处理能力。Web Worker 的用法如下：

// 在主线程中创建子线程
const worker = new Worker('worker.js');

// 主线程发送消息给子线程
worker.postMessage('hello');

// 子线程接收消息并处理
worker.onmessage = function(event) {
  console.log(event.data);
};

// 在子线程中接收消息并回复
self.onmessage = function(event) {
  console.log(event.data);
  self.postMessage('world');
};

上述代码中，我们创建了一个子线程，并且通过 postMessage 方法向子线程发送了一条消息。在子线程中，通过监听 onmessage 事件可以接收到主线程发送的消息。子线程可以在接收到消息后，执行相应的任务，并通过 postMessage 方法向主线程发送回复消息。