HTML5 Tutoriales básicos

HTML5 API

HTML5 Medios

HTML5 Gráficos

HTML5 Eventos enviados por el servidor HTML5 Caché de aplicaciones

HTML5 Web Workers

Los Web Workers son JavaScript ejecutados en segundo plano, que no afectan el rendimiento de la página.

¿Qué es un Web Worker?

Cuando se ejecuta un script en una página HTML, el estado de la página no es reactivo hasta que el script se complete.

Los Web Workers son JavaScript ejecutados en segundo plano, independientes de otros scripts, que no afectan el rendimiento de la página. Puede seguir haciendo lo que quiera: hacer clic, seleccionar contenido, etc., mientras el Web Worker se ejecuta en segundo plano.

Compatibilidad del navegador

Internet Explorer 10, Firefox, Chrome, Safari y Opera todos soportan Web Workers.

HTML5 Web Workers 示例

下面的示例创建了一个简单的 web worker，在后台计数：

在线示例

计数:

demo-workers.js 文件代码：

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

检测浏览器是否支持 Web Worker

在创建 web worker 之前，请检测用户的浏览器是否支持它：

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

创建 web worker 文件

现在，让我们在一个外部 JavaScript 中创建我们的 web worker。

在这里，我们创建了计数脚本。该脚本存储于 "demo-"workers.js" 文件中：

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

以上代码中重要的部分是 postMessage() 方法 - 它用于向 HTML 页面传回一段消息。

注意: web worker 通常不用于如此简单的脚本，而是用于更耗费 CPU 资源的任务。

创建 Web Worker 对象

我们已经有了 web worker 文件，现在我们需要从 HTML 页面调用它。

下面的代码检测是否存在 worker，如果不存在，- 它会创建一个新的 web worker 对象，然后运行 "demo-workers.js" dentro del código:}

if(typeof(w) == "undefined")
{
　　　　w = new Worker("demo-workers.js");
}

Luego podemos recibir mensajes desde el web worker.

Agregar un "onmessage" listener al web worker:

w.onmessage = function(event){
　　　　document.getElementById("result").innerHTML = event.data;
};

Cuando el web worker transmite un mensaje, se ejecuta el código en el listener de eventos. event.data contiene los datos de event.data.

Detener Web Worker

Después de crear el objeto web worker, seguirá escuchando mensajes (incluso después de que el script externo se complete) hasta que se detenga.

Para finalizar el web worker y liberar el navegador/Para recursos de computadora, utilice el método terminate():

w.terminate();

Código de ejemplo completo de Web Worker

Hemos visto el código de Worker en el archivo .js. A continuación, se muestra el código de la página HTML:

Ejemplo

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>Base Tutorial Network(oldtoolbag.com)</title>　
</head>
<body>
　
<p>Cuenta: <output id="result"></output></p>
<button onclick="startWorker()">Iniciar trabajo</button>　
<button onclick="stopWorker()">Detener trabajo</button>
　
<p><strong>Nota:</<strong>Internet Explorer　9　y las versiones anteriores de Internet Explorer no admiten 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　=　"Lo sentimos, tu navegador no admite Web Workers...";
　　　　}
}
　
function　stopWorker()　
{　
　　　　w.terminate();
　　　　w　=　undefined;
}
</script>
　
</body>
</html>

Prueba y mira ‹/›

Web Workers y DOM

Dado que los web workers se encuentran en archivos externos, no pueden acceder a los siguientes objetos JavaScript:

Objeto window
Objeto document
Objeto parent

HTML5 Eventos enviados por el servidor HTML5 Caché de aplicaciones