Un web worker es un JavaScript que se ejecuta en segundo plano, sin afectar el rendimiento de la página.
¿Qué es un Web Worker ?
Cuando la ejecución de secuencias de comandos en una página HTML, la página no responde hasta que finalice la secuencia de comandos.
Un trabajador de la web, según lo definido por el World Wide Web Consortium (W3C) y el Grupo de Trabajo de Tecnología de Aplicación de hipertexto (WHATWG) Web, es una secuencia de comandos JavaScript se ejecuta desde una página HTML que se ejecuta en segundo plano, de forma independiente de otras secuencias de comandos de interfaz de usuario que también puede haber sido ejecutado desde la misma página HTML. trabajadores web son a menudo capaces de utilizar las CPU de varios núcleos con mayor eficacia.
Visión de conjunto
Según lo previsto por WHATWG, los trabajadores de la tela son relativamente pesado-peso. Se espera que sea de larga duración, tienen un alto costo de rendimiento de puesta en marcha, y un alto coste de memoria por instancia.
trabajadores web no se pretende ni se esperan para ser utilizado en grandes cantidades, ya que podría acaparar los recursos del sistema.
Trabajadores web permiten la ejecución simultánea de los hilos del navegador y uno o más hilos de JavaScript que se ejecutan en segundo plano. El navegador que sigue a un solo hilo de ejecución tendrá que esperar en los programas JavaScript para terminar la ejecución antes de proceder y esto puede tomar un tiempo considerable, que el programador puede tener gusto de ocultar al usuario.
Permite el navegador para continuar con el funcionamiento normal mientras se ejecuta la secuencia de comandos en el fondo. La especificación trabajador web es una especificación separada de la especificación de HTML 5 y se puede utilizar con HTML5.
Hay dos tipos de trabajadores: web trabajadores dedicados y compartidos.
Cuando los trabajadores web ejecutan en segundo plano, que no tienen acceso directo a la DOM, pero se comunican con el documento por el paso de mensajes. Esto permite la ejecución de múltiples subprocesos de programas JavaScript.
Soporte del navegador
Los números de la tabla especifican la primera versión del navegador con compatibilidad completa Web Workers .
| API | |||||
|---|---|---|---|---|---|
| Web Workers | 4.0 | 10.0 | 3.5 | 4.0 | 11.5 |
HTML Web Workers Ejemplo
El siguiente ejemplo crea un simple web worker que cuentan los números en el fondo:
Compruebe Web Worker Soporte
Antes de crear un web worker , comprobar si el navegador del usuario soporta:
if(typeof(Worker) !== "undefined") {
// Yes! Web worker support!
// Some code.....
} else {
// Sorry! No Web Worker support..
}
Crear un Web Worker Archivo
Ahora, vamos a crear nuestra web worker en un JavaScript externo.
A continuación, creamos un script que cuenta. El script se almacena en el "/html/demo_workers.js" archivo:
var i = 0;
function timedCount() {
i = i + 1;
postMessage(i) ;
setTimeout("timedCount() ",500);
}
timedCount() ;
La parte importante del código anterior es la postMessage() método - que se utiliza para enviar un mensaje de vuelta a la página HTML.
Note: Normalmente web workers no se utilizan para este tipo de scripts simples, pero para más tareas intensivas de la CPU.
Crear un Web Worker Objeto
Ahora que tenemos el web worker de archivos, tenemos que llamarlo desde una página HTML.
Las siguientes líneas comprueba si el web worker ya existe, si no - se crea un nuevo web worker objeto y ejecuta el código en "/html/demo_workers.js" :
if(typeof(w) == "undefined") {
w = new Worker("/html/demo_workers.js");
}
Entonces podemos enviar y recibir mensajes del web worker .
Añadir una "onmessage" detector de eventos al web worker .
w.onmessage = function(event){
document.getElementById("result").innerHTML = event.data;
};
Cuando los web worker se enviará un mensaje, se ejecuta el código en el detector de eventos. Los datos del web worker se almacenan en event.data.
Poner fin a un Web Worker
Cuando un web worker se crea objeto, que continuará para escuchar mensajes (even after the external script is finished) hasta que se termina.
Para poner fin a un web worker , y liberar recursos del navegador / equipo, utilice el terminate() método:
w.terminate();
Volver a utilizar la Web Worker
Si se establece el web worker variable no definida, después de que se ha terminado, se puede reutilizar el código:
w = undefined;
Completo Web Worker Ejemplo Código
Ya hemos visto la Web Worker código en el .js archivo. 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>
<br><br>
<script>
var w;
function startWorker() {
if(typeof(Worker) !== "undefined") {
if(typeof(w) == "undefined") {
w = new Worker("/html/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> Inténtalo tú mismo " Web Workers y el DOM
Dado que web workers están en archivos externos, que no tienen acceso a los siguientes objetos JavaScript:
- El objeto de la ventana
- El objeto del documento
- El objeto padre