最近我一直在研究 Web Worker，這是一份全面的指南，涵蓋了開始使用 Web Worker 所需了解的所有內(nèi)容。

如果您想跳過閱讀博客并查看代碼，這里是包含所有代碼片段的 github 存儲(chǔ)庫(kù)。

Github Web Worker 存儲(chǔ)庫(kù)

?

目錄

• 常見誤解
• Web Worker 基本設(shè)置
  • 使用本機(jī) JavaScript 設(shè)置 Web Worker
  • 使用 Comlink 設(shè)置 Web Workers
• 如何檢查我的工人是否已正確注冊(cè)？
• 延伸閱讀

?
?

常見的誤解

所以，促使我探索 Web Workers 的原因是，在我構(gòu)建的平臺(tái)中，一項(xiàng)計(jì)算繁重的任務(wù)會(huì)阻塞 UI。
所以我想，‘嗯，好吧，我該如何讓它不阻塞 UI’？我是否應(yīng)該使用 setTimeout 來確保主線程中的所有代碼都已執(zhí)行完畢，然后才能運(yùn)行計(jì)算量大的任務(wù)？

所以這是一個(gè)誤解——使用setTimeout并不意味著UI不會(huì)被阻塞。是的，主線程上的所有內(nèi)容都將在 setTimeout 回調(diào)運(yùn)行之前執(zhí)行，但是，當(dāng)該回調(diào)從宏任務(wù)隊(duì)列中彈出時(shí)，它會(huì)在主線程本身中運(yùn)行，從而使 UI 無響應(yīng)。

要了解更多有關(guān) setTimeout 如何工作的信息，請(qǐng)參考一些參考資料 —

• 從頭開始的異步 JavaScript 和事件循環(huán) - Akshay Saini
• 事件循環(huán)、Web API、任務(wù)隊(duì)列 - Lydia Hallie

?
?

Web Worker 基本設(shè)置

JavaScript 本質(zhì)上是一種“單線程語(yǔ)言”，但是 Web Worker 使我們能夠在單獨(dú)的線程中運(yùn)行計(jì)算量大的代碼。

在開始之前，有幾件事需要注意 -

• Web Worker 無法與 DOM 交互
• Web Worker 作用域是 self，而不是 window。
• Workers 相對(duì)較重，不適合大量使用。例如，為四兆像素圖像的每個(gè)像素啟動(dòng)一名工作人員是不合適的。 [參考 - HTML 規(guī)范]
• 此外，Web Worker 并不是要讓某件事需要 2 秒而不是 4 秒，而是要在 DOM 凍結(jié) 0 秒的情況下完成這件事。 [參考 - Web Workers 很慢，沒關(guān)系 - Calvin Metcalf]
• 工作人員可能會(huì)產(chǎn)生新的工作人員，只要這些工作人員托管在與父頁(yè)面相同的源中。 [參考 - MDN]

?

使用原生 JavaScript 的 Web Worker

1. 創(chuàng)建一個(gè)新的 JavaScript 文件，其中包含要在工作線程中運(yùn)行的代碼。 （比如worker.js）
2. 在主腳本中實(shí)例化worker -

const worker = new Worker("./worker.js")

注意：worker.js 不是一個(gè)模塊，不能使用 import 語(yǔ)句。然而。 :')

要將worker.js用作模塊，請(qǐng)?jiān)跇?gòu)造函數(shù)的選項(xiàng)中指定type: module。

const worker = new Worker("./worker.js")

1. 數(shù)據(jù)通過消息系統(tǒng)在工作人員之間發(fā)送 - 雙方都使用 postMessage() 方法發(fā)送消息，并通過 onmessage 事件處理程序響應(yīng)消息
2. 要在 postMessage() 中傳遞具有循環(huán)引用的復(fù)雜對(duì)象，請(qǐng)使用 StructuredClone 方法。
3. 要終止 Web Worker，請(qǐng)使用 Worker API 的終止方法。這并不為工人提供完成其正在進(jìn)行的操作的機(jī)會(huì)；它立即停止。

const worker = new Worker('./worker.js', { type: 'module' })

?
把它們放在一起

現(xiàn)在，讓我們看看集成 Web Worker 后我們的代碼是什么樣子。

主線程代碼：

worker.terminate() 

工作線程代碼：

// ...
function workerFunction() {
  // Don't spin up a new worker instance if the process has already been started.
  if (statusElement.textContent !== PROCESS_STATUS.PROCESSING && window.Worker) {
    const worker = new Worker('./worker.js', {
      type: 'module'
    })

    // Sending 10000000000000 to the web worker
    worker.postMessage(10000000000000)

    statusElement.textContent = PROCESS_STATUS.PROCESSING

    // This piece of code is executed after worker finishes its task and returns data. 
    worker.onmessage = function (event) {
      statusElement.textContent = event.data
    }
  }
}
// ...

結(jié)果：

當(dāng)我們運(yùn)行應(yīng)用程序時(shí)，您會(huì)注意到執(zhí)行計(jì)算量大的任務(wù)時(shí)不會(huì)阻塞 UI。

?

使用 Comlink 設(shè)置 Web Worker

Comlink 是一個(gè)小型庫(kù)（1.1kB），它消除了思考 postMessage 邏輯的心理障礙。

在更抽象的層面上，它是 postMessage 和 ES6 代理的 RPC 實(shí)現(xiàn)。

我使用 Comlink 的一個(gè)具體原因是我無法使用純 JavaScript 將函數(shù)從主線程傳遞到工作線程。使用 Comlink 的代理，我能夠輕松地將回調(diào)函數(shù)從主線程傳遞到工作線程。 [參考此部分]

要開始在項(xiàng)目中使用 comlink，請(qǐng)安裝庫(kù)

const worker = new Worker("./worker.js")

要開始使用這個(gè)庫(kù)，我們需要了解以下這些方法 -

Comlink.wrap（端點(diǎn)）

• 它包裝工作人員公開的對(duì)象，返回一個(gè)代理，您可以像本地對(duì)象一樣與之交互。
• 代理將具有公開值的所有屬性和功能，但訪問和調(diào)用本質(zhì)上是異步的。即，如果函數(shù)返回一個(gè)數(shù)字，它現(xiàn)在將返回該數(shù)字的承諾。

const worker = new Worker('./worker.js', { type: 'module' })

Comlink.expose（值、端點(diǎn)？、allowedOrigins？）

• 暴露函數(shù)將值從一個(gè)線程暴露給另一個(gè)線程（即將對(duì)象從工作線程暴露給主線程）

worker.terminate() 

?

如何檢查我的工人是否已正確注冊(cè)？

• 檢查工作文件是否已在網(wǎng)絡(luò)瀏覽器中注冊(cè)（我使用的是 Chrome）
• 右鍵單擊→檢查，然后轉(zhuǎn)到源面板，您將在其中找到工作文件。
• 終止后，工作文件不應(yīng)在“源”面板中可見
• 如果您在終止工作人員后仍然可以看到工作人員文件，那么很可能您已經(jīng)注冊(cè)了多個(gè)工作人員，但并非所有工作人員都已被終止。

?

延伸閱讀

• 傳輸處理程序和事件監(jiān)聽器
• 共享工作者
• 可轉(zhuǎn)讓物品

以上是開始之前您需要了解的有關(guān) Web Worker 的所有信息。的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！