JavaScript之Web Worker

介紹

Web Worker爲Web內容在後臺線程中運行腳本提供了一種簡單的方法。線程能夠執行任務而不干擾用戶界面。此外，他們能夠使用XMLHttpRequest執行 I/O (儘管responseXML和channel屬性老是爲空)。一旦建立， 一個worker 能夠將消息發送到建立它的JavaScript代碼, 經過將消息發佈到該代碼指定的事件處理程序（反之亦然）。

Web Worker使用要點

• 同源限制：分配給 Worker 線程運行的腳本文件，必須與主線程的腳本文件同源。
• DOM 限制：Worker 線程所在的全局對象，與主線程不同，沒法讀取主線程所在網頁的 DOM 對象，也沒法使用document、window、parent這些對象。可是，Worker 線程能夠navigator對象和location對象。
• 通訊聯繫：Worker 線程和主線程不在同一個上下文環境，它們不能直接通訊，必須經過消息完成。
• 腳本限制：Worker 線程不能執行alert()方法和confirm()方法，但能夠使用 XMLHttpRequest 對象發出 AJAX 請求。
• 文件限制：Worker 線程沒法讀取本地文件，即不能打開本機的文件系統（file://），它所加載的腳本，必須來自網絡。後面咱們容許會作處理。

安裝http-server

Worker 線程沒法讀取本地文件，即不能打開本機的文件系統（file://），它所加載的腳本，必須來自網絡。因此咱們得起一個項目。使用http-server最簡單
安裝：

> cnpm i -g http-server

使用：

> http-server

基本使用

咱們新建一個文件夾名叫worker，裏面新建三個文件分別是

index.html
main.js
worker.js

新建一個worker線程很簡單，只需：

var worker = new Worker('worker.js')

main.js:

var worker = new Worker('./worker.js')
console.log('worker running')
worker.addEventListener('message',e => {
    console.log('main: ', e.data);
})
// 也可以使用：
// worker.onmessage = (e)=>{
//     console.log('main: ', e.data);
// }
worker.postMessage('hello worker,I am from main.js')

worker.js:

console.log('worker task running')
onmessage = (e)=>{
    console.log('worker task receive', e.data);
    // 發送數據事件
    postMessage('Hello, I am from Worker.js');
}

在worker文件夾下，命令行輸入http-server,啓動項目，用瀏覽器打開，看控制檯：

worker running
worker task running
worker task receive hello worker,I am from main.js
main:  Hello, I am from Worker.js

從上面能夠看到，worker經過onmessage來監聽數據，經過postMessgae來發送數據

終止 worker

worker.terminate();

處理錯誤

worker.addEventListener('error',  (e) => {
  console.log('main error', 'filename:' + e.filename + 'message:' + e.message + 'lineno:' + e.lineno;
});

• event.filename: 致使錯誤的 Worker 腳本的名稱；
• event.message: 錯誤的信息；
• event.lineno: 出現錯誤的行號；

加載外部腳本

main.js

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

worker1.js

console.log("I'm worker1")
importScripts('worker2.js', 'worker3.js');
// 或者
// importScripts('worker2.js');
// importScripts('worker3.js');

worker2.js

console.log("I'm worker2")

worker3.js

console.log("I'm worker3")

兼容性

https://caniuse.com/#feat=webworkers
兼容性還不是很樂觀，不過在移動端的兼容性還不錯

參考

使用 Web Workers
Web Worker 使用教程

Github

wclimb