1.概述
HTML5 Web Worker可以使Javascript程序在后臺單線程執(zhí)行大量耗時的計算任務。Web Worker在執(zhí)行時不能直接訪問DOM。Web Worker也會消耗CPU和系統(tǒng)資源。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):構造函數(shù),參數(shù)是一個用于執(zhí)行Web Worker任務的JavaScript文件的URL地址,可以是相對或絕對地址。可以遞歸建立worker。在頁面調(diào)用。
?terminate():終止worker,終止后不能再重用,只能重建。
在頁面調(diào)用。
?close():終止worker,在Worker內(nèi)調(diào)用。
?importScripts(jsFile_1_URL, jsFile_2_URL, … ):異步地向一個已存在的worker導入JavaScript文件,JavaScript的按照參數(shù)的順序執(zhí)行。在Worker腳本內(nèi)部調(diào)用。
?postMessage(msg):創(chuàng)建werker的頁面與worker之間通信的方法,例如:
// -------------由頁面向worker 發(fā)送消息 ------------------ 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");