API de trabajadores web HTML
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. Puede continuar haciendo lo que quiera: hacer clic, seleccionar cosas, etc., mientras el trabajador web se ejecuta en segundo plano.
Compatibilidad con 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:
Ejemplo
Compruebe el soporte para trabajadores web
Antes de crear un trabajador web, verifique si el navegador del usuario lo admite:
if (typeof(Worker) !== "undefined") {
// Yes! Web worker support!
// Some code.....
}
else {
// Sorry! No Web Worker support..
}
Crear un archivo de trabajador 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 postMessage()método, que se utiliza para enviar un mensaje a la página HTML.
Nota: Normalmente, los trabajadores web no se utilizan para scripts tan simples, sino para tareas más intensivas de CPU.
Crear un objeto de trabajador web
Ahora que tenemos el archivo web worker, debemos llamarlo desde una página HTML.
Las siguientes líneas verifican si el trabajador ya existe, si no, 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");
}
Luego podemos 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 finalice.
Para finalizar un trabajador web y recursos gratuitos de navegador/computadora, use el
terminate()método:
w.terminate();
Reutilizar el trabajador web
Si establece la variable del trabajador en indefinida, después de que se haya terminado, puede reutilizar el código:
w = undefined;
Código de ejemplo de trabajador web completo
Ya hemos visto el código Worker 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>
Trabajadores web y el DOM
Dado que los trabajadores web están en archivos externos, no tienen acceso a los siguientes objetos de JavaScript:
- El objeto de la ventana
- El objeto del documento
- El objeto padre