摘要:的作用,就是為創造多線程環境,允許主線程創建線程,將一些任務分配給后者運行。在主線程運行的同時,線程在后臺運行,兩者互不干擾。等到線程完成計算任務,再把結果返回給主線程。如果發生錯誤,會觸發主線程的事件。
本文由云+社區發表一、概述
JavaScript 語言采用的是單線程模型,也就是說,所有任務只能在一個線程上完成,一次只能做一件事。前面的任務沒做完,后面的任務只能等著。隨著電腦計算能力的增強,尤其是多核 CPU 的出現,單線程帶來很大的不便,無法充分發揮計算機的計算能力。
Web Worker 的作用,就是為 JavaScript 創造多線程環境,允許主線程創建 Worker 線程,將一些任務分配給后者運行。在主線程運行的同時,Worker 線程在后臺運行,兩者互不干擾。等到 Worker 線程完成計算任務,再把結果返回給主線程。這樣的好處是,一些計算密集型或高延遲的任務,被 Worker 線程負擔了,主線程(通常負責 UI 交互)就會很流暢,不會被阻塞或拖慢。
Worker 線程一旦新建成功,就會始終運行,不會被主線程上的活動(比如用戶點擊按鈕、提交表單)打斷。這樣有利于隨時響應主線程的通信。但是,這也造成了 Worker 比較耗費資源,不應該過度使用,而且一旦使用完畢,就應該關閉。
Web Worker 有以下幾個使用注意點。
(1)同源限制
分配給 Worker 線程運行的腳本文件,必須與主線程的腳本文件同源。
(2)DOM 限制
Worker 線程所在的全局對象,與主線程不一樣,無法讀取主線程所在網頁的 DOM 對象,也無法使用document、window、parent這些對象。但是,Worker 線程可以navigator對象和location對象。
(3)通信聯系
Worker 線程和主線程不在同一個上下文環境,它們不能直接通信,必須通過消息完成。
(4)腳本限制
Worker 線程不能執行alert()方法和confirm()方法,但可以使用 XMLHttpRequest 對象發出 AJAX 請求。
(5)文件限制
Worker 線程無法讀取本地文件,即不能打開本機的文件系統(file://),它所加載的腳本,必須來自網絡。
二、基本用法 2.1 主線程主線程采用new命令,調用Worker()構造函數,新建一個 Worker 線程。
var worker = new Worker("work.js");
Worker()構造函數的參數是一個腳本文件,該文件就是 Worker 線程所要執行的任務。由于 Worker 不能讀取本地文件,所以這個腳本必須來自網絡。如果下載沒有成功(比如404錯誤),Worker 就會默默地失敗。
然后,主線程調用worker.postMessage()方法,向 Worker 發消息。
worker.postMessage("Hello World"); worker.postMessage({method: "echo", args: ["Work"]});
worker.postMessage()方法的參數,就是主線程傳給 Worker 的數據。它可以是各種數據類型,包括二進制數據。
接著,主線程通過worker.onmessage指定監聽函數,接收子線程發回來的消息。
worker.onmessage = function (event) { console.log("Received message " + event.data); doSomething(); } function doSomething() { // 執行任務 worker.postMessage("Work done!"); }
上面代碼中,事件對象的data屬性可以獲取 Worker 發來的數據。
Worker 完成任務以后,主線程就可以把它關掉。
worker.terminate();2.2 Worker 線程
Worker 線程內部需要有一個監聽函數,監聽message事件。
self.addEventListener("message", function (e) { self.postMessage("You said: " + e.data); }, false);
上面代碼中,self代表子線程自身,即子線程的全局對象。因此,等同于下面兩種寫法。
// 寫法一 this.addEventListener("message", function (e) { this.postMessage("You said: " + e.data); }, false); // 寫法二 addEventListener("message", function (e) { postMessage("You said: " + e.data); }, false);
除了使用self.addEventListener()指定監聽函數,也可以使用self.onmessage指定。監聽函數的參數是一個事件對象,它的data屬性包含主線程發來的數據。self.postMessage()方法用來向主線程發送消息。
根據主線程發來的數據,Worker 線程可以調用不同的方法,下面是一個例子。
self.addEventListener("message", function (e) { var data = e.data; switch (data.cmd) { case "start": self.postMessage("WORKER STARTED: " + data.msg); break; case "stop": self.postMessage("WORKER STOPPED: " + data.msg); self.close(); // Terminates the worker. break; default: self.postMessage("Unknown command: " + data.msg); }; }, false);
上面代碼中,self.close()用于在 Worker 內部關閉自身。
2.3 Worker 加載腳本Worker 內部如果要加載其他腳本,有一個專門的方法importScripts()。
importScripts("script1.js");
該方法可以同時加載多個腳本。
importScripts("script1.js", "script2.js");2.4 錯誤處理
主線程可以監聽 Worker 是否發生錯誤。如果發生錯誤,Worker 會觸發主線程的error事件。
worker.onerror(function (event) { console.log([ "ERROR: Line ", e.lineno, " in ", e.filename, ": ", e.message ].join("")); }); // 或者 worker.addEventListener("error", function (event) { // ... });
Worker 內部也可以監聽error事件。
2.5 關閉 Worker使用完畢,為了節省系統資源,必須關閉 Worker。
// 主線程 worker.terminate(); // Worker 線程 self.close();三、數據通信
前面說過,主線程與 Worker 之間的通信內容,可以是文本,也可以是對象。需要注意的是,這種通信是拷貝關系,即是傳值而不是傳址,Worker 對通信內容的修改,不會影響到主線程。事實上,瀏覽器內部的運行機制是,先將通信內容串行化,然后把串行化后的字符串發給 Worker,后者再將它還原。
主線程與 Worker 之間也可以交換二進制數據,比如 File、Blob、ArrayBuffer 等類型,也可以在線程之間發送。下面是一個例子。
// 主線程 var uInt8Array = new Uint8Array(new ArrayBuffer(10)); for (var i = 0; i < uInt8Array.length; ++i) { uInt8Array[i] = i * 2; // [0, 2, 4, 6, 8,...] } worker.postMessage(uInt8Array); // Worker 線程 self.onmessage = function (e) { var uInt8Array = e.data; postMessage("Inside worker.js: uInt8Array.toString() = " + uInt8Array.toString()); postMessage("Inside worker.js: uInt8Array.byteLength = " + uInt8Array.byteLength); };
但是,拷貝方式發送二進制數據,會造成性能問題。比如,主線程向 Worker 發送一個 500MB 文件,默認情況下瀏覽器會生成一個原文件的拷貝。為了解決這個問題,JavaScript 允許主線程把二進制數據直接轉移給子線程,但是一旦轉移,主線程就無法再使用這些二進制數據了,這是為了防止出現多個線程同時修改數據的麻煩局面。這種轉移數據的方法,叫做Transferable Objects。這使得主線程可以快速把數據交給 Worker,對于影像處理、聲音處理、3D 運算等就非常方便了,不會產生性能負擔。
如果要直接轉移數據的控制權,就要使用下面的寫法。
// Transferable Objects 格式 worker.postMessage(arrayBuffer, [arrayBuffer]); // 例子 var ab = new ArrayBuffer(1); worker.postMessage(ab, [ab]);四、同頁面的 Web Worker
通常情況下,Worker 載入的是一個多帶帶的 JavaScript 腳本文件,但是也可以載入與主線程在同一個網頁的代碼。