Comment implémenter Web Worker dans le multi-threading H5-tutoriel HTML-php.cn

Beaucoup de gens m'ont demandé comment implémenter Web Worker en multi-threading H5 ? Lorsque nous parlons de cette question, vous devez tout d’abord savoir ce qu’est un Web Worker, c’est pourquoi aujourd’hui nous répondrons à cette question pour vous.

Lorsque le code JavaScript est transmis au Web Worker pour exécution en arrière-plan, la page peut toujours répondre aux opérations de l'utilisateur pendant l'exécution du JavaScript pour éviter que la page ne reste bloquée. Les utilisateurs peuvent créer plusieurs threads de travail afin de pouvoir effectuer du calcul distribué à petite échelle et d'autres travaux au premier plan.

L'informatique distribuée est une méthode informatique opposée à l'informatique centralisée. Avec le développement de la base de calcul, certaines applications nécessitent une puissance de calcul très importante. Si l'informatique centralisée est utilisée, cela prendra beaucoup de temps. L'informatique distribuée divise l'application en plusieurs petites parties et les affecte à plusieurs ordinateurs pour traitement. Cela peut permettre d'économiser du temps de calcul global et d'améliorer considérablement l'efficacité informatique.

L'informatique distribuée à petite échelle que j'ai mentionnée ci-dessus est une utilisation efficace des processeurs multicœurs.

Choses qui ne peuvent pas être faites dans les threads :

Web Worker ne peut pas accéder au nœud DOM Il est normal que le DOM ne puisse pas être partagé, sinon le DOM est manipulé ici, et le Worker manipule également le DOM, ou même supprime le DOM, n'est-ce pas un conflit ? Web Worker ne peut pas accéder aux variables globales ou aux fonctions globales Web Worker ne peut pas appeler des fonctions telles que alert() ou confirmer. Web Worker ne peut pas accéder aux variables globales du navigateur telles que window et document

<.>Choses qui peuvent être faites dans le fil :

peut utiliser setTimeout(), clearTimeout(), setInterval(), clearInterval() et d'autres fonctions. Peut utiliser

objet navigateur. XMLHttpRequest. Pour envoyer une requête, vous pouvez utiliser Web Storage et vous pouvez utiliser self pour obtenir la portée de ce fil

Web Worker peut être divisé en deux types : le fil dédié (travailleur Web dédié) et le fil partagé ( travailleur Web partagé). Un fil de discussion dédié n'est accessible que par la page qui l'a créé et se termine lorsque la page actuelle est fermée ; tandis qu'un fil de discussion partagé est accessible par plusieurs pages et ne se terminera que lorsque toutes les pages associées sont fermées. Comparés aux threads dédiés, les threads partagés sont légèrement plus compliqués.

Détecter la prise en charge du navigateur pour Web Worker

if(typeof(Worker)!=="undefined")  {  
    // Yes! Web worker support!  
}  else  {  
    // Sorry! No Web Worker support..  
}

Copier après la connexion

Créer des objets et des fichiers Web Worker :

Ce qui suit est probablement la démo multithread JS d'entrée de gamme la plus simple :

Écrivez la description de l'image ici

Créer un fil de discussion

var worker = new Worker(url);//url est le nom du fichier JavaScript et le chemin correspondant qui doit être exécuté dans le thread

Communication par thread

La communication entre le thread principal et les threads enfants utilise les méthodes postMessage et onmessage de l'objet thread. Peu importe qui envoie des données à qui, l'expéditeur utilise la méthode postMessage et le destinataire utilise la méthode onmessage pour recevoir des données. postMessage et onmessage n'ont qu'un seul paramètre. En supposant que le paramètre de onmessage est event, les données reçues sont obtenues via event.data.

Détruisez le thread

En dehors du thread, utilisez la méthode terminate de l'instance de thread pour détruire le thread. À l'intérieur du thread, utilisez la méthode close, le thread se détruit

<🎜. >Gestion des erreurs

Lorsqu'une erreur se produit dans un thread, son rappel d'événement onerror sera appelé.

Envoyer des données JSON

var worker = new Worker("test.js");
worker.onerror = function(event){
    console.log("load web worker error." + event);
}

Copier après la connexion

Envoyer des données complexes en JSON !

Utilisez importScripts dans Web Worker pour charger des fichiers JS externes

Dans la page HTML, utilisez la balise

Derniers articles par auteur

Introduction à la dernière version de PHP Programmer Toolbox v1.0

2018-06-11 11:57:34
Comment gérer l'échec du routage vue.js

2018-06-15 15:55:18
Comment utiliser js pour analyser la base de données (avec code)

2018-06-15 15:49:00
Comment utiliser js pour lier les événements DOM dans le projet

2018-06-15 15:46:15
Comment utiliser les chaînes JS et les caractères spéciaux

2018-06-15 15:42:38
Comment utiliser chaque méthode dans jQuery dans un projet

2018-06-15 15:40:34
Comment utiliser jquery pour télécharger des fichiers

2018-06-15 15:39:32
Comment utiliser le prototype JS et la chaîne de prototypes

2018-06-15 15:37:14
Démonstration pratique du projet Angular CLI+Angular 5

2018-06-15 15:34:21
Remplacer les éléments de nœud à l'aide de jQuery (code ci-joint)

2018-06-15 15:22:51

Derniers numéros

function_exists() ne peut pas déterminer la fonction personnalisée Function test () {return true;} if (function_exists ('test')) {echo "le test est une ...

Depuis 2024-04-29 11:01:01

2302

Comment afficher la version mobile de Google Chrome Bonjour professeur, comment puis-je changer Google Chrome en version mobile ?

Depuis 2024-04-23 00:22:19

2434

La fenêtre enfant exploite la fenêtre parent, mais la sortie ne répond pas. Les deux premières phrases sont exécutables, mais la dernière ne peut pas être implémentée...

Depuis 2024-04-19 15:37:47

2048

Il n'y a aucune sortie dans la fenêtre parent document.onclick = function(){ window.opener.document.write('Je suis la sortie de la fenêt...

Depuis 2024-04-18 23:52:34

1932

Où sont les didacticiels sur la cartographie mentale CSS ? Didacticiel

Depuis 2024-04-16 10:10:18

2002

Rubriques connexes

Plus>