English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Les web workers sont des JavaScript exécutés en arrière-plan, qui n'affectent pas les performances de la page.
Lorsque le script est exécuté dans une page HTML, l'état de la page est non réactif jusqu'à ce que le script soit terminé.
Les web workers sont des JavaScript exécutés en arrière-plan, indépendants des autres scripts, qui n'affectent pas les performances de la page. Vous pouvez continuer à faire ce que vous voulez: cliquer, sélectionner du contenu, etc., tandis que le web worker s'exécute en arrière-plan.
Internet Explorer 10, Firefox, Chrome, Safari et Opera prennent en charge les Web workers.
Le exemple suivant crée un web worker simple qui compte en arrière-plan:
demo-Code du fichier "workers.js":
var i=0;
function timerCount()
{
i=i+1;
postMessage(i);
setTimeout("timerCount()",500);
}
timerCount();
Avant de créer un web worker, veuillez vérifier si le navigateur de l'utilisateur le prend en charge:
if(typeof(Worker)!=="undefined")
{
// Oui! Le Web worker est pris en charge!
// quelques codes.....
}
else
{
//Désolé! Le Web Worker n'est pas pris en charge
}
Maintenant, créons notre web worker dans un JavaScript externe.
Ici, nous avons créé un script de comptage. Ce script est stocké dans "demo-dans le fichier "workers.js":
var i=0;
function timerCount()
{
i=i+1;
postMessage(i);
setTimeout("timerCount()",500);
}
timerCount();
La partie importante du code ci-dessus est la méthode postMessage() - Il est utilisé pour renvoyer un segment de message à la page HTML.
Attention: Les web workers ne sont généralement pas utilisés pour des scripts aussi simples, mais pour des tâches plus gourmandes en ressources CPU.
Nous avons déjà le fichier web worker, maintenant nous devons l'appeler depuis la page HTML.
Le code suivant détecte l'existence du worker, s'il n'existe pas,- Il crée un nouvel objet web worker, puis exécute "demo-workers.js" dans le code :
if(typeof(w) == "undefined")
{
w = new Worker("demo-workers.js");
}
Ensuite, nous pouvons envoyer et recevoir des messages depuis le worker web.
Ajouter un "onmessage" listener à web worker :
w.onmessage = function(event){
document.getElementById("result").innerHTML = event.data;
};
Lorsque le worker web transmet un message, il exécute le code dans le listener d'événement. event.data contient les données de event.data.
Lorsque nous créons un objet worker web, il continue d'écouter les messages (même après que le script externe soit terminé) jusqu'à ce qu'il soit arrêté.
Pour terminer un worker web et libérer le navigateur/Pour utiliser les ressources informatiques, utilisez la méthode terminate() :
w.terminate();
Nous avons vu le code Worker dans le fichier .js. Voici le code de la page HTML :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Base Tutorial Website(oldtoolbag.com)</title>
</head>
<body>
<p>Compte : <output id="result"></output></p>
<button onclick="startWorker()">Commencer le travail</button>
<button onclick="stopWorker()">Arrêter le travail</button>
<p><strong>Attention : </<strong>Internet Explorer 9 et les versions plus anciennes des navigateurs IE ne prennent pas en charge les Workers Web.</p>
<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 = "Désolé, votre navigateur ne prend pas en charge les Web Workers...";
}
}
function stopWorker()
{
w.terminate();
w = undefined;
}
</script>
</body>
</html>Voyons si ça marche ‹/›Étant donné que les workers Web se trouvent dans des fichiers externes, ils ne peuvent pas accéder aux objets JavaScript suivants :
Objet window
Objet document
Objet parent