Les travailleurs Web sont une fonctionnalité de la spécification HTML5 qui permettent à JavaScript d'exécuter en arrière-plan, indépendamment du thread principal d'une application Web. Cette séparation des tâches permet aux développeurs Web d'effectuer des opérations à forte intensité de calcul sans avoir un impact sur la réactivité de l'interface utilisateur.
Pour utiliser les travailleurs du Web pour le traitement des antécédents, vous suivrez généralement ces étapes:
worker.js
. Instancier le travailleur : Dans votre fichier JavaScript principal, créez un nouveau travailleur en instanciant l'objet Worker
avec le chemin d'accès à votre script de travailleur. Par exemple:
<code class="javascript">const myWorker = new Worker('worker.js');</code>
Envoyez des messages : Communiquez avec le travailleur en lui envoyant des messages à l'aide de la méthode postMessage
. Le travailleur peut recevoir ces messages à l'aide d'un écouteur d'événements pour l'événement message
.
<code class="javascript">myWorker.postMessage({command: 'start', data: someData});</code>
Gérer les réponses : dans le fil principal, écoutez les messages renvoyés du travailleur à l'aide d'un écouteur d'événements pour l'événement message
.
<code class="javascript">myWorker.onmessage = function(e) { console.log('Message received from worker', e.data); };</code>
Terminez le travailleur : lorsque vous avez terminé, vous pouvez résilier le travailleur avec la méthode terminate
.
<code class="javascript">myWorker.terminate();</code>
L'utilisation de travailleurs Web de cette manière permet un traitement en arrière-plan sans se produire sans geler ou ralentir le fil principal, conservant ainsi une expérience utilisateur fluide.
Les travailleurs du Web peuvent améliorer considérablement les performances d'une application Web de plusieurs manières:
Certains types de tâches sont particulièrement bien adaptés aux travailleurs du Web en raison de leur nature et de leurs exigences:
Oui, les travailleurs du Web peuvent communiquer entre eux, un processus facilité par le thread principal agissant en tant que coordinateur. Voici comment cette communication peut être réalisée:
Fil principal en tant que centre : le fil principal peut agir comme un centre central, recevant des messages d'un travailleur et le transmettant à un autre travailleur. Cette méthode nécessite que le fil principal soit impliqué dans le processus de communication.
Dans le fil principal:
<code class="javascript">const worker1 = new Worker('worker1.js'); const worker2 = new Worker('worker2.js'); worker1.onmessage = function(e) { if (e.data.command === 'sendToWorker2') { worker2.postMessage(e.data.message); } }; worker2.onmessage = function(e) { if (e.data.command === 'sendToWorker1') { worker1.postMessage(e.data.message); } };</code>
Travailleurs partagés : Une autre méthode de communication inter-travailleurs consiste à utiliser des travailleurs partagés. Un travailleur partagé est accessible par plusieurs scripts, permettant à différentes parties d'une demande de communiquer via un seul travailleur partagé.
Création d'un travailleur partagé:
<code class="javascript">const sharedWorker = new SharedWorker('sharedWorker.js'); sharedWorker.port.onmessage = function(e) { console.log('Message received from shared worker', e.data); }; sharedWorker.port.postMessage({command: 'message', data: someData});</code>
Communication directe des travailleurs-travailleurs : Bien que moins commun et moins simple, il est possible pour les travailleurs de communiquer directement à l'aide MessageChannel
et MessagePort
. Cette approche nécessite de configurer un canal entre les travailleurs, que le fil principal peut faciliter.
Dans le fil principal:
<code class="javascript">const channel = new MessageChannel(); const worker1 = new Worker('worker1.js'); const worker2 = new Worker('worker2.js'); worker1.postMessage('connect', [channel.port1]); worker2.postMessage('connect', [channel.port2]);</code>
En utilisant ces méthodes, les travailleurs du Web peuvent communiquer efficacement entre eux, permettant des scénarios de traitement d'arrière-plan plus complexes dans les applications Web.
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!