Comment implémenter Web Worker dans le multi-threading H5

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..  
}

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);
}

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 3f1c4e4b6b16bbbd69b2ee476dc4f83a

pour charger des fichiers JS externes, et le

Attention chez les Web Workers !

Lors de l'instanciation de Worker, vous devez transmettre l'URL d'un script, et cette URL doit être dans ce domaine, sinon une erreur inter-domaine sera signalée ! var work = new Worker('

https://

localhost/worker.js'); Mais vous pouvez introduire des scripts dans n'importe quel domaine via la méthode importScripts dans worker.js, tout comme HTML Identique à la balise 3f1c4e4b6b16bbbd69b2ee476dc4f83a Voici les méthodes d'utilisation légale :

importScripts(); /* imports nothing */ importScripts(‘foo.js’); /* imports just “foo.js” */ importScripts(‘foo.js’, ‘bar.js’); /* imports two scripts */ importScripts(‘//example.com/hello.js’); /* You can import scripts from other origins */
可以利用这里的importScripts方法解决资源预加载的问题（浏览器预先加载资源，而不会对资源进行解析和执行），道理也很简单。
Scripts may be downloaded in any order, but will be executed in the order in which you pass the filenames into importScripts() . This is done synchronously; importScripts() does not return until all the scripts have been loaded and executed.
</script>

Je pense que vous maîtrisez la méthode après avoir lu ces cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur. le site PHP chinois !

Lecture connexe :

Étapes de mise en œuvre de la programmation DOM en html5

Utiliser h5 pour effectuer le processus de paiement WeChat Étapes de mise en œuvre

Utilisez H5 pour créer une liste déroulante avec des effets spéciaux

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!