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

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

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

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

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

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

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

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

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

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

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

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

  //模擬沉重的任務
  讓結(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)絡工人最好的用例

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

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

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

有效工人使用的提示

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

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

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

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

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

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

---

高級：共享工人和圖書館

滿足更復雜的需求：

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

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

---

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

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