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

HTML5 Web Workers 使用案例

2016-06-22 10:57 531 查看

1 什么是Web Workers?

当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。web
worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。

2 使用案例

webworkers.html文件

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- web worker是运行在后台的javascript，不会影响页面的性能 -->
<p>计数:<output id="result"></output></p>
<button onclick="startWorker()">开始worker</button>
<button onclick="endWorker()">停止worker</button>
<br><br>
<script type="text/javascript">
var w;
function startWorker(){
if(typeof(Worker)!="undefined"){//浏览器支持web worker
if(typeof(w)=="undefined"){//w是未定义的,还没有开始计数
w = new Worker("webworker.js");//创建一个Worker对象,利用Worker的构造函数
}
//onmessage是Worker对象的properties
w.onmessage = function(event){//事件处理函数,用来处理后端的web worker传递过来的消息
document.getElementById("result").innerHTML=event.data;
};
}else{
document.getElementById("result").innerHTML="sorry,your browser does not support web workers";
}
}
function endWorker(){
w.terminate();//利用Worker对象的terminated方法,终止
w=undefined;
}
</script>
</body>
</html>

在后台运行的web worker js文件,webworker.js

var i = 0;

function timeCount(){
i = i + 1;
postMessage(i);//postMessage是Worker对象的方法，用于向html页面回传一段消息
setTimeout("timeCount()",500);//定时任务
}

timeCount();//加1计数,每500毫秒调用一次

3 效果截图

4 参考链接

http://blog.csdn.net/liuwengai/article/details/51674274

http://www.w3school.com.cn/html5/html_5_webworkers.asp

5 扩展延伸

http://blog.teamtreehouse.com/using-web-workers-to-speed-up-your-javascript-applications

http://www.html5rocks.com/en/tutorials/workers/basics/

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

标签：

相关文章推荐

新的分享

章节导航