HTML5 Web Workers
Les Web Workers sont des JavaScript exécutés en arrière-plan et n'affecteront pas les performances de la page.
Qu'est-ce qu'un Web Worker ?
Lors de l'exécution d'un script dans une page HTML, l'état de la page ne répond pas jusqu'à ce que le script soit terminé.
Web Worker est un JavaScript exécuté en arrière-plan, indépendant des autres scripts et n'affectera pas les performances de la page. Vous pouvez continuer à faire ce que vous voulez : cliquer, sélectionner, etc. pendant que le Web Worker s'exécute en arrière-plan.
Détecter si le navigateur prend en charge Web Worker
Avant de créer un Web Worker, veuillez vérifier 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éation du fichier Web Worker
Maintenant, créons notre Web Worker dans un JavaScript externe.
Ici, nous créons le script de comptage. 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() - elle est utilisée pour renvoyer un message à la page HTML.
Remarque : les Web Workers ne sont généralement pas utilisés pour des scripts aussi simples, mais pour des tâches plus gourmandes en CPU.
Créer un objet Web Worker
Nous avons déjà le fichier Web Worker, nous devons maintenant l'appeler depuis la page HTML. /p>
Le code suivant détecte si le travailleur existe, sinon - il crée un nouvel objet Web Worker puis exécute le code dans "demo_workers.js": /p>
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 ;
};
<pLorsque web="" worker="" délivre un message, le code dans l'écouteur d'événement sera exécuté. event.data="" contient les données de ="" event.data="".
Terminer Web Worker
Lorsque nous créons un objet Web Worker, il continuera à écouter les messages (même une fois le script externe terminé) jusqu'à ce qu'il soit terminé.
Pour mettre fin au Web Worker et libérer les ressources du navigateur/ordinateur, veuillez utiliser la méthode terminate() :
w.terminate();
Exemple de code Web Worker complet
Nous avons vu le code Worker dans le fichier .js. Voici le code de la page HTML :
Exemple
<!DOCTYPE html>
<html>
<body>
<p>计数: <output id="result"></output></p>
<button onclick="startWorker()">开始计数</button>
<button onclick="stopWorker()">停止计数</button>
<br><br>
<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, your browser does not support Web Workers...";
}
}
function stopWorker()
{
w.terminate();
}
</script>
</body>
</html>