Web Worker

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Web Worker相关的知识，希望对你有一定的参考价值。

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 }

 

以上是关于Web Worker的主要内容，如果未能解决你的问题，请参考以下文章

[Web Worker] Introduce to Web Worker

爱创课堂每日一题 Web Worker 和webSocket?

Web Worker

nignx的master进程和worker进程的作用

web worker 使用及在 electron 中使用web worker

web worker 与 service worker