¿Qué son los trabajadores web?

Este artículo trata sobre el uso de los trabajadores web y su importancia en HTML5. El motor de script Java creado con un solo hilo y no hay un proceso concurrente detrás de ellos (no se ejecuta ningún otro proceso hasta que el primer proceso finalice). Como javascript se ejecuta en primer plano y hace que la página web requiera mucho tiempo. Por lo tanto, para evitar este gran problema, HTML5 ha creado una nueva tecnología llamada Trabajadores web. Es un pequeño script en segundo plano que realiza cálculos en tareas costosas sin intervenir en la interfaz de usuario o el rendimiento de la página web. Este hilo aislado es relativamente ligero y es compatible con todos los navegadores web. Esto hace que HTML inicie hilos adicionales.

Tipos de trabajadores web en HTML5

Los trabajadores web también se denominan "trabajadores dedicados". Tienen un modelo de memoria compartida por separado. En otras palabras, podemos decir que todo un alcance de JavaScript se ejecutó en un solo hilo. Mientras trabajamos en un navegador web, hemos encontrado algunos mensajes de diálogo de pista debido al procesamiento pesado de la página. Para proporcionar una buena solución, la API HTML del navegador web ha creado diferentes cálculos al mismo tiempo.

A continuación se dan tres tipos importantes de trabajadores web:

1. Trabajador web compartido

Este tipo hace uso de API y cada unidad de trabajador tiene múltiples conexiones mientras envía un mensaje (múltiples Scripts) siempre que cada contexto sea del mismo origen. El soporte del navegador para este trabajador es limitado. Se llaman utilizando el constructor de trabajador compartido ().

2. Trabajador web dedicado

Crear un archivo es muy simple simplemente llamando a un Constructor con su ruta de origen. Utilizan la comunicación de mensajes llamada método post message () durante la transferencia de mensajes. Incluso los controladores de eventos se utilizan cuando se lleva a cabo algún oyente. El controlador onmessage () se ha utilizado para recibir un mensaje.

3. Trabajador de servicio

Este trabajador no interactúa directamente con la página web y se ejecuta en segundo plano. Se pueden restaurar cuando sea necesario y actúan como proxy, se puede acceder a ellos mediante múltiples subprocesos.

¿Cómo crear un archivo de Web Workers?

No tienen soporte para algunas características como objeto de ventana, DOM, el objeto padre. Todas las funciones se realizan pasando una réplica de ellas.

Paso 1: Para crear un archivo de importación Worker () constructor Se crea un archivo usando un nuevo objeto, y el script se ve así.

var worker = new Worker(sample.js);

Paso 2: Creación del mensaje de publicación (). Los archivos de trabajo creados invocan automáticamente el método post message (). Los métodos post message () dirigen el mensaje que pasa al hilo principal. Y de manera similar, podemos enviar un mensaje desde el hilo principal al hilo de trabajo. Por aquí comienza el trabajador.

worker. postMessage();

Paso 3: Siguiente para lanzar el controlador de eventos, para permitir el mensaje del trabajador web.

worker. onmessage = function(event)

De ahora en adelante hemos visto cómo enviar y recibir mensajes. Ahora veamos cómo despedir al trabajador en medio del proceso.

Paso 4: para detener el proceso.

worker.terminate()

Paso 5: Para implementar un escenario de manejo de errores, el trabajador usa.

Worker.onerror();

Las 9 características principales de los trabajadores web HTML5

  1. Los trabajadores web, al ser un protocolo asíncrono, eran los más adecuados para realizar tareas computacionales y se consideraban las características profesionales de Javascript.
  2. Los trabajadores web pagan una plataforma de ejecución estricta para las ventanas móviles y de escritorio, lo que permite ejecutar la página web sin congelar la página web en los navegadores.
  3. El beneficio principal es que podemos ejecutar procesos costosos dentro de un solo hilo individual que no interrumpe el hilo principal en ejecución.
  4. Los trabajadores web son pequeños hilos ligeros que viven individualmente entrelazando la interfaz de usuario.
  5. Los trabajadores web que son hilos orientados al kernel ayudan a alcanzar el alto rendimiento de la página de los navegadores.
  6. Los trabajadores web ayudan a crear programación paralela y realizan acciones de subprocesos múltiples.
  7. Web-Workers mejora la velocidad de la aplicación Java JScript.
  8. Web-worker se considera un script del lado del cliente y se usa más en la aplicación de juegos.
  9. Los subprocesos de trabajo web se comunican entre sí mediante el método de devolución de llamada post Message ().

Ejemplos de trabajadores web HTML5

Los trabajadores web tienen acceso al navegador, solicitud XMLHTTP, navegador debido a sus actividades de procesamiento múltiple. El siguiente ejemplo se centra en tipos de trabajadores dedicados a demostrar.

Ejemplo 1

Muestra el archivo Worker de muestra que muestra el funcionamiento del navegador.

Código:



Web Worker Demo

Validating the browser compatibility of Web Browsers

Submit
function worker_demo()
(
if(typeof(Worker)!=="undefined")(
document.getElementById("yes").innerHTML=" Browser Supports";
)
else
(
document.getElementById("NO").innerHTML="Browser Not Supporting the workers";)
)



