Travailleurs Web HTML5

Web Worker exécute JavaScript en arrière-plan et n'affectera 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.

Prise en charge des navigateurs

Internet Explorer 10, Firefox, Chrome, Safari et Opera prennent tous en charge les travailleurs Web.

Instance HTML5 Web Workers

L'exemple suivant crée un simple web worker qui compte en arrière-plan :

Instance

<!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écuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

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, veuillez vérifier si le navigateur de l'utilisateur le prend en charge :

if(typeof(Worker)!=="undefined")
{
// Prise en charge des travailleurs Web !
/ / Un peu de code.....
}
autre
{
// Désolé ! Pas de support pour Web Worker..
}

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 Le 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="".