您的位置：首页 > Web前端 > HTML5

HTML5学习总结-06 WebWorker

2016-09-10 14:49 537 查看

一 WebWorkder

　　它允许开发人员编写能够长时间运行而不被用户所中断的后台程序，去执行事务或者逻辑，并同时保证页面对用户的响应。简而言之，就是允许JavaScript创建多个线程，但是子线程完全受主线程控制，且不得操作DOM。从而，可以用webWorker来处理一些比较耗时的计算。

好处：

　　1 可以加载一个JS进行大量的复杂计算而不挂起主进程，并通过postMessage，onmessage进行通信
　　2 可以在worker中通过importScripts(url)加载另外的脚本文件
　　3 可以使用 setTimeout(), clearTimeout(), setInterval(), and clearInterval()
　　4 可以使用XMLHttpRequest来发送请求

局限性：
　　1 不能跨域加载JS
　　2 worker内代码不能访问DOM
　　3 各个浏览器对Worker的实现不大一致，例如FF里允许worker中创建新的worker,而Chrome中就不行
　　4 IE这个新特性

例子：

index.html

<!DOCTYPE html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<p id="support">你的浏览器不支持 HTML5 Web Workers</p>
<button id="stopButton" >停止任务</button>
<button id="helloButton" >发送消息</button>
<script>
window.onload = function() {
if( typeof (Worker) !== "undefined") {
document.getElementById("support").innerHTML = "你的浏览器支持HTML5 Web Workers";
worker = new Worker("worker.js");
worker.onmessage = function(e) {
console.log(e.data);
}
worker.onerror = function(e) {
console.warn(e.message, e);
}
document.getElementById("helloButton").onclick = function() {
worker.postMessage("ok");
}
document.getElementById("stopButton").onclick = function() {
worker.terminate();
};
}
}

</script>

worker.js

onmessage = function(e) {
postMessage("worker says: " + e.data );
}

参考资料：
http://www.w3school.com.cn/html5/html_5_webworkers.asp http://www.cnblogs.com/giggle/p/5350288.html http://www.cnblogs.com/giggle/p/5350288.html

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航