第9章 HTML5多线程

创建HTML5页面
多线程通讯示例
脚本文件
function messageHandler(e){ console.log("JavaScript接收到消息"); postMessage(new Date());
} addEventListener("message",messageHandler,true);
}
多线程通讯示例
发送消息
function postMessagetoWorkers(){ $("#showMessage").append("<br/>开始发送消息......"); worker.postMessage("1");
}
停止线程
function stopWorker() { worker.terminate();
使用Web Workers
页面
//1、建立Web Workers worker=new Worker("./js/echoWorker.js"); //2、传递消息,postMessage console.log("页面发送消息...."); worker.postMessage("1"); //3、建立监听器和事件处理函数 worker.addEventListener("message",messageHandler,true); function messageHandler(e){
}
谢谢 Thanks for listening.
多线程通讯示例
页面加载函数
function loadDemo(){ if(typeof(Worker)!=="undefined"){ document.getElementById("support").innerHTML="提示：您的浏览器支持多线程。"; worker=new Worker("js/echoWorker.js"); worker.addEventListener("message",messageHandler,true); worker.addEventListener("error",errorHandler,true); }; document.getElementById("postButton").onclick=postMessagetoWorkers; document.getElementById("stopButton").onclick=stopWorker;
Web Worker一般用来处理长期的、高启动成本的和每个实例占用高内存开 销的任务。
Web Workers中执行的脚本不能访问该页面的window对象，不能直接访问 Web页面和DOM API。
Web Workers不会导致浏览器UI停止响应，但是在某些情况下跟普通的单独 线程一样仍然会剧烈消耗CPentListener("load",loadDemo,true);
消息处理函数
function messageHandler(e){ var dt = e.data; var time = "当前时间：" + dt.getHours()+":"+dt.getMinutes()+":"+ dt.getSeconds(); $("#showMessage").append("<br/>完成接受信息，"+time);
第9章 HTML5 多线程
目录
HTML5多线程概述 使用Web Workers 多线程通讯示例
HTML5 多线程概述
Web Worker是一种机制，它将执行复杂数据运算的JavaScript程序放到后 台运行，同时又不占用浏览器的线程资源，而是使用客户端操作系统的线 程资源实现多线程的机制。
console.log("页面处理worker发来的消息"); console.log(e.data); }
脚本
function messageHandler(e){ console.log("JavaScript脚本接收到消息"); postMessage(new Date());
} addEventListener("message",messageHandler,true);