Maison > Article > interface Web > Tout ce que vous devez savoir sur les web Workers pour commencer.
Récemment, j'ai bricolé des Web Workers et ceci est un guide complet sur tout ce que vous devez savoir pour commencer à utiliser les Web Workers.
Si vous souhaitez ignorer la lecture du blog et extraire le code à la place, voici le référentiel github qui contient tous les extraits.
Référentiel Github Web Worker
Donc, ce qui m'a poussé à explorer les Web Workers, c'est que sur une plate-forme sur laquelle je construisais, une tâche lourde en termes de calcul bloquait l'interface utilisateur.
Alors je me suis dit : « Hein, d'accord, comment faire pour que cela ne bloque pas l'interface utilisateur » ? Dois-je utiliser setTimeout pour m'assurer que tout le code du thread principal est terminé, après quoi la tâche lourde en termes de calcul peut s'exécuter ?
Voici donc l'idée fausse : utiliser setTimeout ne signifie pas que l'interface utilisateur ne sera pas bloquée. Oui, tout ce qui se trouve sur le thread principal sera exécuté avant l'exécution du rappel setTimeout. Cependant, ce rappel s'exécute dans le thread principal lui-même lorsqu'il est retiré de la file d'attente des tâches de macro, rendant ainsi l'interface utilisateur insensible.
Pour en savoir plus sur le fonctionnement de setTimeout, voici quelques références —
JavaScript est intrinsèquement un « langage à thread unique », mais les Web Workers nous permettent d'exécuter du code lourd en termes de calcul dans un thread séparé.
Avant de commencer, voici quelques points à noter -
const worker = new Worker("./worker.js")
Remarque : worker.js n'est pas un module et ne peut pas utiliser d'instructions d'importation. encore. :')
Pour utiliser worker.js comme module, spécifiez type: module dans l'option du constructeur.
const worker = new Worker("./worker.js")
const worker = new Worker('./worker.js', { type: 'module' })
Rassembler tout cela
Voyons maintenant à quoi ressemble notre code après l'intégration des web Workers.
Code du fil principal :
worker.terminate()
Code du fil de travail :
// ... function workerFunction() { // Don't spin up a new worker instance if the process has already been started. if (statusElement.textContent !== PROCESS_STATUS.PROCESSING && window.Worker) { const worker = new Worker('./worker.js', { type: 'module' }) // Sending 10000000000000 to the web worker worker.postMessage(10000000000000) statusElement.textContent = PROCESS_STATUS.PROCESSING // This piece of code is executed after worker finishes its task and returns data. worker.onmessage = function (event) { statusElement.textContent = event.data } } } // ...
Et le résultat :
Lorsque nous exécutons l'application, vous remarquerez que la tâche lourde en termes de calcul est exécutée sans bloquer l'interface utilisateur.
Comlink est une petite bibliothèque (1,1 ko), elle supprime la barrière mentale liée à la réflexion sur la logique post-message.
À un niveau plus abstrait, il s'agit d'une implémentation RPC pour postMessage et ES6 Proxies.
Une raison spécifique pour laquelle j'ai utilisé Comlink était que je n'étais pas en mesure de transmettre des fonctions du thread principal au travailleur en utilisant du JavaScript simple. En utilisant le proxy de Comlink, j'ai pu facilement transmettre une fonction de rappel du thread principal au travailleur. [Référez-vous à cette rubrique]
Pour commencer à utiliser comlink dans votre projet, installez la bibliothèque
const worker = new Worker("./worker.js")
Pour commencer avec cette bibliothèque, nous devons connaître ces méthodes suivantes -
Comlink.wrap(point de terminaison)
const worker = new Worker('./worker.js', { type: 'module' })
Comlink.expose(valeur, point final ?, autoriséOrigins ?)
worker.terminate()
Lectures complémentaires
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!