HTML5-Web Worker APIs的代碼詳解

1.概述
HTML5 Web Worker可以使Javascript程序在后臺單線程執行大量耗時的計算任務。Web Worker在執行時不能直接訪問DOM。Web Worker也會消耗CPU和系統資源。Web Worker與頁面間的通信可以通過Web Worker的方法postMessage和message事件。

2.瀏覽器支持檢測

 function loadDemo()      {           if   (typeof(Worker) !== "undefined")         {              document  .getElementById("support").innerHTML =                "Excellent! Your browser supports HTML5 Web Workers";         }      }

3.worker對象
worker對象是window對象的子對象，它有下面幾個方法：
?Worker(jsFile_URL)：構造函數，參數是一個用于執行Web Worker任務的JavaScript文件的URL地址，可以是相對或絕對地址。可以遞歸建立worker。在頁面調用。
?terminate()：終止worker，終止后不能再重用，只能重建。
在頁面調用。
?close()：終止worker，在Worker內調用。
?importScripts(jsFile_1_URL, jsFile_2_URL, … )：異步地向一個已存在的worker導入JavaScript文件，JavaScript的按照參數的順序執行。在Worker腳本內部調用。
?postMessage(msg)：創建werker的頁面與worker之間通信的方法，例如：

    // -------------由頁面向worker  發送消息  ------------------        document.getElementById("helloButton").  onclick   = function() {            worker.postMessage("Here's a message   for   you");         }        // -------------頁面接收來自worker的消息----------------              worker.addEvent  List  ener("message", messageHan  dl  er, true);         function messageHandler(e) {            // process message from worker         }         // -------------JavaScript  文件處理  來自頁面的消息----------------        addEventListener("message", messageHandler, true);        function messageHandler(e) {            postMessage("worker says: " + e.data + " too");         }

4.錯誤處理

 // -------------在頁面處理來自worker的消息----------------     worker.addEventListener("error", errorHandler, true);     function errorHandler(e) {         console.log(e.message, e);      }

5.使用定時器
盡管worker不能直接訪問DOM中的對象，但可以完全使用window對象中與時間有關的方法和屬性，也可以使用部分其他屬性。如：

  var t =   set  Time  out(postMessage, 2000, "delayed message");