Web Worker

在本文中

?

• 與 Web Worker 進行雙向通信
• WindowTimers
• 在 IE10 Platform Preview 4 中對 Web Worker 的更新
• API 參考
• 示例和教程
• 有關 Internet Explorer 的 Test Drive 演示
• IEBlog 文章
• 規范
• 相關主題

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 文件，該文件通過一個發給服務器的異步請求包含在內。

JavaScript var myWorker = new Worker('worker.js');

往來于 worker 線程的所有通信都通過消息進行管理。主機 worker 和 worker 腳本可以通過?postMessage?發送消息并使用?onmessage?事件偵聽響應。消息的內容作為事件的數據屬性進行發送。

下面的示例創建一個 worker 線程并偵聽消息。

JavaScript var hello = new Worker('hello.js'); hello.onmessage = function(e) {alert(e.data); };

worker 線程發送要顯示的消息。

JavaScript postMessage('Hello world!');

?

與 Web Worker 進行雙向通信

要建立雙向通信，主頁和 worker 線程都要偵聽?onmessage?事件。在以下示例中，Worker 線程在指定的延遲后返回消息。

首先，該腳本創建 worker 線程。

JavaScript var echo = new Worker('echo.js'); echo.onmessage = function(e) {alert(e.data); }

消息文本和超時值在表單中進行指定。當用戶單擊提交按鈕時，腳本會將兩條信息以 JavaScript 對象文本的形式傳遞給 worker。為了防止頁面在新的 HTTP 請求中提交表單值，事件處理程序還對事件對象調用?preventDefault。注：你不能將對 DOM 對象的引用發送給 worker 線程。Web Worker 并非可以訪問所有數據。只允許訪問 JavaScript 基元（例如 Object 或 String 值）。

HTML <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 偵聽消息，并在指定的超時間隔之后將其返回。

JavaScript onmessage = function(e) {setTimeout(function() {postMessage(e.data.message);}, e.data.timeout * 1000); }

?

在 Internet Explorer?10 和使用 JavaScript 的 Windows 應用商店應用中，Web Worker API 支持以下方法。

方法描述

void?close()；	終止 worker 線程。
void?importScripts(inDOMString...?urls)；	導入其他 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 事件：

事件描述

onerror	出現運行時錯誤。
onmessage	接收到消息數據。

?

WindowTimers

?

Web Worker API 還支持更新的 HTML5?WindowTimers?功能。

方法描述

void?clearInterval(inlonghandle)；	取消由句柄所確定的超時。
void?clearTimeout(inlonghandle)；	取消由句柄所確定的超時。
long?setInterval(inanyhandler,inoptionalanytimeout,?inany...args)；	計劃在指定的毫秒數之后重復運行的超時。注：你現在可以將其他參數直接傳遞到處理程序。如果處理程序是?DOMString，它被編譯成 JavaScript。將句柄返回到超時。清除?clearInterval。
long?setTimeout(inanyhandler，在可選的任何超時中，在任何... 參數中）；	計劃在指定的毫秒數之后運行的超時。注：你現在可以將其他參數直接傳遞到處理程序。如果處理程序是?DOMString，它被編譯成 JavaScript。將句柄返回到超時。清除?clearTimeout。

?

在 IE10 Platform Preview 4 中對 Web Worker 的更新

Internet Explorer?10 Platform Preview Build 4 添加了每個進程 25 個 Web Worker 線程的限制。你可以在腳本中創建更多的 worker，但同時只有 25 個將處于活動狀態。

如果達到最大線程數，創建 worker 將不會引發異常。調用總是成功，你可以添加處理程序并將消息發布給它。但是，在現有的 25 個線程之一變得可用之前，worker 可能不會啟動。

JavaScript // 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...

?

轉載于:https://www.cnblogs.com/dacuotecuo/p/4237810.html

總結

以上是生活随笔為你收集整理的html5之web worker的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。