HTML Web Workers
Auparavant, Drag and Drop déplaçait ou étiquetait des charges DOM avec des événements pointeur. Cette leçon quitte les gestes pointeur et présente les Web Workers : JavaScript dans un thread d’arrière-plan pour qu’une longue boucle ne fige pas l’UI. Portée pratique — créer, messager, pas de DOM dans le worker — pas de flottes SharedWorker.
Pourquoi les web workers dans un cours HTML
Les débutants voient une page figée avec une boucle occupée sur le thread principal. Les workers sont la première API courante pour calculer en arrière-plan. Après le DnD, la division diffère : le script de page possède DOM/UI ; le worker possède le calcul lourd et ne parle que par messages.
Réponse directe
1) new Worker("worker.js") ou Blob. 2) postMessage depuis la page. 3) Dans le worker onmessage, calculez, postMessage retour. 4) Mettez à jour le DOM seulement sur la page. 5) Pas d’accès DOM direct. 6) Préférez http(s) ou Blob.
📊 main thread vs worker
| Topic | Main page script | Dedicated worker |
|---|---|---|
| Typical role | UI, DOM, create Worker | Heavy compute off UI thread |
| Talks via | postMessage / onmessage | postMessage / onmessage |
| Can touch DOM? | Yes | No — return data instead |
| Beginner entry | new Worker(url or Blob) | onmessage + compute + postMessage |
| This course depth | Required | Required (simple round-trip) |
| Not this lesson | Drag-and-drop gestures | SharedWorker / Service Worker products |
Minuscule aller-retour Blob Worker
Un HTML construit un worker depuis un Blob sans worker.js séparé. La page envoie un nombre ; le worker renvoie une somme en boucle.
<button id="go" type="button">Run in worker</button>
<pre id="out"></pre>
<script>
const out = document.getElementById("out");
const src =
"onmessage=function(e){" +
"var n=e.data,s=0,i;" +
"for(i=1;i<=n;i++){s+=i;}" +
"postMessage(s);" +
"};";
const blob = new Blob([src], { type: "application/javascript" });
const w = new Worker(URL.createObjectURL(blob));
w.onmessage = function (e) {
out.textContent = "Sum 1..40 = " + e.data;
};
document.getElementById("go").onclick = function () {
out.textContent = "Working…";
w.postMessage(40);
};
</script>
Lire les appels d’aller-retour
- Blob + createObjectURL sans second fichier
- new Worker démarre un script d’arrière-plan
- postMessage envoie le nombre
- Le worker calcule et répond
- La page écrit dans pre — DOM sur le thread principal
- Contrairement au DnD : pas de draggable
- Gardez la démo petite
L’UI reste sur le thread principal
Le worker renvoie des données ; le script de page décide ce que l’utilisateur voit. Cette démo demande une chaîne ; onmessage de la page met à jour le paragraphe.
<button id="ask" type="button">Ask worker</button>
<p id="msg">Waiting…</p>
<script>
const msg = document.getElementById("msg");
const src =
"onmessage=function(e){" +
"postMessage('Worker got: ' + e.data);" +
"};";
const w = new Worker(
URL.createObjectURL(new Blob([src], { type: "application/javascript" }))
);
w.onmessage = function (e) {
msg.textContent = e.data;
};
document.getElementById("ask").onclick = function () {
w.postMessage("hello");
};
</script>
Lire l’idée de propriété de l’UI
- Le worker ne fait qu’écho d’une chaîne — pas de document
- La page assigne textContent
- Même pont de messages
- Pas du DnD
- Pas un cours Service Worker
- Utilisez un worker si le travail risque de figer l’UI
- Ensuite : SSE
Quand utiliser un worker
- Longue boucle CPU : bon fit intro
- Minuscule tweak de chaîne : souvent le thread principal
- Déplacer une carte : c’était DnD
- GPS : c’était Geolocation
- Produits SharedWorker/Service Worker : hors de cette intro
- Mettre à jour des boutons depuis le worker : interdit
Pratique — créer, messager, peindre
- Testez la démo somme.
- Changez 40.
- Testez la démo écho.
- Optionnel : worker.js en http(s).
- Phrase : DnD au pointeur ; workers hors-thread par messages.
- Préférez http(s)/Blob.
- Aperçu : SSE.
Erreurs faciles
- Attendre querySelector dans le worker
- Worker pour une micro-tâche
- Confondre avec DnD
- Chemins file:// fragiles
- Oublier onmessage sur la page
- Prendre Blob comme seul motif prod
- Prendre l’intro pour un cours SharedWorker complet
Résumé
- Les workers exécutent le JS hors du thread UI
- postMessage/onmessage ; DOM seulement sur la page
- Workers classiques sans document/window
- Blob pour démos ; http(s) pour worker.js
- Le DnD était déplacer/étiqueter au pointeur ; cette leçon calcul d’arrière-plan + messages
- Suivant : SSE
🧠 Testez Vos Connaissances
Testez Vos Connaissances
Mettez-vous au défi avec ce quiz interactif et voyez à quel point vous comprenez le sujet
📝 Instructions
- Lisez chaque question attentivement
- Sélectionnez la meilleure réponse pour chaque question
- Vous pouvez refaire le quiz autant de fois que vous le souhaitez
- Votre progression sera affichée en haut