HTML Web Workers

Web worker 是运行在后台的 JavaScript，不会影响页面的性能。

什么是 Web Worker？

当在 HTML 页面中执行脚本时，页面是不可响应的，直到脚本已完成。

Web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 运行在后台。

浏览器支持

表格中的数字指示完全支持 Web Worker 的首个浏览器版本。

API
Web Worker 4.0 10.0 3.5 4.0 11.5

HTML Web Workers 实例

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

计数：

Prueba personalmente

检测 Web Worker 支持

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

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

创建 Web Worker 文件

Ahora, creemos nuestro web worker en un archivo JavaScript externo.

Aquí creamos el script de conteo. Este script se almacena en el archivo "demo_workers.js":

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

La parte importante del código anterior es el método postMessage() - se utiliza para enviar un mensaje a la página HTML.

Comentarios: El web worker generalmente no se utiliza para scripts tan simples, sino para tareas que requieren más recursos de CPU.

Crear objeto Web Worker

Ahora que tenemos el archivo web worker, necesitamos invocarlo desde la página HTML.

La siguiente línea de código verifica si existe el worker; si no existe, crea un nuevo objeto web worker y ejecuta el código en "demo_workers.js":

if (typeof(w) == "undefined") {
    w = new Worker("demo_workers.js");
}

Luego podemos recibir mensajes desde y hacia el web worker.

Añadir un listener de eventos "onmessage" al web worker:

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

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

Detener Web Worker

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

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

w.terminate();

Reutilización de Web Worker

Si establece la variable worker en undefined, puede reutilizar el código después de que se detenga:

w = undefined;

Código completo de ejemplo de Web Worker

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

Ejemplo

<!DOCTYPE html>
<html>
<body>
<p>Contar números: <output id="result"></output></p>
<button onclick="startWorker()">Iniciar Worker</button> 
<button onclick="stopWorker()">Detener Worker</button>
<br><br>
<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 = "Sorry! No hay soporte de Web Worker.";
    }
}
function stopWorker() { 
    w.terminate();
    w = undefined;
}
</script>
</body>
</html>

Prueba personalmente

Web Worker y DOM

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

  • Objeto window
  • Objeto document
  • Objeto parent