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

Tutoriels populaires

Plus>

Tutoriels associés

Recommandations populaires

Derniers cours

Derniers téléchargements

Plus>

effets Web

Code source du site Web

Matériel du site Web

Modèle frontal