Apprenez à exécuter du code JavaScript en arrière-plan à l'aide de Web Workers
- introduction
- Prise en charge du navigateur pour les Web Workers
- Créer un Web Worker
- Communication avec un Web Worker
- Cycle de vie du Web Worker
- Chargement de bibliothèques dans un Web Worker
- API disponibles dans Web Workers
introduction
JavaScript est à thread unique. Rien ne peut fonctionner en parallèle en même temps.
C'est génial car nous n'avons pas à nous soucier de tout un ensemble de problèmes qui se produiraient avec la programmation simultanée.
Avec cette limitation, le code JavaScript est obligé d'être efficace dès le départ, sinon l'utilisateur aurait une mauvaise expérience. Les opérations coûteuses doivent être asynchrones pour éviter de bloquer le thread.
Au fur et à mesure que les besoins des applications JavaScript augmentaient, cela a commencé à devenir un problème dans certains scénarios.
Les Web Workers introduisent la possibilité d'une exécution parallèle à l'intérieur du navigateur.
Ils ont quelques limitations:
- pas d'accès auDOM: l'objet Window et l'objet Document
- ils peuvent communiquer avec le programme JavaScript principal en utilisant la messagerie
- ils doivent être chargés de la même origine (domaine, port et protocole)
- ils ne fonctionnent pas si vous diffusez la page en utilisant le protocole de fichier (
file://
)
La portée globale d'un Web Worker, au lieu de Window qui se trouve dans le thread principal, est unWorkerGlobalScope
objet.
Prise en charge du navigateur pour les Web Workers
Assez bien!
Vous pouvez vérifier la prise en charge des Web Workers en utilisant
if (typeof Worker !== 'undefined') {
}
Créer un Web Worker
Vous créez un Web Worker en initialisant un objet Worker, en chargeant un fichier JavaScript de la même origine:
const worker = new Worker('worker.js')
Communication avec un Web Worker
Il existe deux manières principales de communiquer avec un Web Worker:
- l'API postMessage offerte par l'objet Web Worker
- leAPI de messagerie de canal
Utilisation de postMessage dans l'objet Web Worker
Vous pouvez envoyer des messages en utilisantpostMessage
sur leWorker
objet.
Important: un message est transféré, non partagé.
main.js
const worker = new Worker('worker.js')
worker.postMessage('hello')
worker.js
onmessage = event => {
console.log(event.data)
}
onerror = event => {
console.error(event.message)
}
Renvoyer des messages
Un travailleur peut renvoyer des messages à la fonction qui l'a créé. en utilisant son globalpostMessage()
fonction:
worker.js
onmessage = event => {
console.log(event.data)
postMessage('hey')
}
onerror = event => {
console.error(event.message)
}
main.js
const worker = new Worker('worker.js')
worker.postMessage('hello')
worker.onmessage = event => {
console.log(event.data)
}
Plusieurs écouteurs d'événements
Si vous souhaitez configurer plusieurs écouteurs pour lemessage
événement, au lieu d'utiliseronmessage
créer un écouteur d'événement (s'applique auerror
événement aussi):
worker.js
addEventListener('message', event => {
console.log(event.data)
postMessage('hey')
}, false)
addEventListener(‘message’, event => {
console.log(I'm curious and I'm listening too
)
}, false)
addEventListener(‘error’, event => {
console.log(event.message)
}, false)
main.js
const worker = new Worker('worker.js')
worker.postMessage('hello')
worker.addEventListener(‘message’, event => {
console.log(event.data)
}, false)
Utilisation de l'API Channel Messaging
Au lieu d'utiliser l'API postMessage intégrée offerte par les Web Workers, nous pouvons choisir d'utiliser le plus polyvalentAPI de messagerie de canalpour leur communiquer.
main.js
const worker = new Worker('worker.js')
const messageChannel = new MessageChannel()
messageChannel.port1.addEventListener('message', event => {
console.log(event.data)
})
worker.postMessage(data, [messageChannel.port2])
worker.js
addEventListener('message', event => {
console.log(event.data)
})
Un Web Worker peut renvoyer des messages en publiant un message àmessageChannel.port2
, comme ça:
addEventListener('message', event => {
event.ports[0].postMessage(data)
})
Cycle de vie du Web Worker
Les Web Workers sont lancés et s'ils ne restent pas en mode d'écoute pour les messages viaworker.onmessage
ou en ajoutant un écouteur d'événements, ils seront arrêtés dès que leur code sera exécuté jusqu'à la fin.
Un Web Worker peut être arrêté en utilisant sonterminate()
méthode à partir du thread principal, et à l'intérieur du worker lui-même en utilisant la méthode globaleclose()
:
main.js
const worker = new Worker('worker.js')
worker.postMessage('hello')
worker.terminate()
worker.js
worker.onmessage = event => {
console.log(event.data)
close()
}
worker.onerror = event => {
console.error(event.message)
}
Chargement de bibliothèques dans un Web Worker
Les Web Workers peuvent utiliser leimportScripts()
fonction globale définie dans leur portée globale:
importScripts('../utils/file.js', './something.js')
API disponibles dans Web Workers
Comme indiqué précédemment, le DOM n'est pas accessible par un Web Worker, vous ne pouvez donc pas interagir avec lewindow
etdocument
objets. Égalementparent
est indisponible.
Vous pouvez cependant utiliser de nombreuses autres API, notamment:
- leAPI XHR
- leRécupérer l'API
- l'API BroadcastChannel
- leAPI FileReader
- IndexedDB
- leAPI de notifications
- Promesses
- Travailleurs des services
- leAPI de messagerie de canal
- leAPI de cache
- leAPI de la console(
console.log()
et amis) - leMinuteurs JavaScript(
setTimeout
,setInterval
…) - l'API CustomEvents:
addEventListener()
etremoveEventListener()
- l'URL actuelle, à laquelle vous pouvez accéder via le
location
propriété en mode lecture - WebSockets
- WebGL
- Animations SVG
Téléchargez mon gratuitManuel du débutant JavaScript
Plus de didacticiels sur le navigateur:
- Quelques astuces utiles disponibles en HTML5
- Comment j'ai fait fonctionner un site Web basé sur un CMS hors ligne
- Le guide complet des applications Web progressives
- L'API Fetch
- Le guide de l'API Push
- L'API Channel Messaging
- Tutoriel pour les techniciens de service
- Le guide de l'API Cache
- Le guide de l'API de notification
- Plongez dans IndexedDB
- L'API Selectors: querySelector et querySelectorAll
- Chargez efficacement JavaScript avec différé et asynchrone
- Le modèle d'objet de document (DOM)
- L'API Web Storage: stockage local et stockage de session
- Découvrez comment fonctionnent les cookies HTTP
- L'API History
- Le format d'image WebP
- XMLHttpRequest (XHR)
- Un tutoriel SVG approfondi
- Que sont les URL de données
- Feuille de route pour apprendre la plate-forme Web
- CORS, partage de ressources inter-origines
- Travailleurs Web
- Le guide requestAnimationFrame ()
- Quel est le Doctype
- Utilisation de la console DevTools et de l'API de la console
- L'API de synthèse vocale
- Comment attendre l'événement DOM ready en JavaScript brut
- Comment ajouter une classe à un élément DOM
- Comment faire une boucle sur des éléments DOM à partir de querySelectorAll
- Comment supprimer une classe d'un élément DOM
- Comment vérifier si un élément DOM a une classe
- Comment modifier la valeur d'un nœud DOM
- Comment ajouter un événement de clic à une liste d'éléments DOM renvoyés par querySelectorAll
- WebRTC, l'API Web en temps réel
- Comment obtenir la position de défilement d'un élément en JavaScript
- Comment remplacer un élément DOM
- Comment accepter uniquement les images dans un champ de fichier d'entrée
- Pourquoi utiliser une version préliminaire d'un navigateur?
- L'objet Blob
- L'objet fichier
- L'objet FileReader
- L'objet FileList
- ArrayBuffer
- ArrayBufferView
- L'objet URL
- Tableaux typés
- L'objet DataView
- L'API BroadcastChannel
- L'API Streams
- L'objet FormData
- L'objet Navigateur
- Comment utiliser l'API de géolocalisation
- Comment utiliser getUserMedia ()
- Comment utiliser l'API Drag and Drop
- Comment travailler avec le défilement sur les pages Web
- Gestion des formulaires en JavaScript
- Événements de clavier
- Événements de souris
- Événements tactiles
- Comment supprimer tous les enfants d'un élément DOM
- Comment créer un attribut HTML à l'aide de JavaScript vanille
- Comment vérifier si une case est cochée à l'aide de JavaScript?
- Comment copier dans le presse-papiers à l'aide de JavaScript
- Comment désactiver un bouton à l'aide de JavaScript
- Comment rendre une page modifiable dans le navigateur
- Comment obtenir des valeurs de chaîne de requête en JavaScript avec URLSearchParams
- Comment supprimer tous les CSS d'une page à la fois
- Comment utiliser insertAdjacentHTML
- Safari, prévenez avant de quitter
- Comment ajouter une image au DOM en utilisant JavaScript
- Comment réinitialiser un formulaire
- Comment utiliser Google Fonts