解決JavaScript單執行緒問題——webWorkers

參考檔案使用 Web Workers - Web API 介面參考 | MDN (mozilla.org)

MDN的介紹為:

Web Worker 為 Web 內容在后臺執行緒中運行腳本提供了一種簡單的方法，執行緒可以執行任務而不干擾用戶界面，此外，它們可以使用 XMLHttpRequest（盡管 responseXML 和 channel 屬性總是為空）或 fetch（沒有這些限制）執行 I/O，一旦創建，一個 worker 可以將訊息發送到創建它的 JavaScript 代碼，通過將訊息發布到該代碼指定的事件處理器（反之亦然），

簡單來說就是, 我們可以通過使用worker為主執行緒分擔資料處理壓力.
假如說你有一段很大的資料需要處理, 而你又不想這段程式阻礙你的其他操作,這時候就可以考慮一下webWorker.

如何使用webWorker

創建worker

先創建一個worker.js檔案, 該檔案為執行緒代碼檔案, 檔案中的代碼會在后臺執行緒中運行.

在主執行緒中創建一個worker, 通過類似通訊的方式在主執行緒和worker中進行資料傳遞.

// index.js主執行緒代碼塊
// 簡單創建一個worker名為myworker
let myworker = new Worker("./firstworker.js") // 引數為firstworker.js檔案的路徑

主執行緒和worker之間進行通訊

主執行緒發送資料給worker: 在主執行緒中通過 worker.prototype.postMessage() 進行通信

// index.js主執行緒代碼塊
// ... 創建完worker

console.log("主執行緒我說句話先,接下來你要替我干活了.");
// 簡單向worker中發送一個陣列[1, 2, 3]
myworker.postMessage([1, 2, 3]);

worker接收來自主執行緒的資料: 在myworker.js中接收資料

// firstworker.js代碼塊
// 接收來自主執行緒的資料，陣列[1, 2, 3]
onmessage = function recive(msg) {
    // 接收到的是一個MessageEvent物件, 我們可以獲取data屬性
    console.log(msg.data); // 輸出[1, 2, 3]
};

我們也可以使用更簡潔的方式

// firstworker.js代碼塊
// 使用解構和匿名箭頭函式
onmessage = ({ data }) => {
  console.log(data); // 輸出[1, 2, 3]
};

worker發送資料給主執行緒: 通過 postMessage() 發送資料給主執行緒 index.js

接收到陣列[1, 2, 3]之后, 我們可以簡單的對陣列進行一個逆序操作, 再把結果回傳主執行緒

// firstworker.js代碼塊
onmessage = ({ data }) => {
    // 主執行緒發來的資料
    console.log("主執行緒發來的資料:", data);
    // 賦值一個新變數newdata
    let newdata = https://www.cnblogs.com/waterrec/p/data;
    // 對新變數操作(陣列逆序)
    newdata.sort((a, b) => {
        return b - a;
    });
    console.log("worker后臺執行緒處理完成的資料newdata:", newdata);
    // 處理完的結果遞交給主執行緒
    postMessage(newdata);
};

主執行緒接收worker訊息: 通過 addEventListener() 對worker的動作進行監聽

// index.js主執行緒代碼塊
// 主執行緒通過 監聽 實體的message事件獲取worker的資料
// 接收myworker處理之后的結果
myworker.addEventListener("message", ({ data }) => {
    console.log("接收到來自worker處理完的資料:", data);
});

關閉執行緒

worker.terminate()可以幫助我們在主執行緒中隨意關閉執行緒, 即為從主執行緒中立刻終止一個運行中的 worker

// index.js主執行緒代碼塊
// 3s后關閉執行緒
setTimeout(() => {
    console.log("關閉myworker,你別說話了")
    myWorker.terminate();
}, 3000);

// firstworker.js代碼塊
setTimeout(() => {
    console.log("4秒時讓我說句話")
}, 4000);

worker監聽

主執行緒通過 addEventListener() 對worker動作進行監聽, 動作包含三種

message
error
messageError:

注意事項

worker是HTML5規范的API,所以你沒法在node環境中使用.
worker沒辦法對dom元素操作, 只能在主執行緒中, 多執行緒操作dom感覺就不大好.
worker可以用于執行長時間運行的計算、處理大量資料、執行網路請求等任務，而不會影響用戶界面的回應性能.幫助開發人員提高Web應用程式的性能和回應性能.
本文章只對worker的使用進行了簡單介紹, 具體進階用法等詳細內容還得參考MDN檔案（共享worker, 執行緒安全, 嵌入式worker等）

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/554708.html

標籤：HTML5

上一篇：h5移動端頁面除錯工具Chii與 weinre 一樣的遠程除錯工具

下一篇：返回列表