Web Worker Demo

Validating the browser compatibility of Web Browsers

Submit
function worker_demo()
(
if(typeof(Worker)!=="undefined")(
document.getElementById("yes").innerHTML=" Browser Supports";
)
else
(
document.getElementById("NO").innerHTML="Browser Not Supporting the workers";)
)



Web Worker Demo

Validating the browser compatibility of Web Browsers

Submit
function worker_demo()
(
if(typeof(Worker)!=="undefined")(
document.getElementById("yes").innerHTML=" Browser Supports";
)
else
(
document.getElementById("NO").innerHTML="Browser Not Supporting the workers";)
)

Salida:

Ejemplo # 2

El siguiente ejemplo muestra cómo las tareas del trabajador se ejecutan detrás de la tarea usando la clase y el recuento se realiza para las tareas del trabajador. Las tareas de trabajo actualizan automáticamente la página web en cada ciclo hasta que finaliza. Para terminar la ejecución del trabajador, aquí se usa terminate ().

El trabajo realizado en segundo plano por el trabajador web:

Código:

wrk.html




Web Workers Demo
body (padding-top:18px;)
.output-cont (margin-left:12%; margin-top:28px;)
.output-cont h2 (width:150px; height:95%;)
.output-cont button (padding:3px 7px; font-size:1.3rem; font-family:sans-serif; )

start worker terminate

start blocking thread

test responsiveness
var worker;
function testWork() (
if (typeof(Worker) !== "undefined") (
if (typeof(worker) == "undefined") (
worker = new Worker("demo.js");
)
worker.onmessage = function(event) (
document.getElementById("wOutput").innerHTML = event.data;
);
) else (
document.getElementById("wOutput").innerHTML = "Web Workers are unsupported";
)
)
function stopWorker() (
worker.terminate();
worker = undefined;
)
function test() (
for (var j = 0; j < 20000; j++) (
document.getElementById("mainThreadOutput").innerHTML = "Main Thread Counter: " + j;
)
)

Next creating an separate external javascript file demo.js and the code comes as shown.
demo.js
j = 0;
while (j < 200000)
( postMessage("Web Worker Counter: " + j);
j++;
)


Web Workers Demo
body (padding-top:18px;)
.output-cont (margin-left:12%; margin-top:28px;)
.output-cont h2 (width:150px; height:95%;)
.output-cont button (padding:3px 7px; font-size:1.3rem; font-family:sans-serif; )

start worker terminate

start blocking thread

test responsiveness
var worker;
function testWork() (
if (typeof(Worker) !== "undefined") (
if (typeof(worker) == "undefined") (
worker = new Worker("demo.js");
)
worker.onmessage = function(event) (
document.getElementById("wOutput").innerHTML = event.data;
);
) else (
document.getElementById("wOutput").innerHTML = "Web Workers are unsupported";
)
)
function stopWorker() (
worker.terminate();
worker = undefined;
)
function test() (
for (var j = 0; j < 20000; j++) (
document.getElementById("mainThreadOutput").innerHTML = "Main Thread Counter: " + j;
)
)

Next creating an separate external javascript file demo.js and the code comes as shown.
demo.js
j = 0;
while (j < 200000)
( postMessage("Web Worker Counter: " + j);
j++;
)


Web Workers Demo
body (padding-top:18px;)
.output-cont (margin-left:12%; margin-top:28px;)
.output-cont h2 (width:150px; height:95%;)
.output-cont button (padding:3px 7px; font-size:1.3rem; font-family:sans-serif; )

start worker terminate

start blocking thread

test responsiveness
var worker;
function testWork() (
if (typeof(Worker) !== "undefined") (
if (typeof(worker) == "undefined") (
worker = new Worker("demo.js");
)
worker.onmessage = function(event) (
document.getElementById("wOutput").innerHTML = event.data;
);
) else (
document.getElementById("wOutput").innerHTML = "Web Workers are unsupported";
)
)
function stopWorker() (
worker.terminate();
worker = undefined;
)
function test() (
for (var j = 0; j < 20000; j++) (
document.getElementById("mainThreadOutput").innerHTML = "Main Thread Counter: " + j;
)
)

Next creating an separate external javascript file demo.js and the code comes as shown.
demo.js
j = 0;
while (j < 200000)
( postMessage("Web Worker Counter: " + j);
j++;
)

Salida:

Conclusión

Hasta el final, hemos visto cómo los trabajadores web trabajan independientemente del hilo principal que ayuda a las organizaciones web a crear aplicaciones exigentes. Y se recomienda encarecidamente utilizar trabajadores web en javascript para tareas pesadas. Se sugiere que cuando el navegador web ya no esté en uso se cierre para consumir los recursos del sistema.

Artículo recomendado

Esta es una guía para los trabajadores web HTML5. Aquí discutimos las 9 características principales de HTML5 Web Workers y sus ejemplos con implementación de código. También puede consultar nuestros artículos sugeridos para obtener más información:

  1. Html5 Nuevos Elementos | Top 10
  2. Marcos HTML con sintaxis
  3. Introducción a las ventajas de HTML
  4. Las 10 preguntas y respuestas principales de la entrevista HTML5

Categoría:

Herramientas de desarrollo web