API des travailleurs Web
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 chiffres du tableau indiquent les premières versions de navigateur qui prennent entièrement en charge les Web Workers :
| Chrome 4 | Internet Explorer 10 | Firefox 3.5 | Safari 4 | Opéra 11.5 |
| janvier 2010 | septembre 2012 | juin 2009 | juin 2009 | juin 2011 |
Exemple de travailleurs Web
L’exemple ci-dessous crée un web worker simple qui compte les nombres en arrière-plan :
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”) {
// Oui! Assistance Web Worker !
// Quelques codes…..
} autre {
// Désolé! Pas de prise en charge de Web Worker..
}
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”:
soit i = 0 ;
fonction timedCount() {
je ++ ;
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.
Note: Normalement, les travailleurs Web 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”:
si (typeof(w) == “non défini”) {
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 = fonction(événement){
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 le
terminate() méthode:
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 :
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
Compter les nombres :