HTML API de trabajadores web
Un trabajador web es un JavaScript que se ejecuta en segundo plano, sin afectar el rendimiento de la página.
¿Qué es un trabajador web?
Al ejecutar secuencias de comandos en una página HTML, la página deja de responder hasta que finaliza la secuencia de comandos.
Un trabajador web es un JavaScript que se ejecuta en segundo plano, independientemente de otros scripts, sin afectar el rendimiento de la página. Puedes continuar haciendo lo que quieras: hacer clic, seleccionar cosas, etc., mientras el trabajador web se ejecuta en segundo plano.
Soporte del navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con Web Workers.
| API | |||||
|---|---|---|---|---|---|
| Web Workers | 4.0 | 10.0 | 3.5 | 4.0 | 11.5 |
Ejemplo de trabajadores web HTML
El siguiente ejemplo crea un trabajador web simple que cuenta números en segundo plano:
Consultar soporte para trabajadores web
Antes de crear un trabajador web, verifique si el navegador del usuario lo admite:
if (typeof(Worker) !== "undefined") {
// ¡Sí! ¡Apoyo a los trabajadores web!
// Algún código.....
} else {
// ¡Lo siento! Sin soporte para trabajadores web..
}
Crear un archivo de trabajo web
Ahora, creemos nuestro trabajador web en un JavaScript externo.
Aquí creamos un script que cuenta. El 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(), que se utiliza para publicar un mensaje en la página HTML.
Nota: Normalmente, los trabajadores web no se utilizan para scripts tan simples, sino para tareas que requieren más uso de CPU.
Crear un objeto de trabajo web
Ahora que tenemos el archivo de trabajo web, debemos llamarlo desde una página HTML.
Las siguientes líneas verifican si el trabajador ya existe; en caso contrario, crea un nuevo objeto de trabajador web y ejecuta el código en "demo_workers.js":
if (typeof(w) == "undefined") {
w = new Worker("demo_workers.js");
}
Entonces podremos enviar y recibir mensajes del trabajador web.
Agregue un detector de eventos "onmessage" al trabajador web.
w.onmessage = function(event){
document.getElementById("result").innerHTML = event.data;
};
Cuando el trabajador web publica un mensaje, se ejecuta el código dentro del detector de eventos. Los datos del trabajador web se almacenan en event.data.
Terminar un trabajador web
Cuando se crea un objeto de trabajo web, continuará escuchando mensajes (incluso después de que finalice el script externo) hasta que se finalice.
Para finalizar un trabajador web y liberar recursos del navegador/computadora, use el método terminate():
w.terminate();
Reutilizar el trabajador web
Si configura la variable de trabajo como indefinida, una vez terminada, puede reutilizar el código:
w = undefined;
Código de ejemplo de trabajador web completo
Ya hemos visto el código del trabajador en el archivo .js. A continuación se muestra el código de la página HTML:
Ejemplo
<!DOCTYPE html>
<html>
<body>
<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker()">Stop Worker</button>
<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 Web Worker support.";
}
}
function stopWorker() {
w.terminate();
w = undefined;
}
</script>
</body>
</html>
Try it Yourself »
Trabajador web y el DOM
Dado que los trabajadores web están en archivos externos, no tienen acceso a los siguientes objetos JavaScript:
- El objeto ventana
- El objeto del documento
- El objeto padre
