概述
Web Worker 是 html5 的新特性，JavaScript 是單線程模型，所有任務只能在一個線程上完成，一次只能做一件事。前面的任務沒做完，后面的任務只能等著， 在某些場景下很不方便，Web Worker 的作用，就是為 JavaScript 創造多線程環境，允許主線程創建 Worker 線程，將一些任務分配給后者運行。在主線程運行的同時，Worker 線程在后臺運行，兩者互不干擾。等到 Worker 線程完成計算任務，再把結果返回給主線程。這樣的好處是，一些計算密集型或高延遲的任務可以交由 Worker 線程執行，主線程能夠保持流暢，不會被阻塞或拖慢。
Worker 線程一旦新建成功，就會始終運行，不會被主線程上的活動（比如用戶點擊按鈕、提交表單）打斷。這樣有利于隨時響應主線程的通信。但是，這也造成了 Worker比較耗費資源，不應該過度使用，而且一旦使用完畢，就應該關閉
使用場景
任何需要始終運行的js代碼都可以使用Worker ， 比如定時器，當頁面處于不可見狀態時，定時器的執行間隔會擴大，這樣會造成一些程序的執行異常，此時就可以使用webWorkers來解決
使用方法
-
線程創建
專用線程由Worker()方法創建，可以接收兩個參數，第一個參數是必填的腳本的位置，第二個參數是可選的配置對象，可以指定type、credentials、name三個屬性
var worker = new Worker('worker.js')
共享線程使用 Shared Worker() 方法創建，同樣支持兩個參數，用法與 Worker() 一致。
var sharedWorker = new SharedWorker('shared-worker.js')
注意： 因為 Web Worker 有同源限制，所以在本地調試的時候也需要通過啟動本地服務器的方式訪問，使用 file:// 協議直接打開的話將會拋出異常，且Worker線程不能執行alert()方法和confirm()方法，但可以使用XMLHttpRequest對象發出 AJAX 請求
-
Worker 線程和主線程之間的通信
Worker線程和主線程都通過postMessage()方法發送消息，通過onmessage事件接收消息。在這個過程中數據并不是被共享的，postMessage()一次只能發送一個對象， 如果需要發送多個參數可以將參數包裝為數組或對象再進行傳遞
// 主線程
var worker = new Worker('worker.js')
worker.postMessage([10, 24])
worker.onmessage = function(e) {
console.log(e.data)
}
// Worker 線程
onmessage = function (e) {
if (e.data.length > 1) {
postMessage(e.data[1] - e.data[0])
}
}
在 Worker 線程中，self 和 this 都代表子線程的全局對象。對于監聽 message 事件，以下的四種寫法是等同的
// 寫法 1
self.addEventListener('message', function (e) {
// ...
})
// 寫法 2
this.addEventListener('message', function (e) {
// ...
})
// 寫法 3
addEventListener('message', function (e) {
// ...
})
// 寫法 4
onmessage = function (e) {
// ...
}
- **關閉 Worker **
// 主線程
worker.terminate()
// Dedicated Worker 線程中
self.close()
// Shared Worker 線程中
self.port.close()
在vue中使用Worker
首先要安裝laoder
npm i -D worker-loader
在vue.config.js中配置以下
module.exports = {
// ...
chainWebpack(config) {
config.module
.rule('worker')
.test(/\.worker\.js$/)
.use('worker-loader')
.loader('worker-loader')
.end();
config.module.rule('js').exclude.add(/\.worker\.js$/)
},
parallel: false,
// chainWebpack: config => {
// // 解決：“window is undefined”報錯，這個是因為worker線程中不存在window對象，因此不能直接使用，要用this代替
// config.output.globalObject('this')
// }
}
配置了之后 worker.js 后綴的文件就會被 loader 處理
// 在timer.worker.js
let count = 0
// 接收主線程的消息
self.addEventListener('message', (e) => {
count = e.data
self.postMessage(count--)
}, false)
// 用定時器發消息
setInterval(() => {
// postMessage 用于數據交互
self.postMessage(count)
count--
}, 1000)
// 在vue中
import Worker from './prompt.worker.js'
mounted() {
this.worker = new Worker()
this.worker.postMessage('給線程發消息')
this.worker.onmessage = (event) => {
console.log('接收到的消息為：' + event.data)
}
}
