Maison > Article > interface Web > Explication détaillée du code de la nouvelle fonctionnalité HTML5 multithread (Worker SharedWorker)

Explication détaillée du code de la nouvelle fonctionnalité HTML5 multithread (Worker SharedWorker)

黄舟original: 2017-04-24 10:30:121788parcourir

Il ne fait aucun doute que JavaScript n'a pas de multi-thread. Il ne peut faire qu'une chose à la fois. Après avoir terminé une chose, faites la suivante si votre jsSi une chose prend beaucoup de temps, le navigateur se bloquera pendant un certain temps et ne répondra pas aux opérations de l'utilisateur. Que devons-nous faire ? Dieu merci, HTML5 nous fournit un mécanisme pour implémenter le multi-threading. Vous devez avoir utilisé une si bonne chose il y a longtemps, mais cela n'a pas d'importance, examinons-la. ensemble!

1. Classe Worker

1. Introduction à la méthode

(1)

Constructeur new Worker(arg): paramètres Indique le fichier js où se trouve le code à exécuter par votre thread, tel que 'myworker.js'. Le constructeur renvoie bien sûr une instance de la classe Worker

(2) worker.postMessage(message) : Cette méthode indique que le fil principal envoie un message

au sous-thread ou que le sous-thread envoie un message au fil principal. Le message est généralement une chaîne , ou un. js objet peut être converti en personnage Envoyez-le en série

(3) Il y a aussi un message

événement sur le travailleur Quand quelqu'un envoie un message à cela. instance de travailleur, l'événement est déclenché. Nous pouvons obtenir les données de son objet événement. Obtenez la valeur publiée à partir de l'attribut Vous pouvez voir que l'

API

de. la classe Woker est assez simple, avec seulement les deux méthodes les plus couramment utilisées et un événement. Voyons ci-dessous des exemples pratiques.

//main.html
<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>main</title></head><body>
    <p id="out"></p>
    <input type="text" name="" id="txt">
    <button id="btn">发送</button>
    <script type="text/javascript">
        var out = document.getElementById("out");        
        var btn = document.getElementById("btn");        
        var txt = document.getElementById("txt");        
        var worker = new Worker("thread1.js");
        btn.addEventListener("click",function(){            
        var postData = txt.value;
            worker.postMessage(postData);
        },false);
        worker.addEventListener(&#39;message&#39;,function(e){
            out.innerText = e.data;
        },false);    </script></body></html>

Lorsque je saisis "Big~Bear" dans la zone de texte et que je clique sur le bouton Envoyer

//thread1.js
onmessage = function(event){    
var res = event.data+"帅气！";
    postMessage(res);
}

, l'effet suivant apparaîtra 　

Analyse simple, j'ai créé une instance de Worker par thead1.js dans le thread principal. Lorsque le bouton est cliqué, sa méthode postMessage sera appelée pour envoyer le contenu de la zone de texte à thread1.js, notre. thread1.js Comment ? Voilà, il écoute l'événement message. Lorsque le thread principal envoie un message, il déclenche cet événement et exécute la

fonction de rappel

La fonction de rappel récupère la valeur envoyée par l'objet événement, puis ajoute ". beau!" à cette valeur. , puis renvoyez-le. Le thread principal écoute également l'événement de message du travailleur, il sera donc déclenché lorsqu'un message passe, et le contenu du message sera affiché dans p, afin que vous puissiez voir l'effet ci-dessus. Peut-être que vous pouvez utiliser ça pour quelque chose ? Cela ne sert vraiment à rien ici. Ici, nous pouvons toujours terminer l'opération d'ajout de "beau!" dans le thread principal, car sa complexité est O(1) (haha, j'apprends les algorithmes récemment !), mais si ce n'est pas le cas, une opération simple Un drap de laine ? L'avantage de cette méthode est que, quelle que soit la complexité du travail effectué par votre sous-thread, elle n'arrêtera pas le thread principal. Celui-ci continuera à faire ce qu'il fait. Une fois que le sous-thread aura traité les données, il continuera à le faire. je peux juste prendre le relais.

Le professeur Lu pourra créer un nouveau sous-thread en appelant new Worker() dans le sous-thread. J'ai trouvé que ce n'était pas possible et une erreur non définie sera signalée, ce qui signifie que le Worker. construct ne peut pas être appelé dans le sous-thread, j'ai d'abord pensé que j'avais tort, mais plus tard, j'ai vérifié la documentation officielle et j'ai constaté qu'il n'y avait aucune description pertinente.

Regardons un exemple d'appel de plusieurs sous-threads dans le thread principal :

//main.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>main</title>
</head>
<body>
    <div id="out"></div>
    <input type="text" name="" id="txt">
    <button id="btn">发送</button>
    <script type="text/javascript">

        var out = document.getElementById("out");
        var btn = document.getElementById("btn");
        var txt = document.getElementById("txt");
        var worker1 = new Worker("thread1.js");
        var worker2 = new Worker("thread2.js");
        btn.addEventListener("click",function(){
            var postData = txt.value;
            worker1.postMessage(postData);
        },false);
        worker1.addEventListener(&#39;message&#39;,function(e){
            worker2.postMessage(e.data);
            
        },false);
        worker2.addEventListener(&#39;message&#39;,function(e){
            out.innerText = e.data;
        },false);
    </script>
</body>
</html>

//thread1.js
onmessage = function(event){    
var res = event.data+"帅气！";
        postMessage(res);    
}

Le thread principal a besoin de deux threads pour accomplir une tâche, et il crée deux Threads travailleur1 et 2 demande d'abord travailleur1, récupère les données renvoyées, puis demande travailleur2. En même temps, les données traitées par travailleur1 sont transmises à w

//thread2.js
onmessage = function(event){    
var res = event.data+"没骗你哟！";
    postMessage(res);
    close();
}

