第9章HTML5多線程目錄HTML5多線程概述使用WebWorkers多線程通訊示例HTML5多線程概述WebWorker是一種機(jī)制，它將執(zhí)行復(fù)雜數(shù)據(jù)運(yùn)算的JavaScript程序放到后臺(tái)運(yùn)行，同時(shí)又不占用瀏覽器的線程資源，而是使用客戶端操作系統(tǒng)的線程資源實(shí)現(xiàn)多線程的機(jī)制。WebWorker一般用來(lái)處理長(zhǎng)期的、高啟動(dòng)成本的和每個(gè)實(shí)例占用高內(nèi)存開(kāi)銷的任務(wù)。WebWorkers中執(zhí)行的腳本不能訪問(wèn)該頁(yè)面的window對(duì)象，不能直接訪問(wèn)Web頁(yè)面和DOMAPI。WebWorkers不會(huì)導(dǎo)致瀏覽器UI停止響應(yīng)，但是在某些情況下跟普通的單獨(dú)線程一樣仍然會(huì)劇烈消耗CPU周期，導(dǎo)致系統(tǒng)反應(yīng)緩慢使用WebWorkers頁(yè)面腳本//1、建立WebWorkersworker=newWorker("./js/echoWorker.js");//2、傳遞消息,postMessageconsole.log("頁(yè)面發(fā)送消息....");worker.postMessage("1");//3、建立監(jiān)聽(tīng)器和事件處理函數(shù)worker.addEventListener("message",messageHandler,true); functionmessageHandler(e){ console.log("頁(yè)面處理worker發(fā)來(lái)的消息"); console.log(e.data);}functionmessageHandler(e){ console.log("JavaScript腳本接收到消息"); postMessage(newDate());}addEventListener("message",messageHandler,true);多線程通訊示例創(chuàng)建HTML5頁(yè)面腳本文件functionmessageHandler(e){ console.log("JavaScript接收到消息"); postMessage(newDate());}addEventListener("message",messageHandler,true);多線程通訊示例頁(yè)面加載函數(shù)消息處理函數(shù)functionloadDemo(){ if(typeof(Worker)!=="undefined"){ document.getElementById("support").innerHTML="提示：您的瀏覽器支持多線程。"; worker=newWorker("js/echoWorker.js"); worker.addEventListener("message",messageHandler,true); worker.addEventListener("error",errorHandler,true); }; document.getElementById("postButton").onclick=postMessagetoWorkers; document.getElementById("stopButton").onclick=stopWorker;} window.addEventListener("load",loadDemo,true);functionmessageHandler(e){ vardt=e.data; vartime="當(dāng)前時(shí)間："+dt.getHours()+":"+dt.getMinutes()+":"+dt.getSeconds(); $("#showMessage").append("<br/>完成接受信息，"+time);}多線程通訊示例發(fā)送消息停止線程functionpostMessagetoWorkers(){ $("#showMessage").append("<br/>開(kāi)