HTML API des travailleurs Web
Un web worker est un JavaScript exécuté en arrière-plan, sans affecter les performances de la page.
Qu'est-ce qu'un Web Worker ?
Lors de l'exécution de scripts dans une page HTML, la page ne répond plus jusqu'à ce que le script soit terminé.
Un web worker est un JavaScript qui s'exécute en arrière-plan, indépendamment des autres scripts, sans affecter les performances de la page. Vous pouvez continuer à faire ce que vous voulez : cliquer, sélectionner des éléments, etc., pendant que le Web Worker s'exécute en arrière-plan.
Prise en charge du navigateur
Les nombres dans le tableau spécifient la première version du navigateur prenant entièrement en charge les Web Workers.
| API | |||||
|---|---|---|---|---|---|
| Web Workers | 4.0 | 10.0 | 3.5 | 4.0 | 11.5 |
HTML Exemple de Web Workers
L'exemple ci-dessous crée un simple travailleur Web qui compte les nombres en arrière-plan :
Vérifiez l'assistance Web Worker
Avant de créer un web worker, vérifiez si le navigateur de l'utilisateur le prend en charge :
if (typeof(Worker) !== "undefined") {
// Oui ! Assistance aux travailleurs Web !
// Du code.....
} else {
// Désolé! Pas de prise en charge de Web Worker..
}
Créer un fichier Web Worker
Maintenant, créons notre travailleur Web dans un JavaScript externe.
Ici, nous créons un script qui compte. Le script est stocké dans le fichier « demo_workers.js » :
var i = 0;
function timedCount() {
i = i + 1;
postMessage(i);
setTimeout("timedCount()",500);
}
timedCount();
La partie importante du code ci-dessus est la méthode postMessage() - qui est utilisée pour renvoyer un message sur la page HTML.
Remarque : Normalement, les Web Workers ne sont pas utilisés pour des scripts aussi simples, mais pour des tâches plus gourmandes en CPU.
Créer un objet Web Worker
Maintenant que nous avons le fichier Web Worker, nous devons l'appeler depuis une page HTML.
Les lignes suivantes vérifient si le travailleur existe déjà, sinon - elles créent un nouvel objet Web Worker et exécutent le code dans "demo_workers.js":
if (typeof(w) == "undefined") {
w = new Worker("demo_workers.js");
}
Ensuite, nous pouvons envoyer et recevoir des messages du web worker.
Ajoutez un écouteur d'événement "onmessage" au Web Worker.
w.onmessage = function(event){
document.getElementById("result").innerHTML = event.data;
};
Lorsque le travailleur Web publie un message, le code dans l'écouteur d'événements est exécuté. Les données du Web Worker sont stockées dans event.data.
Mettre fin à un Web Worker
Lorsqu'un objet Web Worker est créé, il continuera à écouter les messages (même une fois le script externe terminé) jusqu'à ce qu'il soit terminé.
Pour mettre fin à un travailleur Web et libérer des ressources de navigateur/ordinateur, utilisez la méthode terminate() :
w.terminate();
Réutiliser le Web Worker
Si vous définissez la variable de travail sur non définie, une fois celle-ci terminée, vous pouvez réutiliser le code :
w = undefined;
Exemple de code de travailleur Web complet
Nous avons déjà vu le code Worker dans le fichier .js. Ci-dessous le code de la page HTML :
Exemple
<!DOCTYPE html>
<html>
<body>
<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker()">Stop Worker</button>
<script>
var w;
function startWorker() {
if (typeof(Worker) !== "undefined") {
if (typeof(w) == "undefined") {
w = new Worker("demo_workers.js");
}
w.onmessage = function(event) {
document.getElementById("result").innerHTML = event.data;
};
} else {
document.getElementById("result").innerHTML = "Sorry! No Web Worker support.";
}
}
function stopWorker() {
w.terminate();
w = undefined;
}
</script>
</body>
</html>
Try it Yourself »
Les Web Workers et le DOM
Étant donné que les Web Workers se trouvent dans des fichiers externes, ils n'ont pas accès aux objets JavaScript suivants :
- L'objet fenêtre
- L'objet document
- L'objet parent
