Hello，大家好，我是 Sunday

這段時(shí)間有不少同學(xué)在面試中遇到了 web worker 的問(wèn)題。所以今天咱們就通過(guò)這篇文章，把 web worker 搞明白！

Web Worker 到底是什么？

因?yàn)?JS 是單線程（主線程）的，這意味著它一次只能做一件事。當(dāng)在主線程上運(yùn)行耗時(shí)較長(zhǎng)的任務(wù)時(shí)，那么 Web 應(yīng)用可能會(huì)卡住或需要一段時(shí)間才能加載。如下偽代碼：

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

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

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

而 web worker 就可以解決掉卡頓的問(wèn)題。

web worker 可以在 “后臺(tái)” 獨(dú)立執(zhí)行任務(wù)，類似于開(kāi)啟了一個(gè) “子線程”，可以在不影響主線程的前提下，完成對(duì)應(yīng)的計(jì)算。

如下基礎(chǔ)代碼（暫時(shí)不需要關(guān)心什么是 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>

它主要具備以下四個(gè)特點(diǎn)：

1. 并行執(zhí)行：Web Worker 允許在不同線程中并行處理任務(wù)，不會(huì)干擾主線程的執(zhí)行。這對(duì)于需要大量計(jì)算或需要處理大量數(shù)據(jù)的應(yīng)用特別有用。
2. 不共享全局對(duì)象：每個(gè) Web Worker 都有自己的全局上下文（self），并且不能直接訪問(wèn)主線程的 DOM 或其他全局對(duì)象。它們通過(guò)消息傳遞來(lái)與主線程或其他 Web Workers 進(jìn)行通信。
3. 線程安全：由于 Web Workers 在自己的線程中運(yùn)行，并且沒(méi)有直接訪問(wèn)共享內(nèi)存的能力，這減少了多線程編程中的常見(jiàn)問(wèn)題（如：競(jìng)態(tài)問(wèn)題）。
4. 消息傳遞機(jī)制：主線程和 Web Worker 之間通過(guò) postMessage 和 onmessage 事件來(lái)進(jìn)行數(shù)據(jù)交換。主線程使用 worker.postMessage() 發(fā)送消息，Web Worker 使用 self.onmessage 處理消息。

明確好了它的特點(diǎn)之后，我們來(lái)逐步解析下對(duì)應(yīng)的代碼邏輯。

Web Worker 代碼解析

想要使用 Web Worker，那么需要先明確 一個(gè)變量、一個(gè)構(gòu)造、兩個(gè)方法：

變量 self

類似于 window。因?yàn)?Web Worker 在一個(gè)不同的全局上下文中運(yùn)行，所以不是我們熟悉的 window 對(duì)象。而是使用 self 來(lái)代表全局上下文

構(gòu)造函數(shù) Worker

想要使用 Web Worker 那么必須要生成 Worker 實(shí)例。該構(gòu)造函數(shù)接收 一個(gè)JS文件的路徑。該路徑就是書(shū)寫(xiě) Web Worker 代碼的位置

方法一 onmessage

self 的常用方法之一，用來(lái)監(jiān)聽(tīng) worker 事件啟動(dòng)。被 實(shí)例.postMessage 觸發(fā)

方法二 postMessage

觸發(fā) self.onmessage 的方法。可以理解為 “啟動(dòng)器”。該方法 必須 接收一個(gè)參數(shù)

Web Worker 的注意事項(xiàng)

使用 Web Worker 時(shí)，有兩個(gè)注意事項(xiàng)：

1. 無(wú)法操作 DOM： DOM 的操作必須要在主線程中進(jìn)行。因?yàn)?Web Worker 是單獨(dú)開(kāi)辟了線程，所以無(wú)法進(jìn)行 DOM 操作
2. Handle Errors： Web Worker 中始終包含錯(cuò)誤處理來(lái)捕獲任何問(wèn)題。