解決JavaScript單線程問題——webWorkers

參考文檔 使用 Web Workers - Web API 接口參考 | MDN (mozilla.org)

MDN的介紹為:

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

簡單來說就是, 我們可以通過使用worker為主線程分擔(dān)數(shù)據(jù)處理壓力.
假如說你有一段很大的數(shù)據(jù)需要處理, 而你又不想這段程序阻礙你的其他操作,這時候就可以考慮一下webWorker.

如何使用webWorker

創(chuàng)建worker

• 先創(chuàng)建一個worker.js文件, 該文件為線程代碼文件, 文件中的代碼會在后臺線程中運行.

在主線程中創(chuàng)建一個worker, 通過類似通訊的方式在主線程和worker中進行數(shù)據(jù)傳遞.

// index.js主線程代碼塊
// 簡單創(chuàng)建一個worker名為myworker
let myworker = new Worker("./firstworker.js") // 參數(shù)為firstworker.js文件的路徑

主線程和worker之間進行通訊

主線程發(fā)送數(shù)據(jù)給worker: 在主線程中通過 worker.prototype.postMessage() 進行通信

// index.js主線程代碼塊
// ... 創(chuàng)建完worker
console.log("主線程我說句話先,接下來你要替我干活了.");
// 簡單向worker中發(fā)送一個數(shù)組[1, 2, 3]
myworker.postMessage([1, 2, 3]);

worker接收來自主線程的數(shù)據(jù): 在myworker.js中接收數(shù)據(jù)

// firstworker.js代碼塊
// 接收來自主線程的數(shù)據(jù)，數(shù)組[1, 2, 3]
onmessage = function recive(msg) {
    // 接收到的是一個MessageEvent對象, 我們可以獲取data屬性
    console.log(msg.data); // 輸出[1, 2, 3]
};

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

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

worker發(fā)送數(shù)據(jù)給主線程: 通過 postMessage() 發(fā)送數(shù)據(jù)給主線程 index.js

接收到數(shù)組[1, 2, 3]之后, 我們可以簡單的對數(shù)組進行一個逆序操作, 再把結(jié)果返回主線程

// firstworker.js代碼塊
onmessage = ({ data }) => {
    // 主線程發(fā)來的數(shù)據(jù)
    console.log("主線程發(fā)來的數(shù)據(jù):", data);
    // 賦值一個新變量newdata
    let newdata = data;
    // 對新變量操作(數(shù)組逆序)
    newdata.sort((a, b) => {
        return b - a;
    });
    console.log("worker后臺線程處理完成的數(shù)據(jù)newdata:", newdata);
    // 處理完的結(jié)果遞交給主線程
    postMessage(newdata);
};

主線程接收worker訊息: 通過 addEventListener() 對worker的動作進行監(jiān)聽

// index.js主線程代碼塊
// 主線程通過 監(jiān)聽 實例的message事件獲取worker的數(shù)據(jù)
// 接收myworker處理之后的結(jié)果
myworker.addEventListener("message", ({ data }) => {
    console.log("接收到來自worker處理完的數(shù)據(jù):", data);
});

關(guān)閉線程

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

// index.js主線程代碼塊
// 3s后關(guān)閉線程
setTimeout(() => {
    console.log("關(guān)閉myworker,你別說話了")
    myWorker.terminate();
}, 3000);
// firstworker.js代碼塊
setTimeout(() => {
    console.log("4秒時讓我說句話")
}, 4000);

worker監(jiān)聽

主線程通過 addEventListener() 對worker動作進行監(jiān)聽, 動作包含三種

• message
• error
• messageError:

注意事項

• worker是HTML5規(guī)范的API,所以你沒法在node環(huán)境中使用.
• worker沒辦法對dom元素操作, 只能在主線程中, 多線程操作dom感覺就不大好.
• worker可以用于執(zhí)行長時間運行的計算、處理大量數(shù)據(jù)、執(zhí)行網(wǎng)絡(luò)請求等任務(wù)，而不會影響用戶界面的響應(yīng)性能.幫助開發(fā)人員提高Web應(yīng)用程序的性能和響應(yīng)性能.
• 本文章只對worker的使用進行了簡單介紹, 具體進階用法等詳細(xì)內(nèi)容還得參考MDN文檔（共享worker, 線程安全, 嵌入式worker等）

到此這篇關(guān)于JavaScript解決單線程缺陷——webWorker的文章就介紹到這了,更多相關(guān)js單線程內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！