---

前言

JavaScript采用的是單線程模型，也就是說，所有任務只能在一個線程上完成，一次只能做一件事。每個任務將按順序運行；必須先完成一項任務，然后才能開始下一項任務。

Web Worker的出現(xiàn)，就是給js創(chuàng)建多線程的環(huán)境。這樣，一些高延時的任務，就可以交給webworker去執(zhí)行，主線程負責UI交互，這樣主線程就不會被阻塞。

---

一、Web Worker是什么？

Web Worker 是一種在后臺運行的 JavaScript 腳本，它可以在獨立的線程中執(zhí)行任務，而不會阻塞主線程的執(zhí)行。這使得 Web Worker 特別適用于處理一些耗時的計算、數(shù)據處理或其他需要長時間運行的任務。

兼容性：ie11測過了，可以支持。

二、使用步驟

2.1 創(chuàng)建 Web Worker

通過創(chuàng)建一個新的 Worker 對象，可以將腳本文件加載到后臺線程中運行。

var worker = new Worker('./worker.js');
var worker1 = new Worker('./worker1.js');

2.2 監(jiān)聽消息

Web Worker 可以通過 onmessage 事件監(jiān)聽主線程發(fā)送過來的消息。

第一步和這一步都是在html文件中

worker.onmessage = e => {console.log(e.data)
}
worker1.onmessage = e => {console.log(e.data)
}

2.3 發(fā)送消息

Web Worker 可以使用 postMessage 方法向主線程發(fā)送消息。

單獨創(chuàng)建的一個js文件處理數(shù)據

self.postMessage(res)

文件目錄

html文件

js文件

看運行結果

可以看出來這個是個異步的，哪個js先執(zhí)行完，就先打印出來。兩個js文件互不影響。

三、優(yōu)點與缺點

3.1 優(yōu)點

• 提高頁面性能：Web Worker 可以在后臺線程中執(zhí)行一些計算密集型或者耗時的操作，如數(shù)據處理、圖像處理等，而不會占用主線程，從而避免了頁面卡頓或者卡死的情況，提高了頁面的性能和響應速度。

• 可以處理大規(guī)模數(shù)據：Web Worker 可以處理大規(guī)模的數(shù)據，因為它們在單獨的線程中運行，不會影響主線程的運行，可以更高效地處理大規(guī)模的數(shù)據，提高了代碼的效率和可擴展性。

• 可以使代碼更加模塊化：使用 Web Worker，可以將代碼分割成多個模塊，分別運行在不同的線程中，從而使得代碼更加模塊化，可維護性和可讀性更強。

• 支持多線程：Web Worker 支持多線程，因此可以利用多核處理器的優(yōu)勢，提高代碼的運行效率。

3.2 缺點

• 無法直接訪問 DOM：由于 Web Worker 運行在獨立的線程中，不能直接訪問主線程中的 DOM，因此需要使用特殊的方式進行通信，如 postMessage() 方法。

• 無法訪問主線程中的 JavaScript 對象：Web Worker 獨立運行在一個線程中，無法直接訪問主線程中的 JavaScript 對象，需要使用序列化和反序列化等技術進行數(shù)據傳遞。

• 無法加載本地文件：Web Worker 只能通過網絡加載 JavaScript 文件，無法直接加載本地文件。

• 無法執(zhí)行同步操作：Web Worker 無法執(zhí)行同步操作，如讀取文件或等待用戶的輸入等，因為同步操作會阻塞 Web Worker 的線程。

• 不支持所有瀏覽器：Web Worker 不是所有瀏覽器都支持，尤其是一些舊版的瀏覽器可能不支持 Web Worker。

四、Vue中使用Web Worker

1. 我的是vue-cli3，在vue.config.js中配置

chainWebpack: (config) => {config.module.rule('worker-loader').test(/\.worker\.js$/).use({loader: 'worker-loader',options: {inline: true,},}).loader('worker-loader').end()
}

2.創(chuàng)建worker.js文件

在src文件下創(chuàng)建worker文件夾，里面創(chuàng)建worker.js文件

worker.js文件內容

let date = []addEventListener('message', function () {fib()
}, false)function fib() {setInterval(() => {var res = Math.random() * 10date.push(res.toFixed(3))self.postMessage(date)}, 1000)
}

3.在vue中使用worker.js文件

<script>
import Worker from 'worker-loader!@/workers/worker'
export default {mounted() {let worker = new Worker()worker.postMessage(10)worker.onmessage = (event) => {console.log('res', event.data) }},
}
</script>

最后看控制臺

---