ord

er2 pour traitement, puis au final. le résultat est obtenu et affiché sur la page. D'autres fichiers js peuvent être introduits dans le fil enfant puis appelés, comme l'exemple ci-dessous.

//main.html
<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>main</title></head><body>
    <p id="out"></p>
    <input type="text" name="" id="txt">
    <button id="btn">发送</button>
    <script type="text/javascript">

        var out = document.getElementById("out");        
        var btn = document.getElementById("btn");        
        var txt = document.getElementById("txt");        
        var worker1 = new Worker("thread1.js");
        btn.addEventListener("click",function(){            
        var postData = txt.value;
            worker1.postMessage(postData);
        },false);
        worker1.addEventListener(&#39;message&#39;,function(e){
            out.innerText = e.data;
            
        },false);    </script></body></html>

//thread1.js
importScripts(&#39;tools.js&#39;)
onmessage = function(event){
    var res = handler(event.data);
        postMessage(res);    
}

Vous pouvez voir que notre thread1.js n'a pas de fichier appelé tools.js, mais il importe un fichier js via importScripts(), et vous pouvez ensuite l'appeler Une façon d'être exposé.

//tools.js
function handler(data){
    return data+"加油加油！"
}

2. Classe SharedWorker

L'essence de SharedWorker est le partage. Différents threads peuvent partager un seul thread, et leurs données sont également partagées.

Discutons-en directement avec des exemples.

Première méthode d'utilisation :

//main.html
<!DOCTYPE HTML><head>
    <title>Shared workers: demo 1</title></head><body>
    <p id="log"></p><script>
  var worker = new SharedWorker(&#39;shared.js&#39;);  
  var log = document.getElementById(&#39;log&#39;);
  worker.port.onmessage = function(e) { 
  // note: not worker.onmessage!    
  log.textContent += &#39;\n&#39; + e.data;
  }</script></body></html>

Ceci est un exemple tiré de

//shared.js

onconnect = function(e) {
  var port = e.ports[0];
  port.postMessage(&#39;Hello World!&#39;);
}

w3c

Examinons d'abord la deuxième méthode, puis analysons-la.

<!DOCTYPE HTML>
<html>
<head>
    <title>Shared workers: demo 2</title>
    </head>
    <body>
    <p id="log"></p>
    <script>
  var worker = new SharedWorker(&#39;shared.js&#39;);  
  var log = document.getElementById(&#39;log&#39;);
  worker.port.addEventListener(&#39;message&#39;, function(e) {
    log.textContent += &#39;\n&#39; + e.data;
  }, false);
  worker.port.start(); // note: need this when using addEventListener  
  worker.port.postMessage(&#39;ping&#39;);</script>
  </body></html>

//shared
onconnect = function(e) {
  var port = e.ports[0];
  port.postMessage(&#39;Hello World!&#39;);
  port.onmessage = function(e) {
    port.postMessage(&#39;pong&#39;); // not e.ports[0].postMessage!
    // e.target.postMessage(&#39;pong&#39;); would work also
  }
}

　　第一种方法中是使用事件句柄的方式将听message事件，不需要调用worker.port.start(),第二种方法是通过addEventListener()方法监听message事件，需要worker.port.start()方法激活端口。他们不同于worker，当有人和他通信时触发connect事件，然后他的message事件是绑定在messagePort对象上的，不想worker那样，你可以回头看看worker是怎么做的。

　　那么sharedWorker是怎么共享数据的呢？请看下面的例子。

//main1 和main2都是这样
<!DOCTYPE HTML>
<html>
<head>
    <title>Shared workers: demo 2</title>
    </head>
    <body>
    <p id="log"></p>
    <input type="text" name="" id="txt">
    <button id="get">get</button>
    <button id="set">set</button>
    <script>
  var worker = new SharedWorker(&#39;shared.js&#39;);  
  var get = document.getElementById(&#39;get&#39;);  
  var set = document.getElementById(&#39;set&#39;);  
  var txt = document.getElementById(&#39;txt&#39;);  
  var log = document.getElementById(&#39;log&#39;);

  worker.port.addEventListener(&#39;message&#39;, function(e) {
    log.innerText = e.data;
  }, false);
  worker.port.start(); // note: need this when using addEventListener
  set.addEventListener(&#39;click&#39;,function(e){
      worker.port.postMessage(txt.value);
  },false);

  get.addEventListener(&#39;click&#39;,function(e){
      worker.port.postMessage(&#39;get&#39;);
  },false);</script></body></html>

//shared
var data;
onconnect = function(e) {
  var port = e.ports[0];
  port.onmessage = function(e) {
    
    if(e.data==&#39;get&#39;){
        port.postMessage(data);
    }else{
        data=e.data;
    }
  }
}

　　这里分析一波，我们在main1.html的文本框输入数据，点击set，然后在main2.html中点击get法现能够获取到我们在main1.html中设置的数据，这说明我们的sharedWorker事实上是单例的，就像java中的 static类一样，不管new多少个，实际上只有一个，这样我们的不同线程就可以共享到sharedWorker中的数据了。这里把图给上，记得有篇文章没给图，然后有人给我建议了，问能不能给图。

　　最后来小结一下，worker和sharedWorker没有什么悬糊的，就是把台前的工作搬到幕后去做，不打断台前的工作。正所谓台上十分钟，台下十年功，如果你把台下的十年供放到台上做，观众的唾沫星子早就把你淹死了，所以说那些费事费力的工作还是放到台下去，台上只用展示你最好的一面的好了，十分钟足以！　

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Analyse complète de la structure du document HTML5 et des nouvelles balisesArticle suivant：Analyse complète de la structure du document HTML5 et des nouvelles balises

Articles Liés

Voir plus