标签：
Web Worker提供了一个接口，该接口提供了一种单独创建独立线程的方式。而不影响UI线程
最简单的使用
在js文件中
1 var myWorker=new Worker("worker.js"); 2 myWorker.addEventListener(‘message‘,function(e){ 3 alert(e.data); 4 })
在worker.js中
1 var num=0; 2 for(var i=-;i<1000;i++){ 3 num++; 4 } 5 postMessage(num);
2个线程之间可以通过postMessage（）进行通信，但传递的类容只能是被序列化的数据，不能传递普通的js对象
新创建的线程和原始线程的区别
1:浏览器中全局对象是Window对象，这个对象可以访问DOM和BOM的全部对象，worker线程只能通过this(self)来访问全局对象。并且他可以访问的对象
是有一定限制的。
嵌入式WORKER
1 //脚本不会被js解析，因为type是自创的 2 <script type="text/js-worker" id="worker"> 3 var num=0; 4 for(var i=0;i<100;i++){ 5 num+=i; 6 } 7 self.addEventListener(‘message‘,function(e){ 8 self.postMessage(e.data+‘,‘+num)l 9 },false); 10 </script> 11 12 <script type="text/javascript"> 13 14 var code=document.getElementById(‘worker‘).textContent; 15 //构建二进制对象，第一个是数组，第二个是对象参数 16 var blob=new Blob([code],{type:"text/javascript"}); 17 //window.URL.createObjectURL(blob)用来创建一个简单的网址字符串。 18 var myWorker=new Worker(window.URL.createObjectURL(blob)); 19 myWorker.addEventListener(‘message‘,function(e){ 20 console.log(e.data); 21 },false); 22 myWorker.postMessage(‘get result‘); 23 </script>
共享worker
前面的都只为主线程服务叫做专用worker,共享worker被同源的多个页面所共享，可以用于多个页面的数据同步，和若干标签共享一个资源的情况
创建一个共享worker
1 var worker=new ShareWorker("worker.js","doSomething")
接受2个参数 url 和给共享worker取的名字，这个名字可以为同一个js文件创建多个worker实例
共享worker的实例
主界面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>共享worker</title> <style type="text/css"> </style> <script type="text/javascript"> var out=document.getElementById(‘output‘); var id=(‘‘+Date.now()).substr(-4,4); console.log(id); document.getElementById(‘iam‘).innerHTML=‘我的编号是‘+id; var worker=new SharedWorker(‘shared-worker.js‘); worker.port.addEventListener(‘message‘,function(e){ output.innerHTML+=e.data; },false); worker.port.start(); function sayHI(){ worker.port.postMessage({‘cmd‘:‘hi‘,‘msg‘:‘大家好！<br>‘,‘id‘:id}); } </script> </head> <body> <span id="iam"></span> <button onclick="sayHI()">say hi</button> <div id="output"></div> </body> </html>
shared-worker.js
1 var ports=[]; 2 function boradcast(msg){ 3 ports.forEach(function(port){ 4 port.postMessage(msg); 5 }) 6 } 7 self.onconnect=function(e){ 8 var newport=e.ports[0]; 9 ports.push(newport); 10 newport.onmessage=function(e){ 11 if(e.data.cmd==‘hi‘){ 12 boradcast(e.data.id+‘说：‘+e.data.msg); 13 } 14 } 15 }
标签：
原文地址：http://www.cnblogs.com/sliuie/p/5160434.html
