Explication détaillée de l'utilisation du multi-threading H5 (Worker SharedWorker)-Tutoriel H5-php.cn

Cette fois, je vais vous apporter une explication détaillée de l'utilisation du multi-thread H5 (Worker SharedWorker), et quelles sont les précautions lors de l'utilisation du multi-thread H5 (Worker SharedWorker). un cas pratique, jetons un coup d'oeil.

Il ne fait aucun doute que JavaScript n'a pas de multi-threading. Il ne peut faire qu'une chose à la fois, puis faire la chose suivante après avoir terminé une chose. Si vous faites une chose pendant longtemps, le navigateur se bloquera pendant un moment et ne répondra pas aux opérations de l'utilisateur. Que pouvez-vous faire ? Dieu merci, HTML5 nous fournit un mécanisme pour implémenter le multi-threading. Vous devez avoir déjà utilisé une si bonne chose, mais ce n'est pas grave, examinons-le ensemble !

1. Classe ouvrière

　1. Introduction à la méthode

　(1) Constructeur new Worker(arg) : Le paramètre 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 consiste à envoyer un message du fil principal au sous-thread ou le sous-thread envoie un message au fil principal. généralement une chaîne , ou cela peut être Convertir un objet js en chaîne et l'envoyer

(3) Il y a aussi un événement de message sur le travailleur Lorsque quelqu'un envoie un message à ceci. instance worker, l'événement est déclenché. On peut récupérer les données de son objet événement. Obtenir la valeur affichée dans l'attribut

Vous pouvez voir que l'API de la classe Woker est assez simple, avec seulement deux le plus souvent. méthodes utilisées et un événement. Jetons un coup d'œil à un exemple pratique.

//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('message',function(e){
            out.innerText = e.data;
        },false);
    </script>
</body>
</html>
//thread1.js
onmessage = function(event){
    var res = event.data+"帅气！";
    postMessage(res);
}

Copier après la connexion

Lorsque je saisis "Big~Bear" dans la zone de texte et que je clique sur le bouton d'envoi, l'effet suivant apparaîtra

Analyse simple, Je suis dans le fil principal. Le thread crée un travailleur d'instance Worker par thead1.js. Lorsque vous cliquez sur le bouton, sa méthode postMessage sera appelée pour envoyer le contenu de la zone de texte à thread1.js. Comment notre thread1.js le fait-il. ? 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 découvert 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 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");
        var worker2 = new Worker("thread2.js");
        btn.addEventListener("click",function(){
            var postData = txt.value;
            worker1.postMessage(postData);
        },false);
        worker1.addEventListener('message',function(e){
            worker2.postMessage(e.data);
        },false);
        worker2.addEventListener('message',function(e){
            out.innerText = e.data;
        },false);
    </script>
</body>
</html>
//thread1.js
onmessage = function(event){
    var res = event.data+"帅气！";
        postMessage(res);    
}
//thread2.js
onmessage = function(event){
    var res = event.data+"没骗你哟！";
    postMessage(res);
    close();
}

Copier après la connexion

Le thread principal a besoin de deux threads pour accomplir une tâche. Il crée deux threads worker1 et 2. Demandez d'abord à travailleur1, récupérez les données renvoyées, puis demandez à travailleur2. En même temps, les données traitées par travailleur1 sont transmises à worder2 pour traitement, puis le résultat final 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('message',function(e){
            out.innerText = e.data;
            
        },false);
    </script>
</body>
</html>
//thread1.js
importScripts('tools.js')
onmessage = function(event){
    var res = handler(event.data);
        postMessage(res);    
}
//tools.js
function handler(data){
    return data+"加油加油！"
}

Copier après la connexion

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 appeler les méthodes exposées à l'intérieur.

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.

　　使用方法一：

//main.html
<!DOCTYPE HTML>
<head>
    <title>Shared workers: demo 1</title>
</head>
<body>
    <p id="log"></p>
<script>
  var worker = new SharedWorker('shared.js');
  var log = document.getElementById('log');
  worker.port.onmessage = function(e) { // note: not worker.onmessage!
    log.textContent += '\n' + e.data;
  }
</script>
</body>
</html>
//shared.js
onconnect = function(e) {
  var port = e.ports[0];
  port.postMessage('Hello World!');
}

Copier après la connexion

　　这是从w3c拿得一个例子，下面先看第二种方法，再做分析

<!DOCTYPE HTML>
<html>
<head>
    <title>Shared workers: demo 2</title>
</head>
<body>
<p id="log"></p>
<script>
  var worker = new SharedWorker('shared.js');
  var log = document.getElementById('log');
  worker.port.addEventListener('message', function(e) {
    log.textContent += '\n' + e.data;
  }, false);
  worker.port.start(); // note: need this when using addEventListener
  worker.port.postMessage('ping');
</script>
</body>
</html>　　
//shared
onconnect = function(e) {
  var port = e.ports[0];
  port.postMessage('Hello World!');
  port.onmessage = function(e) {
    port.postMessage('pong'); // not e.ports[0].postMessage!
    // e.target.postMessage('pong'); would work also
  }
}

Copier après la connexion

　　第一种方法中是使用事件句柄的方式将听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('shared.js');
  var get = document.getElementById('get');
  var set = document.getElementById('set');
  var txt = document.getElementById('txt');
  var log = document.getElementById('log');
  worker.port.addEventListener('message', function(e) {
    log.innerText = e.data;
  }, false);
  worker.port.start(); // note: need this when using addEventListener
  set.addEventListener('click',function(e){
      worker.port.postMessage(txt.value);
  },false);
  get.addEventListener('click',function(e){
      worker.port.postMessage('get');
  },false);
</script>
</body>
</html>
//shared
var data;
onconnect = function(e) {
  var port = e.ports[0];
  port.onmessage = function(e) {
    if(e.data=='get'){
        port.postMessage(data);
    }else{
        data=e.data;
    }
  }
}

Copier après la connexion

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