網(wǎng)絡(luò)工作者通過在背景線程中運行重型任務(wù)而不阻止UI來改善Web性能。 1。它們獨立於主線程，在CPU密集型工作（例如數(shù)據(jù)處理或數(shù)學計算）中啟用響應(yīng)式接口。 2。要使用它們，創(chuàng)建一個工作腳本（例如Worker.js），該腳本會傾聽消息，執(zhí)行任務(wù)，並使用PostMessage發(fā)布結(jié)果。 3。在主線程中，用新工作者（）實例化工人，通過郵記話發(fā)送數(shù)據(jù)，並處理on message的結(jié)果。 4.最佳用例包括分析大型數(shù)據(jù)集，圖像操作，來自WebSocket的實時數(shù)據(jù)以及搜索索引。 5。避免由於消息開銷而使用工人進行小型任務(wù)。 6.通過最小化消息大小，使用諸如ArrayBuffer之類的可轉(zhuǎn)移對象，重複使用工人，而不是創(chuàng)建新的對象，使用OnError處理錯誤並終止未使用的工人，從而優(yōu)化性能。 7。對於高級方案，請考慮用於跨文本通信的共享工人或comlink and threads.js等庫，以簡化工作者管理。 8.使用服務(wù)工作者進行與網(wǎng)絡(luò)相關(guān)的任務(wù)，因為它們更適合緩存和請求攔截。正確實施後，網(wǎng)絡(luò)工作人員可以使應(yīng)用程序保持平穩(wěn)，並在密集操作過程中防止無反應(yīng)的頁面。

在改善Web應(yīng)用程序性能時，網(wǎng)絡(luò)工作人員是改變遊戲規(guī)則的人，尤其是在處理重型計算或長期運行任務(wù)時。通過從主線程中卸載工作，您可以保持UI響應(yīng)良好，並避免挫敗諸如凍結(jié)或無反應(yīng)頁面之類的用戶體驗。

這是如何有效利用網(wǎng)絡(luò)工作人員進行背景任務(wù)的方法。

什麼是網(wǎng)絡(luò)工人，為什麼要使用它們？

Web Worker是一個JavaScript功能，它允許您獨立於主執(zhí)行線程在後臺運行腳本。由於主線程處理渲染，用戶輸入和DOM操縱，因此任何CPU密集型任務(wù)（例如數(shù)據(jù)處理，圖像操縱或複雜的計算）都可以阻止它並使您的應(yīng)用程序感到呆滯。

Web工作人員通過在單獨的線程中運行JavaScript來解決此問題。這意味著：

• 主線程可用於UI更新。
• 長期運行的任務(wù)不會凍結(jié)瀏覽器。
• 您可以執(zhí)行背景處理而不會破壞用戶交互。

請記?。壕W(wǎng)絡(luò)工作者無法直接訪問DOM 。它們用於純粹的計算或與外部服務(wù)（例如WebSocket或Fetch）進行通信，結(jié)果傳遞回主線程。

如何創(chuàng)建和使用網(wǎng)絡(luò)工作者

使用網(wǎng)絡(luò)工作者很簡單。這是一個分步示例：

1. 創(chuàng)建一個工作腳本文件（例如worker.js ）：

 // worker.js
self.onmessage =函數(shù)（e）{
  const data = e.data;

  //模擬沉重的任務(wù)
  讓結(jié)果= 0;
  （讓i = 0; i <data; i）{
    結(jié)果= i;
  }

  //將結(jié)果發(fā)送回
  self.postmessage（結(jié)果）;
};

2. 在您的主要腳本中初始化工人：

 // main.js
const worker =新工人（'worker.js'）;

Worker.PostMessage（1000000）; //將數(shù)據(jù)發(fā)送給工人

worker.onmessage = function（e）{
  console.log（“來自Worker的結(jié)果：”，E.Data）;
  //通過結(jié)果更新UI
};

worker.onerror = function（error）{
  Console.Error（'Worker錯誤：'，錯誤）;
};

就是這樣。循環(huán)在後臺運行，一旦完成，結(jié)果就會在不阻止UI的情況下發(fā)送回。

網(wǎng)絡(luò)工人最好的用例

並非每個任務(wù)都需要一個工人，但是以下是他們發(fā)光的場景：

• 數(shù)據(jù)解析和轉(zhuǎn)換- 處理大型JSON文件或CSV數(shù)據(jù)。
• 圖像或視頻操作- 過濾器，編碼或像素級操作。
• 數(shù)學計算- 物理模擬，加密或機器學習推斷（例如，使用TensorFlow.js）。
• 實時數(shù)據(jù)處理- 解析和分析來自WebSocket的流數(shù)據(jù)。
• 搜索索引- 為大型數(shù)據(jù)集構(gòu)建內(nèi)存搜索索引。

避免使用工人進行瑣碎的任務(wù) - 消息傳遞的開銷可能是不值得的。

有效工人使用的提示

• 最小化消息大小：在線程之間傳遞大對象可能會很慢。在可能的情況下，請使用transferable objects （例如ArrayBuffer ）以避免複製。

   worker.postmessage（arraybuffer，[arraybuffer]）; //轉(zhuǎn)移所有權(quán)

• 重用工人：不要為每個任務(wù)創(chuàng)建一個新的工人。重複使用它們或使用池（例如，瀏覽器中的node.js般的Piscina等圖書館）。

• 處理錯誤：始終設(shè)置onerror偵聽器以捕獲可能不會引起注意的錯誤。

• 完成後終止：如果不再需要工人，請致電worker.terminate()釋放內(nèi)存。

• 考慮網(wǎng)絡(luò)任務(wù)的服務(wù)工作者：當Web工作人員處理計算時，服務(wù)工作者更適合攔截網(wǎng)絡(luò)請求和緩存。

---

高級：共享工人和圖書館

滿足更複雜的需求：

• 共享工作人員允許多個腳本（甚至跨選項卡）與同一工作者進行通信。
• 像comlink這樣的庫來簡化工人通信，讓您調(diào)用工人函數(shù)，就像它們是遠程對像一樣。
• workerize或螺紋。

這些工具可以使與網(wǎng)絡(luò)工人的合作感覺更自然，而不是雜耍消息。

---

基本上，如果您的應(yīng)用程序在重型處理過程中覺得疲倦，那麼網(wǎng)絡(luò)工作者可能是解決方案。它們不是魔術(shù)，但明智地使用，它們使您的應(yīng)用程序保持平穩(wěn)，您的用戶滿意。

以上是利用網(wǎng)絡(luò)工人的力量進行背景任務(wù)的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！