开启 JS 的 “多线程”，三分钟掌握 Web Worker。面试必备！-51CTO.COM

Hello，大家好，我是 Sunday

这段时间有不少同学在面试中遇到了 web worker 的问题。所以今天咱们就通过这篇文章，把 web worker 搞明白！

Web Worker 到底是什么？

因为 JS 是单线程（主线程）的，这意味着它一次只能做一件事。当在主线程上运行耗时较长的任务时，那么 Web 应用可能会卡住或需要一段时间才能加载。如下伪代码：

<div class="box">hello</div>

for (let i = 0; i < 1000000; i++) {
  console.log(i)
}

document.querySelector('.box').innerHTML = '程序员Sunday'

而 web worker 就可以解决掉卡顿的问题。

web worker 可以在 “后台” 独立执行任务，类似于开启了一个 “子线程”，可以在不影响主线程的前提下，完成对应的计算。

如下基础代码（暂时不需要关心什么是 slef、postMessage 或者 onmessage）：

// worker.js
self.onmessage = () => {
 for (let i = 0; i < 1000000; i++) {
  console.log(i)
 }
}

// index.html
<script>
  const worker = new Worker('./worker.js')
  worker.postMessage(1)

  document.querySelector('.box').innerHTML = '程序员Sunday'
</script>

它主要具备以下四个特点：

并行执行：Web Worker 允许在不同线程中并行处理任务，不会干扰主线程的执行。这对于需要大量计算或需要处理大量数据的应用特别有用。
不共享全局对象：每个 Web Worker 都有自己的全局上下文（self），并且不能直接访问主线程的 DOM 或其他全局对象。它们通过消息传递来与主线程或其他 Web Workers 进行通信。
线程安全：由于 Web Workers 在自己的线程中运行，并且没有直接访问共享内存的能力，这减少了多线程编程中的常见问题（如：竞态问题）。
消息传递机制：主线程和 Web Worker 之间通过 postMessage 和 onmessage 事件来进行数据交换。主线程使用 worker.postMessage() 发送消息，Web Worker 使用 self.onmessage 处理消息。

明确好了它的特点之后，我们来逐步解析下对应的代码逻辑。

Web Worker 代码解析

想要使用 Web Worker，那么需要先明确一个变量、一个构造、两个方法：

变量 self

类似于 window。因为 Web Worker 在一个不同的全局上下文中运行，所以不是我们熟悉的 window 对象。而是使用 self 来代表全局上下文

构造函数 Worker

想要使用 Web Worker 那么必须要生成 Worker 实例。该构造函数接收一个JS文件的路径。该路径就是书写 Web Worker 代码的位置

方法一 onmessage

self 的常用方法之一，用来监听 worker 事件启动。被实例.postMessage 触发

方法二 postMessage

触发 self.onmessage 的方法。可以理解为 “启动器”。该方法必须接收一个参数

Web Worker 的注意事项

使用 Web Worker 时，有两个注意事项：

无法操作 DOM： DOM 的操作必须要在主线程中进行。因为 Web Worker 是单独开辟了线程，所以无法进行 DOM 操作
Handle Errors： Web Worker 中始终包含错误处理来捕获任何问题。