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

Formation continue

nouveau fichier

<!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>

soumettre Réinitialiser le code

Opération automatique

Travailleurs Web HTML5

ÉlémentaireTutoriel de site Web d'imitation d'entreprise Imperial CMS

ÉlémentaireLes débutants sans aucune base dans WordPress créent des blogs personnels et des sites Web d'entreprise

ÉlémentaireVidéo d'instructions sur la création de sites Web à base zéro Ultimate CMS

ÉlémentaireProjet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]

IntermédiaireVue3.0 de 0 pour créer une pratique de projet de système de gestion backend universel

ÉlémentaireCours frontal base zéro [Vue apprentissage avancé et application pratique]

ÉlémentaireTutoriel WEB front-end [HTML5+CSS3+JS]

ÉlémentaireIntroduction rapide à apipost

IntermédiaireTutoriel pratique Vue3+TypeScript au niveau de l'entreprise

ÉlémentaireParlons brièvement de la création d'une entreprise en PHP

IntermédiaireProjet de commerce électronique VUE (combat réel de projet double front-end et back-end)

ÉlémentaireApplication pratique Apipost [api, interface, tests automatisés, mock]