HTML5-Webarbeiter-H5-Tutorial-php.cn

HTML5-Webarbeiter

高洛峰

Freigeben： 2017-02-06 14:05:16

Original

1487 Leute haben es durchsucht

Was ist ein Web Worker?

Beim Web Worker handelt es sich um JavaScript, das im Hintergrund ausgeführt wird und die Leistung der Seite nicht beeinträchtigt.

Beim Ausführen eines Skripts in einer HTML-Seite ist der Status der Seite nicht reaktionsfähig, bis das Skript abgeschlossen ist.

Beim Web-Worker handelt es sich um JavaScript, das im Hintergrund unabhängig von anderen Skripten ausgeführt wird und die Leistung der Seite nicht beeinträchtigt. Sie können weiterhin tun, was Sie wollen: Klicken, Auswählen usw., während der Web-Worker im Hintergrund ausgeführt wird.

HTML5 Web Workers-Instanz

Das folgende Beispiel erstellt einen einfachen Web Worker, der im Hintergrund zählt:

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

Nach dem Login kopieren

Erkennt, ob der Browser Web Worker unterstützt

Bevor Sie den Web-Worker erstellen, prüfen Sie, ob der Browser des Benutzers ihn unterstützt:

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

Nach dem Login kopieren

Erstellen Sie die Web-Worker-Datei

Jetzt erstellen wir unsere Datei in einem externen JavaScript-Web-Worker.

Hier erstellen wir das Zählskript. Das Skript ist in der Datei „demo_workers.js“ gespeichert:

var i=0;

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

timedCount();

Nach dem Login kopieren

Der wichtige Teil des obigen Codes ist die postMessage()-Methode – sie wird verwendet, um eine Nachricht zurück an die HTML-Seite zu senden.

Hinweis: Web Worker werden normalerweise nicht für solche einfachen Skripte verwendet, sondern für rechenintensivere Aufgaben.

Web-Worker-Objekt erstellen

Wir haben bereits die Web-Worker-Datei, jetzt müssen wir sie von der HTML-Seite aus aufrufen.

Der folgende Code erkennt, ob der Worker existiert. Wenn nicht, erstellt er ein neues Web-Worker-Objekt und führt dann den Code in „demo_workers.js“ aus:

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;
};

Nach dem Login kopieren

Terminate Web Worker

Wenn wir ein Web-Worker-Objekt erstellen, wartet es weiterhin auf Nachrichten (auch nach Abschluss des externen Skripts), bis es beendet wird.

Um den Web Worker zu beenden und Browser-/Computerressourcen freizugeben, verwenden Sie bitte die Methode „terminate()“:

w.terminate();

Vollständiger Web Worker-Instanzcode

Wir haben den Worker-Code in der .js-Datei gesehen. Das Folgende ist der Code der HTML-Seite:

Instanz

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

Nach dem Login kopieren

Web Worker und DOM Da sich die Web Worker in externen Dateien befinden, können sie nicht auf die folgenden JavaScript-Objekte zugreifen:

    window 对象
    document 对象
    parent 对象

Nach dem Login kopieren

Weitere Artikel zu HTML5 Web Workers finden Sie auf der chinesischen PHP-Website!