Un web worker est un JavaScript en cours d' exécution en arrière - plan, sans affecter les performances de la page.
Qu'est - ce qu'un Web Worker ?
Lors de l'exécution des scripts dans une page HTML, la page ne répond plus jusqu'à ce que le script est terminé.
Un travailleur Web, tel que défini par le World Wide Web Consortium (W3C) et le Web Hypertext application de la technologie du groupe de travail (WHATWG), est un script JavaScript exécuté à partir d'une page HTML qui fonctionne en arrière-plan, indépendamment des autres scripts d'interface utilisateur peuvent également avoir été exécutée à partir de la même page HTML. Web workers sont souvent en mesure d'utiliser plus efficacement les processeurs multi-core.
vue d'ensemble
Comme prévu par WHATWG, les travailleurs du Web sont relativement lourds poids. Ils devraient être de longue durée, ont un coût élevé de performance de démarrage, et un coût de la mémoire haute par instance.
les travailleurs Web ne sont pas destinés ou devraient être utilisés en grand nombre car ils pourraient monopoliser les ressources du système.
Les travailleurs Web permettent l'exécution simultanée des fils de navigateur et un ou plusieurs threads en cours d'exécution JavaScript en arrière-plan. Le navigateur qui suit un seul thread d'exécution devra attendre sur les programmes JavaScript pour terminer l'exécution avant de poursuivre et cela peut prendre beaucoup de temps que le programmeur peut vous cacher de l'utilisateur.
Il permet au navigateur de continuer avec le fonctionnement normal lors de l'exécution du script en arrière-plan. Le cahier des charges de travail web est une spécification distincte de la spécification HTML5 et peut être utilisé avec HTML5.
Il existe deux types de travailleurs web: travailleurs dédiés et partagés.
Lorsque les travailleurs web tournent en arrière-plan, ils n'ont pas directement accès au DOM, mais communiquent avec le document en passant des messages. Cela permet l'exécution multi-thread des programmes JavaScript.
Support du navigateur
Les chiffres du tableau indiquent la première version du navigateur qui supporte entièrement Web Workers .
| API | |||||
|---|---|---|---|---|---|
| Web Workers | 4.0 | 10.0 | 3.5 | 4.0 | 11.5 |
HTML Web Workers Exemple
L'exemple ci - dessous crée simple web worker qui comptent un nombre en arrière - plan:
Vérifiez Web Worker de soutien
Avant de créer un web worker , vérifier si le navigateur de l'utilisateur prend en charge:
if(typeof(Worker) !== "undefined") {
// Yes! Web worker support!
// Some code.....
} else {
// Sorry! No Web Worker support..
}
Créer un Web Worker Fichier
Maintenant, nous allons créer notre web worker dans un JavaScript externe.
Ici, nous créons un script qui compte. Le script est stocké dans le "/html/demo_workers.js" fichier:
var i = 0;
function timedCount() {
i = i + 1;
postMessage(i) ;
setTimeout("timedCount() ",500);
}
timedCount() ;
La partie importante du code ci - dessus est le postMessage() méthode - qui est utilisé pour poster un message à la page HTML.
Note: Normalement , les web workers ne sont pas utilisés pour ces scripts simples, mais pour des tâches plus intensives CPU.
Créer un Web Worker objet
Maintenant que nous avons le web worker fichier, nous avons besoin de l' appeler à partir d' une page HTML.
Les lignes suivantes vérifie si le web worker existe déjà, sinon - il crée un nouveau web worker objet et exécute le code dans "/html/demo_workers.js" :
if(typeof(w) == "undefined") {
w = new Worker("/html/demo_workers.js");
}
Ensuite , nous pouvons envoyer et recevoir des messages du web worker .
Ajouter un "onmessage" écouteur d'événement au web worker .
w.onmessage = function(event){
document.getElementById("result").innerHTML = event.data;
};
Lorsque le web worker affiche un message, le code dans l'écouteur d'événement est exécuté. Les données du web worker est stocké dans event.data.
Mettre fin à un Web Worker
Lorsqu'un web worker objet est créé, il continuera d'écouter les messages (even after the external script is finished) jusqu'à ce qu'il soit mis fin.
Pour mettre fin à un web worker et navigateur libre / ressources informatiques, utilisez la terminate() méthode:
w.terminate();
Réutiliser le Web Worker
Si vous définissez le web worker variable non définie, après qu'il a été mis fin, vous pouvez réutiliser le code:
w = undefined;
Complète Web Worker Exemple de code
Nous avons déjà vu le Web Worker code dans le .js fichier. 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>
<br><br>
<script>
var w;
function startWorker() {
if(typeof(Worker) !== "undefined") {
if(typeof(w) == "undefined") {
w = new Worker("/html/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> Essayez vous - même » Les Web Workers sur le Web Workers et les DOM
Étant donné que les web workers sont dans des fichiers externes, ils n'ont pas accès aux objets JavaScript suivants:
- L'objet de la fenêtre
- L'objet document
- L'objet parent