Web Worker
Internet Explorer?10 和使用 JavaScript 的 Windows 應用商店應用引入了對 Web Worker 的支持。Web Worker API 定義了一種在后臺運行腳本的方法。 Web Worker 是在萬維網聯合會 (W3C) 的?Web Worker 規范中指定的。
從傳統意義上來說,瀏覽器是單線程的,它們會強制應用程序中的所有腳本一起在單個 UI 線程中運行。雖然你可以通過使用文檔對象模型 (DOM) 事件和setTimeout?API 造成一種多個任務同時在運行的假象,但只需一個計算密集型任務就會使用戶體驗急轉直下。
Web Worker API 為 Web 應用程序的創作人員提供了一種方法,用于生成與主頁并行運行的后臺腳本。你可以一次生成多個線程以用于長時間運行的任務。新的 worker 對象需要一個 .js 文件,該文件通過一個發給服務器的異步請求包含在內。
var myWorker = new Worker('worker.js');
往來于 worker 線程的所有通信都通過消息進行管理。主機 worker 和 worker 腳本可以通過?postMessage?發送消息并使用?onmessage?事件偵聽響應。消息的內容作為事件的數據屬性進行發送。
下面的示例創建一個 worker 線程并偵聽消息。
var hello = new Worker('hello.js'); hello.onmessage = function(e) {alert(e.data); };
worker 線程發送要顯示的消息。
postMessage('Hello world!');
?
與 Web Worker 進行雙向通信
要建立雙向通信,主頁和 worker 線程都要偵聽?onmessage?事件。在以下示例中,Worker 線程在指定的延遲后返回消息。
首先,該腳本創建 worker 線程。
var echo = new Worker('echo.js'); echo.onmessage = function(e) {alert(e.data); }
消息文本和超時值在表單中進行指定。當用戶單擊提交按鈕時,腳本會將兩條信息以 JavaScript 對象文本的形式傳遞給 worker。為了防止頁面在新的 HTTP 請求中提交表單值,事件處理程序還對事件對象調用?preventDefault。注:你不能將對 DOM 對象的引用發送給 worker 線程。Web Worker 并非可以訪問所有數據。只允許訪問 JavaScript 基元(例如 Object 或 String 值)。
<script> window.onload = function() {var echoForm = document.getElementById('echoForm'); echoForm.addEventListener('submit', function(e) {echo.postMessage({message : e.target.message.value,timeout : e.target.timeout.value}); e.preventDefault();}, false); } </script> <form id="echoForm"><p>Echo the following message after a delay.</p><input type="text" name="message" value="Input message here."/><br/><input type="number" name="timeout" max="10" value="2"/> seconds.<br/><button type="submit">Send Message</button> </form>
最后,worker 偵聽消息,并在指定的超時間隔之后將其返回。
onmessage = function(e) {setTimeout(function() {postMessage(e.data.message);}, e.data.timeout * 1000); }
?
在 Internet Explorer?10 和使用 JavaScript 的 Windows 應用商店應用中,Web Worker API 支持以下方法。
方法 | 描述 |
---|---|
終止 worker 線程。 | |
導入其他 JavaScript 文件的逗號分隔列表。 | |
void?postMessage(在任何數據中); | 從 worker 線程發送消息或發送消息到 worker 線程。 |
?
Internet Explorer?10 和使用 JavaScript 的 Windows 應用商店應用支持以下 Web Worker API 屬性:
屬性 | 類型 | 描述 |
---|---|---|
location | WorkerLocation | 代表絕對 URL,包括protocol、host、port、hostname、pathname、search?和?hash?組件。 |
navigator | WorkerNavigator | 代表用戶代理客戶端的標識和?onLine?狀態。 |
self | WorkerGlobalScope | Worker 范圍,包括?WorkerLocation?和?WorkerNavigator?對象。 |
?
?
Internet Explorer?10 和使用 JavaScript 的 Windows 應用商店應用支持以下 Web Worker API 事件:
事件 | 描述 |
---|---|
出現運行時錯誤。 | |
接收到消息數據。 |
?
WindowTimers
?
Web Worker API 還支持更新的 HTML5?WindowTimers?功能。
方法 | 描述 |
---|---|
取消由句柄所確定的超時。 | |
取消由句柄所確定的超時。 | |
long?setInterval(inanyhandler,inoptionalanytimeout,?inany...args); | 計劃在指定的毫秒數之后重復運行的超時。注:你現在可以將其他參數直接傳遞到處理程序。如果處理程序是?DOMString,它被編譯成 JavaScript。將句柄返回到超時。清除?clearInterval。 |
計劃在指定的毫秒數之后運行的超時。注:你現在可以將其他參數直接傳遞到處理程序。如果處理程序是?DOMString,它被編譯成 JavaScript。將句柄返回到超時。清除?clearTimeout。 |
?
在 IE10 Platform Preview 4 中對 Web Worker 的更新
Internet Explorer?10 Platform Preview Build 4 添加了每個進程 25 個 Web Worker 線程的限制。你可以在腳本中創建更多的 worker,但同時只有 25 個將處于活動狀態。
如果達到最大線程數,創建 worker 將不會引發異常。調用總是成功,你可以添加處理程序并將消息發布給它。但是,在現有的 25 個線程之一變得可用之前,worker 可能不會啟動。
// Coding pattern before IE10 Platform Preview Build 4 try {var worker = new Worker(url); } catch(ex) {// IE might throw...? }// After IE10 Platform Preview Build 4 var worker = new Worker(url); // Continue with confidence...
?