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");
以上是HTML5-Web Worker APIs的程式碼詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!