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 répondre à rien d'autre jusqu'à la fin de l'étape. Les WebWorkers présentés ici peuvent tout changer.
Les WebWorkers sont des codes js qui s'exécutent en arrière-plan, indépendamment 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 par tous les principaux navigateurs, à l'exception d'Internet Explorer.
La 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 exécuté par le thread de travail est script-worker.js.
var monWorker = new Worker(script-worker.js);
Dans script-worker.js, nous pouvons exécuter du code supplémentaire, et l'exécution de ce code 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 capacité de la page à faire des choses significatives. Dites ensuite à la page d'utiliser les données.
//[Code de la page principale]myWorker.postMessage(data-from-mainpage);//[code du travailleur]onmessage = function (oEvent) { console.log(Les données envoyées depuis la page principale sont : +oEvent.data)) ; };Ce qui précède est la situation de [la page principale envoie des données au script de travail], oui, vous avez vu le postMessage très convivial, d'accord, j'aime ce truc.
//[Code de la page principale] myWorker.onmessage = function (oEvent) { console.log(Les données envoyées par le script de travail sont : +oEvent.data)} //[Code du travailleur]postMessage(data-from-); page principale );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 du travailleur et la page principale passe :
monTravailleur.onerror=function(oEvent){};Vous pouvez surveiller les erreurs des travailleurs.
É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é se trouve complètement dans une autre portée et ne partage pas la portée avec le code de la page Web actuelle.
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 les ressources du navigateur/ordinateur.
Étape 4 : Limites importantes.1. Impossible d'accéder aux nœuds DOM, aux variables globales ou aux fonctions globales, incapable d'appeler des fonctions telles que alert() ou confirmer, et incapable d'accéder aux variables globales du navigateur telles que window et document ;
2. Cependant, Javascript dans Web Worker peut toujours utiliser des fonctions telles que setTimeout() et setInterval(), et peut également utiliser l'objet XMLHttpRequest pour la communication Ajax.
Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.