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)terminate()
线程中终止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+"" ; //主线程使用terminate方法中断与子线程来往,在浏览器中只能显示一次event.data worker.terminate(); }; };
3.Web Worker 上下文
onmessage() //接收消息事件
onerror() //错误消息事件
worker
我们可以做什么:
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这个新特性