解決JavaScript單線程問題——webWorkers

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

MDN的介紹為:

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

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

如何使用webWorker

創(chuàng)建worker

• 先創(chuàng)建一個(gè)worker.js文件, 該文件為線程代碼文件, 文件中的代碼會(huì)在后臺(tái)線程中運(yùn)行.

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

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

主線程和worker之間進(jìn)行通訊

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

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

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

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

我們也可以使用更簡(jiǎn)潔的方式

// 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]之后, 我們可以簡(jiǎn)單的對(duì)數(shù)組進(jìn)行一個(gè)逆序操作, 再把結(jié)果返回主線程

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

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

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

關(guān)閉線程

worker.terminate()可以幫助我們?cè)谥骶€程中隨意關(guān)閉線程, 即為從主線程中立刻終止一個(gè)運(yùn)行中的 worker

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

worker監(jiān)聽

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

• message
• error
• messageError:

注意事項(xiàng)

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

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

最新評(píng)論