Explication détaillée du développement multithread et de l'utilisation de H5+WebWorkers

Cette fois je vais vous apporter une explication détaillée de l'utilisation du développement multithread H5+WebWorkers Quelles sont les précautions pour le développement multithread H5+WebWorkers Voici des cas pratiques, prenons ? un regard.

Nous savons tous que le navigateur exécute le code js dans un seul thread Lorsque l'étape de page est exécutée, la page ne peut pas répondre à autre chose jusqu'à la fin de l'étape. Les WebWorkers présentés ici peuvent changer tout cela.

Les WebWorkers sont des codes js exécutés en arrière-plan, indépendants des autres scripts et n'affecteront pas les performances de la page. Nous pouvons continuer à faire ce que nous voulons : cliquer, sélectionner du contenu, etc., pendant que les WebWorkers s'exécutent en arrière-plan.

Les Web Workers sont pris en charge dans tous les principaux navigateurs, à l'exception d'Internet Explorer.

Première étape : générer des travailleurs.

Appelez le constructeur Worker() et spécifiez l'URI d'un script à exécuter dans le thread de travail. Par exemple, la page actuelle spécifie que le script a été exécuté. par le thread de travail est script -worker.js.

var myWorker = new Worker("script-worker.js");

Dans script-worker.js, nous pouvons exécuter du code supplémentaire. L'exécution de ces codes n'affectera pas la page pour faire d'autres choses que vous souhaitez faire, ce qui semble bien.

Étape 2 : Transmettez les données.

La page peut interagir avec le travailleur pour transférer des données, afin que le travailleur puisse calculer silencieusement sans affecter la page pour faire des choses significatives. Ensuite, dites à la page d'utiliser les données.

//[主页面代码]
myWorker.postMessage("data-from-mainpage");
//[worker代码]
onmessage = function (oEvent) {
    console.log("主页面发送过来的数据是："+oEvent.data));    
};

Ce qui précède est la situation de [page principale envoyant des données au script de travail], oui, vous avez vu le postMessage très convivial, d'accord, j'aime ce truc.

 //[主页面代码]
 myWorker.onmessage = function (oEvent) {
     console.log("worker脚本发送过来的数据是："+oEvent.data)); 
 }; 
//[worker代码]
postMessage("data-from-mainpage");

Ce qui précède est la situation de [le script de travail envoie des données à la page principale]. C'est toujours très simple, mais ce ne sont que des API. La clé est qu'une utilisation intelligente est bénéfique.

De plus, il peut y avoir des erreurs dans l'exécution des travailleurs. La page principale peut surveiller les erreurs des travailleurs via :

myWorker.onerror=function(oEvent){};

.

Étape 3 : Points importants.

Le thread de travail peut effectuer des tâches sans interférer avec l'interface utilisateur. Le code JavaScript exécuté est complètement dans une autre portée et est différent du code de la page Web actuelle. . Portée partagée.

La méthode importScripts() est fournie dans la portée globale de Worker, qui reçoit une ou plusieurs URL pointant vers des fichiers JavaScript. Le processus de chargement est effectué de manière asynchrone.

importScripts() ne prendra effet que si vous fournissez un URI absolu, et le processus d'exécution est également asynchrone.

Lorsque nous créons l'objet WebWorkers, il continuera à écouter les messages (même une fois le script externe terminé) jusqu'à ce qu'il soit terminé. Utilisez la méthode myWorker.terminate() pour terminer les WebWorkers et libérer le navigateur. /ressources informatiques .

Étape 4 : Restrictions importantes.

1. Impossible d'accéder au nœud DOM, impossible d'accéder aux variables globales ou à la fonction globale, impossible d'appeler alert() ou de confirmer etc. Fonctions et les variables globales du navigateur telles que window et document ne sont pas accessibles ;

2 Cependant, Javascript dans Web Worker peut toujours utiliser des fonctions telles que setTimeout() et setInterval(). l'objet XMLHttpRequest pour la communication Ajax.

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

Lecture recommandée :

Explication détaillée des étapes de packaging du webpack et de compression de js et css

plug jquery fullpage -in pour ajouter des droits d'auteur en-tête et queue

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!