HTML5 Grund教程

HTML5 API

HTML5 Medien

HTML5 Grafik

HTML5 Server-seitig ausgelöste Ereignisse HTML5 Anwendungscache

HTML5 Web Workers

Web Worker sind im Hintergrund laufendes JavaScript, das die Leistung der Seite nicht beeinträchtigt.

Was ist ein Web Worker?

Wenn ein Skript auf der HTML-Seite ausgeführt wird, ist der Status der Seite nicht antwortbar, bis das Skript abgeschlossen ist.

Web Worker sind im Hintergrund laufendes JavaScript, das unabhängig von anderen Skripten ist und die Leistung der Seite nicht beeinträchtigt. Sie können weiterhin alles tun, was Sie möchten: Klicken, Inhalt auswählen usw., während der Web Worker im Hintergrund läuft.

Browser-Unterstützung

Internet Explorer 10, Firefox, Chrome, Safari und Opera unterstützen Web Workers.

HTML5 Web Workers-Beispiel

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

Online-Beispiel

Zähler:

demo-Code der "workers.js"-Datei:

var i=0;
function timerCount()
{
i=i+1;
postMessage(i);
setTimeout("timerCount()",500);
}
timerCount();

Überprüfen Sie, ob der Browser Web Worker unterstützt

Überprüfen Sie vor der Erstellung eines Web Workers, ob der Browser des Benutzers es unterstützt:

if(typeof(Worker)!=="undefined")
{
　　　　// Ja! Web Worker werden unterstützt!
　　　　// einige Code.....
}
else
{
　　　　//Entschuldigung! Web Worker werden nicht unterstützt
}

Erstellen Sie eine Web Worker-Datei

Lassen Sie uns jetzt einen Web Worker in einem externen JavaScript erstellen.

Hier erstellen wir das Zählskript. Das Skript wird im "demo" gespeichert-im "workers.js"-Datei:

var i=0;
function timerCount()
{
　　　　i=i+1;
　　　　postMessage(i);
　　　　setTimeout("timerCount()",500);
}
timerCount();

Ein wichtiger Teil des folgenden Codes ist die Methode postMessage() - Es wird verwendet, um eine Nachricht an die HTML-Seite zurückzuschicken.

Achtung: Web Worker werden normalerweise nicht für so einfache Skripte verwendet, sondern für Aufgaben, die mehr CPU-Leistung erfordern.

Erstellen Sie ein Web Worker-Objekt

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

Das folgende Code überprüft, ob der Worker existiert, falls nicht,- Es erstellt ein neues Web Worker-Objekt und führt "demo" aus.-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;
};

当 web worker 传递消息时，会执行事件监听器中的代码。event.data 中存有来自 event.data 的数据。

终止 Web Worker

当我们创建 web worker 对象后，它会继续监听消息（即使在外部脚本完成之后）直到其被终止为止。

如需终止 web worker，并释放浏览器/计算机资源，请使用 terminate() 方法：

w.terminate();

完整的 Web Worker 示例代码

我们已经看到了 .js 文件中的 Worker 代码。下面是 HTML 页面的代码：

示例

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>基础教程网(oldtoolbag.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") {
　　　　　　　　　　　　-workers.js');
　　　　　　　　}
　　　　　　　　w.onmessage = function(event) {
　　　　　　　　　　　　document.getElementById("result").innerHTML　=　event.data;
　　　　　　　　};
　　　　}　else　{
　　　　　　　　document.getElementById("result").innerHTML　=　"Entschuldigung, Ihr Browser unterstützt keine Web Workers...";
　　　　}
}
　
function　stopWorker()　
{　
　　　　w.terminate();
　　　　w　=　undefined;
}
</script>
　
</body>
</html>

Testen Sie heraus, ob ‹/›

Web Workers und DOM

Da Web Workers in externen Dateien liegen, können sie die folgenden JavaScript-Objekte nicht aufrufen:

window-Objekt
document-Objekt
parent-Objekt

HTML5 Server-seitig ausgelöste Ereignisse HTML5 Anwendungscache