代码改变世界

html5 workers线程

2012-02-17 21:42  边缘er  阅读(313)  评论(0)  编辑  收藏  举报

html5之前，javascript脚本都是在单线程中执行的，也就是说如果js运行时间过长，除了等待什么也干不了，甚至卡死。创建一个worker后台线程，这样就不影响前台的渲染了。

简单演示主页面

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>html5 workers</title>

</head>

<body>
<span id="span1">5</span>
<div id="result">结果</div>
<script type="text/javascript">
var value = +document.getElementById('span1').innerHTML;
var work = new Worker('work.js');
work.onmessage = function(event){
    document.getElementById('result').innerHTML = event.data;
}
window.onload = function(){
    work.postMessage(value);
}
</script>
</body>
</html>

work.js页面代码

onmessage = function(event){
    var result = event.data + 10;    
    postMessage(result);
}

示例简单说明

建立一个后台线程很简单，只要建立一个带有js文件参数的Worker()实例。运行上面内容，"结果"会被"15"替换。
主页面和js页面都通过onmessage()事件句柄来接收数据（message监听事件），此方法可传入一个event事件对象，event.data就是实际传递的数据。
主页面和js页面都通过html5的postMessage方法发送数据（含有循环的引用不能通过postMessage发送）。

注意事项
后台线程脚本文件不能直接访web问页面和DOM API，如果访问会报错。主页面方法都是work实例调用的，而在线程脚本中是直接调用的。

其他相关
work可以使用“error”错误监听事件处理错误
work不会自动关闭，为了节省资源，可使用work.terminate()方法关闭进程。关闭后无法打开，只能新建
线程可以嵌套
如需在线程js中引入其他Js文件，可以使用importScript(urls)方法