Web Worker

时间 2019-12-13

标签 web worker 栏目 HTML 繁體版

原文原文链接

Web Worker提供了一个接口，该接口提供了一种单首创建独立线程的方式。而不影响UI线程javascript

最简单的使用css

在js文件中html

1 var myWorker=new Worker("worker.js");
2 myWorker.addEventListener('message',function(e){
3    alert(e.data);
4 })

在worker.js中java

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)来访问全局对象。而且他能够访问的对象
是有必定限制的。浏览器

嵌入式WORKERpost

 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>

共享workerthis

前面的都只为主线程服务叫作专用worker,共享worker被同源的多个页面所共享，能够用于多个页面的数据同步，和若干标签共享一个资源的状况url

建立一个共享workerspa

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 }

1. Web Worker
2. web worker
3. 区别Web Socket、Web Worker和Service Worker
4. Web Worker Best Practices
5. Web Worker API
6. web worker 简介
7. Web Worker 初探
8. web worker 实践
9. JavaScript之Web Worker
10. 如何debug web worker
更多相关文章...
• Web 标准 - 网站建设指南
• Web 词汇表 - 网站建设指南
• Java 8 Stream 教程
• Tomcat学习笔记（史上最全tomcat学习笔记）