Web 工作者

Internet Explorer 10 與使用 JavaScript 的 Windows 市集應用程式引進了 Web 工作者支援。Web 工作者 API 定義了指令碼在背景中的執行方式。 Web 工作者在全球資訊網協會 (W3C) 的 Web 工作者規格中有具體說明。

瀏覽器傳統上是單一執行緒,強制應用程式中所有的指令碼在單一 UI 執行緒中一起執行。雖然您可以使用文件物件模型 (DOM) 事件與 setTimeout API 讓使用者產生數個事件同時發生的錯覺,但只要執行一個需要大量電腦資源的工作,使用者就會覺得螢幕停滯不動。

Web 工作者 API 提供一個方式讓 Web 應用程式作者能夠產生可與主頁面平行執行的背景指令碼。您可以一次產生數個執行緒,供長期執行的工作使用。新的工作者物件需要 .js 檔案,對伺服器發出非同步要求即可產生此檔案。


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

與工作者執行緒來往的所有通訊都是透過訊息加以管理。主機工作者與工作者指令碼兩者,都可以使用 postMessage 傳送訊息,以及使用 onmessage 事件接聽回應。訊息內容會被當作事件的資料屬性傳送。

下列範例會建立工作者執行緒並接聽訊息。


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

工作者執行緒會傳送要顯示的訊息。


postMessage('Hello world!');

使用 Web 工作者進行雙向通訊

為了建立雙向通訊,主頁面和工作者執行緒都會接聽 onmessage 事件。在下列範例中,工作者執行緒會在指定的延遲之後傳回訊息。

首先,指令碼會建立工作者執行緒。


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

在表單中指定訊息文字和逾時值。當使用者按一下 [提交] 按鈕時,指令碼會以 JavaScript 物件常值傳送兩個資訊給工作者。為防止頁面以新的 HTTP 要求提交表單值,事件處理常式也會呼叫事件物件上的 preventDefault。請注意,您不能將 DOM 物件的參照傳送給工作者執行緒。Web 工作者在資料存取類型上有所限制。只允許存取 JavaScript 基本型別,例如物件或字串值。


<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>


最後,工作者會接聽訊息,然後在指定的逾時間隔之後將訊息傳回。


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

在 Internet Explorer 10 和使用 JavaScript 的 Windows 市集應用程式中,Web 工作者 API 支援下列方法。

方法說明

void close();

終止工作者執行緒。

void importScripts(inDOMString... urls);

匯入以逗號分隔的其他 JavaScript 檔案清單。

void postMessage(在任何資料中);

將訊息傳送給工作者執行緒,或從工作者執行緒傳送訊息。

 

Internet Explorer 10 與使用 JavaScript 的 Windows 市集應用程式支援下列 Web 工作者 API 屬性:

屬性類型說明
locationWorkerLocation代表絕對 URL,包含 protocolhostporthostnamepathnamesearch 以及 hash 元件。
navigatorWorkerNavigator代表使用者代理程式用戶端的身分識別和 onLine 狀態。
selfWorkerGlobalScope工作者範圍,包含 WorkerLocationWorkerNavigator 物件。

 

Internet Explorer 10 與使用 JavaScript 的 Windows 市集應用程式支援下列 Web 工作者 API 事件:

事件說明

onerror

發生執行階段錯誤。

onmessage

收到訊息資料。

 

WindowTimers

Web 工作者 API 也支援已更新的 HTML5 WindowTimers 功能。

方法說明

void clearInterval(inlonghandle);

取消由控制代碼所識別的逾時。

void clearTimeout(inlonghandle);

取消由控制代碼所識別的逾時。

long setInterval(inanyhandlerinoptionalanytimeoutinany... args);

排定在達到指定的毫秒數之後重複執行逾時。請注意,您現在可以將其他引數直接傳送給處理常式。如果處理常式是一個 DOMString,就會將它編譯成 JavaScript。將控制代碼傳回給逾時。以 clearInterval 清除。

long setTimeout(inanyhandler, in optional any timeout, in any... args);

排定在達到指定的毫秒數之後執行逾時。請注意,您現在可以將其他引數直接傳送給處理常式。如果處理常式是一個 DOMString,就會將它編譯成 JavaScript。將控制代碼傳回給逾時。以 clearTimeout 清除。

 

IE10 平台預覽版組建 4 中的 Web 工作者更新

Internet Explorer 10 平台預覽版組建 4 限制每個處理程序最多有 25 個 Web 工作者執行緒。您可以在指令碼中建立更多工作者,但只能有 25 個同時為作用中。

達到執行緒數目上限時,再建立工作者並不會擲回例外狀況。呼叫一律會成功,而您可以為它新增處理常式和張貼訊息。不過,工作者會等到現有的 25 個執行緒中有可使用的執行緒時才會啟動。


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

API 參考

Web Workers

範例和教學課程

Web 工作者範例
如何使用 HTML5 瀏覽曼德博集合

Internet Explorer Test Drive 示範

曼德博瀏覽器
Web 工作者來源
Web Worker Harness for test262

IEBlog 文章

在 IE10 中偵錯 Web 工作者
IE10 Web 工作者:背景 JavaScript 讓 Web 應用程式變得更快

規格

Web 工作者

相關主題

含有 Web 工作者的 HTML5 執行緒與含有 IndexedDB 的資料存放區
HTML5 Web 工作者簡介:JavaScript 多執行緒方法

 

 

顯示:
© 2014 Microsoft