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學習筆記）

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。