Travailleurs Web HTML5-Tutoriel H5-php.cn

Travailleurs Web HTML5

高洛峰

Libérer： 2017-02-06 14:05:16

original

1498 Les gens l'ont consulté

Qu'est-ce qu'un Web Worker ?

Web Worker exécute JavaScript en arrière-plan et n'affectera pas les performances de la page.

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.

Instance HTML5 Web Workers

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

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</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>

demo_workers.js 文件代码：

var i=0;

function timedCount()
{
    i=i+1;
    postMessage(i);
    setTimeout("timedCount()",500);
}

timedCount();

Copier après la connexion

Détecte si le navigateur prend en charge les Web Workers

Avant de créer le Web Worker, vérifiez si le navigateur de l'utilisateur le prend en charge :

if(typeof(Worker)!=="undefined")
{
    // 是的! Web worker 支持!
    // 一些代码.....
}
else
{
    //抱歉! Web Worker 不支持 
}

Copier après la connexion

Créez le fichier Web Worker

Maintenant, créons le nôtre dans un Web Worker 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();

Copier après la connexion

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.

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" :

if(typeof(w)=="undefined")
{
    w=new Worker("demo_workers.js");
}
然后我们就可以从 web worker 发生和接收消息了。
向 web worker 添加一个 "onmessage" 事件监听器：
w.onmessage=function(event){
    document.getElementById("result").innerHTML=event.data;
};

Copier après la connexion

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();

Complete Code de l'instance Web Worker

Nous avons vu le code Worker dans le fichier .js. Voici le code de la page HTML :

Instance

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>菜鸟教程(runoob.com)</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>

Copier après la connexion

Web Workers et DOM Les web Workers se trouvant dans des fichiers externes, ils ne peuvent pas accéder aux objets JavaScript suivants :

    window 对象
    document 对象
    parent 对象

Copier après la connexion

Pour plus d'articles liés aux HTML5 Web Workers, veuillez faire attention au site Web PHP chinois !