API HTML Web Workers
Un web worker est un JavaScript s'exécutant 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 tant que le script n'est pas 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 indiquent la première version du navigateur qui prend entièrement en charge les Web Workers.
| API | |||||
|---|---|---|---|---|---|
| Web Workers | 4.0 | 10.0 | 3.5 | 4.0 | 11.5 |
Exemple de travailleurs Web HTML
L'exemple ci-dessous crée un web worker simple qui compte les nombres en arrière-plan :
Exemple
Vérifiez la prise en charge des travailleurs Web
Avant de créer un web worker, vérifiez si le navigateur de l'utilisateur le prend en charge :
if (typeof(Worker) !== "undefined") {
// Yes! Web worker support!
// Some code.....
}
else {
// Sorry! No Web Worker support..
}
Créer un fichier Web Worker
Maintenant, créons notre web worker 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 postMessage()méthode - qui est utilisée pour poster 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 de travail Web, nous devons l'appeler à partir d'une page HTML.
Les lignes suivantes vérifient si le travailleur existe déjà, sinon - il crée un nouvel objet Web Worker et exécute 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 travailleur Web.
Ajoutez un écouteur d'événement "onmessage" au travailleur Web.
w.onmessage = function(event){
document.getElementById("result").innerHTML = event.data;
};
Lorsque le Web Worker publie un message, le code contenu dans l'écouteur d'événement est exécuté. Les données du web worker sont stockées dans event.data.
Résilier un Web Worker
Lorsqu'un objet de travail Web est créé, il continuera à écouter les messages (même après la fin du script externe) jusqu'à ce qu'il soit terminé.
Pour résilier un travailleur Web et libérer des ressources de navigateur/ordinateur, utilisez la
terminate()méthode :
w.terminate();
Réutiliser le Web Worker
Si vous définissez la variable de travail sur undefined, une fois qu'elle a été terminée, vous pouvez réutiliser le code :
w = undefined;
Exemple de code de travail 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>
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 documentaire
- L'objet parent