您的位置：首页 > 其它

Web Worker

2016-07-28 15:41 309 查看

Web Worker 让你在后台运行JS代码。

一般地，JavaScript和页面UI会共用一个线程，当JavaScript在运行的时候，页面是不响应用户的任何操作的。这个时候，这段代码就可以交给Web Worker来完成，不会影响页面交互。

Web Worker 无法访问DOM节点

Web Worker 无法访问window、document之类的浏览器全局变量
Web Worker 无法访问全局变量或全局函数
Web Worker 无法使用 alert（），confirm（）等

1.常用API

（1）postMessage(data)
子线程与主线程之间互相通信使用方法，传递的data为任意值

//worker = new Worker('url');
//worker.postMessage传递给子线程数据，对象
worker.postMessage({first:1,second:2});
//子线程中也可以使用postMessage，如传递字符串
postMessage(‘test’);

(2)[b]terminate()[/b]
线程中终止worker，此后无法再利用其进行消息传递。注意：一旦terminate后，无法重新启用，只能另外创建。

function init(){
var worker = new Worker('worker.js');
//每隔100毫秒，向子线程传递{name: 'monkey'}信息
setInterval(function(){
worker.postMessage({name: 'monkey'});
},100);
//当主线程worker收到来自子线程的消息后，触发message事件
worker.onmessage = function(event){
document.getElementById('result').innerHTML+=event.data+"<br/>" ;                   //主线程使用terminate方法中断与子线程来往，在浏览器中只能显示一次event.data                    worker.terminate();
};
};

3.Web Worker 上下文
onmessage() //接收消息事件
onerror() //错误消息事件

<!DOCTYPE html>
<head>
<title>worker</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script>
function init(){
var worker = new Worker('worker.js');
//接收消息事件
worker.onmessage = function(event){
console.log(event.data);
};
//错误信息事件
worker.onerror = function(e){
console.log('erro: ' + e.message);
//终止线程
worker.terminate();
};
};
</script>
</head>
<body onload = "init()">

</body>
</html>

我们可以做什么：　　1.可以加载一个JS进行大量的复杂计算而不挂起主进程，并通过postMessage，onmessage进行通信　　2.可以在worker中通过importScripts(url)加载另外的脚本文件　　3.可以使用 setTimeout(), clearTimeout(), setInterval(), and clearInterval()　　4.可以使用XMLHttpRequest来发送请求　　5.可以访问navigator的部分属性局限性：　　1.不能跨域加载JS　　2.worker内代码不能访问DOM　　3.各个浏览器对Worker的实现不大一致，例如FF里允许worker中创建新的worker,而Chrome中就不行　　4.IE这个新特性

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

标签： Web Worker postMessage

相关文章推荐

新的分享

章节导航