En JavaScript, existen múltiples enfoques para mejorar la interfaz de usuario general del sitio. El “Trabajador web” es uno de esos enfoques que permite que el hilo principal siga ejecutándose sin ser bloqueado. Comprende su instancia de motor JavaScript separada y, por lo tanto, no puede invocar las funcionalidades del hilo principal.
Este artículo discutirá cómo utilizar “Trabajador web” para subprocesos múltiples en JavaScript.
¿Qué son los trabajadores web?
“Trabajadores web” corresponde a una API del navegador que permite a JavaScript ejecutar las tareas en paralelo/al mismo tiempo en un hilo separado/dedicado.
¿Cuál es la necesidad de trabajadores web?
Dado que JavaScript tiene un solo subproceso, los códigos JavaScript complejos bloquean el subproceso de la interfaz de usuario, es decir, detienen la ventana principal que se encarga de todas las tareas de actualización, implementación de eventos de entrada del usuario, etc. En tal escenario, la experiencia del usuario se ve afectada. . Para hacer frente a esta cuestión, el “Trabajador web” entra en vigor y resuelve el bloqueo del hilo de la interfaz de usuario.
¿Cómo utilizar Web Workers para subprocesos múltiples con JavaScript?
Hacer un “Trabajador web” , utilice el constructor Worker. Es tal que toma una URL como argumento, que corresponde a la ruta del archivo de script del trabajador que implementa la funcionalidad deseada. Sin embargo, para incluir el código de trabajo en un archivo HTML, utilice un 'gota' para escribir código de trabajo.
Sintaxis (creación de un trabajador web)
constante X = nuevo Obrero ( 'trabajador.js' ) ;Sintaxis (Envío de un mensaje al trabajador)
constante X = nuevo Obrero ( 'trabajador.js' ) ;
Sintaxis (Recibir un mensaje del trabajador)
X. en mensaje = función ( evento ) {consola. registro ( evento. datos ) ;
} ;
Ejemplo: utilización de 'Web Worker' para calcular el factorial de un número en JavaScript
El siguiente ejemplo utiliza el 'Obrero()' constructor para crear un trabajador web y calcular el factorial de un número:
< HTML >
< cabeza >
< estilo h2 = 'alineación de texto: centro;' > Ejemplo de trabajadores web h2 >
cabeza >
< cuerpo >
< guion >
constante X = nuevo Obrero ( URL. crearObjetoURL ( nuevo Gota ( [
`
// guión de trabajo
constante hecho = ( norte ) => {
si ( norte == 0 || norte == 1 ) {
devolver 1n ;
}
demás {
devolver Empezando ( norte ) * hecho ( Empezando ( norte ) - 1n ) ;
}
} ;
ser. en mensaje = ( evento ) => {
constante Con = hecho ( evento. datos ) ;
ser. mensaje posterior ( Con. Encadenar ( ) ) ;
} ; `
] , { tipo : 'texto/javascript' } ) ) ) ;
X. mensaje posterior ( 15n ) ;
X. en mensaje = ( evento ) => {
constante afuera = evento. datos ;
consola. registro ( 'Factorial de 15 a través de un trabajador web->' , afuera ) ;
} ;
cuerpo >
HTML >
En este código, aplique los siguientes pasos:
- En primer lugar, especifique el título indicado.
- Después de eso, cree un “Trabajador web” objeto que tiene la URL del objeto Blob que comprende el código del trabajador.
- El código dedicado al trabajador está incluido en una función anónima que calcula el factorial del número mediante una función recursiva.
- Además, el trabajador escucha los mensajes enviados a través del hilo principal utilizando el “auto.mensaje” evento, recupera el factorial del número pasado y proporciona el resultado al hilo principal a través del “postMensaje()” método.
- En el hilo principal, cree una instancia de trabajador y envíele un mensaje con el número ' 15n ”. Aquí, ' norte ”se refiere al valor “BigInt”.
- Una vez que el trabajador termina de calcular el factorial, envía el resultado de regreso al hilo principal utilizando el “postMensaje()” método.
- Por último, el hilo principal busca/recibe el resultado en el “en mensaje” evento y devuelve el factorial correspondiente del número en la consola.
Producción
Ventajas de los trabajadores web
Procesamiento en paralelo : En el caso de ejecutar el mismo código de forma paralela.
Sin interrupciones en la ejecución del código: La ejecución del código se realiza independientemente de las actualizaciones, etc. en la página actual.
Seguimiento de movimiento: Toda la detección de movimiento se realiza en segundo plano.
Subprocesos múltiples habilitados: Estos permiten subprocesos múltiples en JavaScript.
Rendimiento mejorado: Optimice el rendimiento realizando tareas intensivas/desafiantes en subprocesos separados.
Experiencia de usuario efectiva: Estos evitan bloquear el hilo principal, lo que da como resultado una experiencia de usuario receptiva.
Limitaciones de los trabajadores web
Sin embargo, también existen algunas limitaciones de los trabajadores web. Estos se expresan, de la siguiente manera:
- Mayor utilización de la memoria.
- No se puede actualizar DOM en un subproceso de trabajo ni invocar el objeto de ventana.
Conclusión
“Trabajadores web” corresponde a una API del navegador que permite que JavaScript ejecute las tareas al mismo tiempo en un hilo separado/dedicado. Estos se pueden utilizar tomando una URL como argumento, que corresponde a la ruta del archivo de script del trabajador. Este blog analiza el uso de 'Web Workers' para subprocesos múltiples en JavaScript.