《HTML5程序设计及实践》课件第9章 HTML5多线程

第9章HTML5多线程目录HTML5多线程概述使用WebWorkers多线程通讯示例HTML5多线程概述WebWorker是一种机制，它将执行复杂数据运算的JavaScript程序放到后台运行，同时又不占用浏览器的线程资源，而是使用客户端操作系统的线程资源实现多线程的机制。WebWorker一般用来处理长期的、高启动成本的和每个实例占用高内存开销的任务。WebWorkers中执行的脚本不能访问该页面的window对象，不能直接访问Web页面和DOMAPI。WebWorkers不会导致浏览器UI停止响应，但是在某些情况下跟普通的单独线程一样仍然会剧烈消耗CPU周期，导致系统反应缓慢使用WebWorkers页面脚本//1、建立WebWorkersworker=newWorker("./js/echoWorker.js");//2、传递消息,postMessageconsole.log("页面发送消息....");worker.postMessage("1");//3、建立监听器和事件处理函数worker.addEventListener("message",messageHandler,true); functionmessageHandler(e){ console.log("页面处理worker发来的消息"); console.log(e.data);}functionmessageHandler(e){ console.log("JavaScript脚本接收到消息"); postMessage(newDate());}addEventListener("message",messageHandler,true);多线程通讯示例创建HTML5页面脚本文件functionmessageHandler(e){ console.log("JavaScript接收到消息"); postMessage(newDate());}addEventListener("message",messageHandler,true);多线程通讯示例页面加载函数消息处理函数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);}多线程通讯示例发送消息停止线程functionpostMessagetoWorkers(){ $("#showMessage").append("<br/>开