7.6 Web Worker · JavaScript 標準參考教程

[TOC] ## 概述 JavaScript語言采用的是單線程模型，也就是說，所有任務排成一個隊列，一次只能做一件事。隨著電腦計算能力的增強，這一點帶來很大的不便，無法充分發揮JavaScript的潛力。尤其考慮到，File API允許JavaScript讀取本地文件，就更是如此了。 Web Worker的目的，就是為JavaScript創造多線程環境，允許主線程將一些任務分配給子線程。在主線程運行的同時，子線程在后臺運行，兩者互不干擾。等到子線程完成計算任務，再把結果返回給主線程。因此，每一個子線程就好像一個“工人”（worker），默默地完成自己的工作。普通的Wek Worker，只能與創造它們的主進程通信。還有另一類Shared worker，能被所有同源的進程獲取（比如來自不同的瀏覽器窗口、iframe窗口和其他Shared worker）。本節不涉及這一類的worker進程。 Web Worker有以下幾個特點： * 同域限制。子線程加載的腳本文件，必須與主線程的腳本文件在同一個域。 * DOM限制。子線程無法讀取網頁的DOM對象，即document、window、parent這些對象，子線程都無法得到。（但是，navigator對象和location對象可以獲得。） * 腳本限制。子線程無法讀取網頁的全局變量和函數，也不能執行alert和confirm方法，不過可以執行setInterval和setTimeout，以及使用XMLHttpRequest對象發出AJAX請求。 * 文件限制。子線程無法讀取本地文件，即子線程無法打開本機的文件系統（file://），它所加載的腳本，必須來自網絡。使用之前，檢查瀏覽器是否支持這個API。支持的瀏覽器包括IE10、Firefox (從3.6版本開始)、Safari (從4.0版本開始)、Chrome 和 Opera 11，但是手機瀏覽器還不支持。 ~~~ if (window.Worker) { // 支持 } else { // 不支持 } ~~~ ## 新建和啟動子線程主線程采用new命令，調用Worker構造函數，可以新建一個子線程。 ~~~ var worker = new Worker('work.js'); ~~~ Worker構造函數的參數是一個腳本文件，這個文件就是子線程所要完成的任務，上面代碼中是work.js。由于子線程不能讀取本地文件系統，所以這個腳本文件必須來自網絡端。如果下載沒有成功，比如出現404錯誤，這個子線程就會默默地失敗。子線程新建之后，并沒有啟動，必需等待主線程調用postMessage方法，即發出信號之后才會啟動。postMessage方法的參數，就是主線程傳給子線程的信號。它可以是一個字符串，也可以是一個對象。 ~~~ worker.postMessage("Hello World"); worker.postMessage({method: 'echo', args: ['Work']}); ~~~ ## 子線程的事件監聽在子線程內，必須有一個回調函數，監聽message事件。 ~~~ /* File: work.js */ self.addEventListener('message', function(e) { self.postMessage('You said: ' + e.data); }, false); ~~~ self代表子線程自身，self.addEventListener表示對子線程的message事件指定回調函數（直接指定onmessage屬性的值也可）。回調函數的參數是一個事件對象，它的data屬性包含主線程發來的信號。self.postMessage則表示，子線程向主線程發送一個信號。根據主線程發來的不同的信號值，子線程可以調用不同的方法。 ~~~ /* File: work.js */ self.onmessage = function(event) { var method = event.data.method; var args = event.data.args; var reply = doSomething(args); self.postMessage({method: method, reply: reply}); }; ~~~ ## 主線程的事件監聽主線程也必須指定message事件的回調函數，監聽子線程發來的信號。 ~~~ /* File: main.js */ worker.addEventListener('message', function(e) { console.log(e.data); }, false); ~~~ ## 錯誤處理主線程可以監聽子線程是否發生錯誤。如果發生錯誤，會觸發主線程的error事件。 ~~~ worker.onerror(function(event) { console.log(event); }); // or worker.addEventListener('error', function(event) { console.log(event); }); ~~~ ## 關閉子線程使用完畢之后，為了節省系統資源，我們必須在主線程調用terminate方法，手動關閉子線程。 ~~~ worker.terminate(); ~~~ 也可以子線程內部關閉自身。 ~~~ self.close(); ~~~ ## 主線程與子線程的數據通信前面說過，主線程與子線程之間的通信內容，可以是文本，也可以是對象。需要注意的是，這種通信是拷貝關系，即是傳值而不是傳址，子線程對通信內容的修改，不會影響到主線程。事實上，瀏覽器內部的運行機制是，先將通信內容串行化，然后把串行化后的字符串發給子線程，后者再將它還原。主線程與子線程之間也可以交換二進制數據，比如File、Blob、ArrayBuffer等對象，也可以在線程之間發送。但是，用拷貝方式發送二進制數據，會造成性能問題。比如，主線程向子線程發送一個500MB文件，默認情況下瀏覽器會生成一個原文件的拷貝。為了解決這個問題，JavaScript允許主線程把二進制數據直接轉移給子線程，但是一旦轉移，主線程就無法再使用這些二進制數據了，這是為了防止出現多個線程同時修改數據的麻煩局面。這種轉移數據的方法，叫做[Transferable Objects](http://www.w3.org/html/wg/drafts/html/master/infrastructure.html#transferable-objects)。如果要使用該方法，postMessage方法的最后一個參數必須是一個數組，用來指定前面發送的哪些值可以被轉移給子線程。 ~~~ worker.postMessage(arrayBuffer, [arrayBuffer]); window.postMessage(arrayBuffer, targetOrigin, [arrayBuffer]); ~~~ ## 同頁面的Web Worker 通常情況下，子線程載入的是一個單獨的JavaScript文件，但是也可以載入與主線程在同一個網頁的代碼。假設網頁代碼如下： ~~~ <!DOCTYPE html> <body> <script id="worker" type="app/worker"> addEventListener('message', function() { postMessage('Im reading Tech.pro'); }, false); </script> </body> </html> ~~~ 我們可以讀取頁面中的script，用worker來處理。 ~~~ var blob = new Blob([document.querySelector('#worker').textContent]); ~~~ 這里需要把代碼當作二進制對象讀取，所以使用Blob接口。然后，這個二進制對象轉為URL，再通過這個URL創建worker。 ~~~ var url = window.URL.createObjectURL(blob); var worker = new Worker(url); ~~~ 部署事件監聽代碼。 ~~~ worker.addEventListener('message', function(e) { console.log(e.data); }, false); ~~~ 最后，啟動worker。 ~~~ worker.postMessage(''); ~~~ 整個頁面的代碼如下： ~~~ <!DOCTYPE html> <body> <script id="worker" type="app/worker"> addEventListener('message', function() { postMessage('Work done!'); }, false); </script> <script> (function() { var blob = new Blob([document.querySelector('#worker').textContent]); var url = window.URL.createObjectURL(blob); var worker = new Worker(url); worker.addEventListener('message', function(e) { console.log(e.data); }, false); worker.postMessage(''); })(); </script> </body> </html> ~~~ 可以看到，主線程和子線程的代碼都在同一個網頁上面。上面所講的Web Worker都是專屬于某個網頁的，當該網頁關閉，worker就自動結束。除此之外，還有一種共享式的Web Worker，允許多個瀏覽器窗口共享同一個worker，只有當所有網口關閉，它才會結束。這種共享式的Worker用SharedWorker對象來建立，因為適用場合不多，這里就省略了。 ## 參考鏈接 * Matt West,?[Using Web Workers to Speed-Up Your JavaScript Applications](http://blog.teamtreehouse.com/using-web-workers-to-speed-up-your-javascript-applications) * Eric Bidelman,?[The Basics of Web Workers](http://www.html5rocks.com/en/tutorials/workers/basics/) * Eric Bidelman,?[Transferable Objects: Lightning Fast!](http://updates.html5rocks.com/2011/12/Transferable-Objects-Lightning-Fast) * Jesse Cravens,?[Web Worker Patterns](http://tech.pro/tutorial/1487/web-worker-patterns) * Bipin Joshi,?[7 Things You Need To Know About Web Workers](http://www.developer.com/lang/jscript/7-things-you-need-to-know-about-web-workers.html)