Travailleurs Web HTML5
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.
Prise en charge du navigateur
Internet Explorer 10, Firefox, Chrome, Safari et Opera prennent tous en charge les Web Workers.
Instance HTML5 Web Workers
L'exemple suivant crée un simple web worker qui compte en arrière-plan :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>计数： <output id="result"></output></p>
<button onclick="startWorker()">开始工作</button>
<button onclick="stopWorker()">停止工作</button>
<p><strong>注意：</strong> Internet Explorer 9 及更早 IE 版本浏览器不支持 Web Workers.</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 = "抱歉，你的浏览器不支持 Web Workers...";
}
}
function stopWorker()
{
w.terminate();
w = undefined;
}
</script>
</body>
</html>Exécutez le programme pour l'essayer
Code du fichier demo_workers.js :
var i=0;
function timedCount()
{
i=i+1;
postMessage(i);
setTimeout(" timedCount ()",500);
}
timedCount();
Détecter si le navigateur prend en charge Web Worker
Avant de créer un web worker, vérifiez si le navigateur de l'utilisateur le prend en charge :
if(typeof(Worker)!= = "undefined")
{
// Support des travailleurs Web !
// Code associé....
}
else
{
// Désolé Pas de support Web ! Travailleur..
}
Créer un fichier de travailleur Web
Maintenant, créons notre site Web travailleur 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.
Ajouter 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 le Web Worker
Lorsque nous créons le objet de travail Web, il continue d'é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 complet de Web Worker
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>php中文网(php.cn)</title>
</head>
<body>
<p>计数： <output id="result"></output></p>
<button onclick="startWorker()">开始工作</button>
<button onclick="stopWorker()">停止工作</button>
<p><strong>注意：</strong> Internet Explorer 9 及更早 IE 版本浏览器不支持 Web Workers.</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 = "抱歉，你的浏览器不支持 Web Workers...";
}
}
function stopWorker()
{
w.terminate();
w = undefined;
}
</script>
</body>
</html>Web Workers et DOM
Puisque les web Workers se trouvent dans des fichiers externes , ils ne sont pas accessibles L'objet JavaScript suivant :
objet fenêtre
objet document
objet parent
