《HTML5程序設計及實踐》課件第9章 HTML5多線程

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