Consejos Tecnológicos

Acelere sus aplicaciones web con Web Workers

JavaScript fue creado y diseñado para ejecutar una pequeña cantidad de secuencias de comandos en un navegador web. Fue bien recibido y muy adoptado debido a la simplicidad y la franqueza del lenguaje, que nadie esperaba en ese momento que realizara tareas computacionalmente pesadas y con un uso intensivo de la CPU. Es un lenguaje amado por los programadores aficionados que están comenzando a incursionar en el mundo de la programación de «construcción lógica». Avance rápido 20 años y JavaScript está ejecutando todo el negocio de aplicaciones web del mundo moderno. Desde la manipulación de DOM en el front-end hasta la gestión de todo el servidor y el back-end, todas las tareas pueden (y normalmente lo hacen) JavaScript.

JavaScript – Restricciones

Dado que JavaScript nunca se diseñó para realizar tareas computacionalmente intensivas, el lenguaje se adoptó para trabajar en un solo hilo. Pero, ¿qué son exactamente los hilos? Un subproceso es la secuencia más pequeña de instrucciones para que el sistema operativo realice una tarea. La «naturaleza de subproceso único» de JavaScript significa que JavaScript puede realizar una tarea ininterrumpida en una sola secuencia y no puede iniciar otras tareas hasta que esa tarea se complete. Si está realizando tareas computacionalmente intensivas en la interfaz de usuario frontal (no se sorprenda, en algunos casos tiene que hacerlo), como la creación de documentos CAD, cálculos de geometría pesados ​​o manipulación de tablas de datos largas, entonces la interfaz de usuario está vinculada para retrasarse y cambiar deja de responder, lo que resulta en el temido error «la página no responde». Esto da como resultado una experiencia de usuario deficiente y, a veces, incluso los usuarios completamente abandonados nunca regresan a su aplicación web. ¿Quién querría eso? Exploremos algunas formas de resolver este rompecabezas.

¿solución?trabajador web

Los trabajadores web aportan capacidades de subprocesos múltiples a JavaScript. Web Workers es una forma sencilla para que el contenido web ejecute scripts en un subproceso en segundo plano para que el subproceso principal pueda realizar sus tareas sin problemas ni interrupciones sin interferir con la interfaz de usuario. Por lo tanto, muchas cargas de trabajo se trasladan del subproceso principal al subproceso de fondo. ¿Cuáles son los principales beneficios de la separación de la carga de trabajo? Bueno, ahora puede realizar tareas y cálculos que requieren un uso intensivo de la CPU en subprocesos aislados sin bloquear la reactividad o la disponibilidad del subproceso principal del usuario. Pero estos trabajadores web también tienen algunas limitaciones y restricciones, como no tener acceso al árbol DOM principal, por lo que no pueden realizar manipulaciones DOM por sí mismos, y acceso limitado a la página principal del trabajador, lo que restringe el uso de objetos de ventana.

Cuando un trabajador completa su tarea, envía un paquete o «mensaje» al subproceso principal, que es un evento que se puede escuchar con un detector de eventos y envuelto en una función para realizar más tareas o actualizar la interfaz de usuario. Los mensajes se pueden transmitir desde ambos lados (hilo principal y hilo de fondo) mediante la función postMessage(), y las respuestas a estos mensajes se pueden manejar mediante el controlador de eventos onmessage(). Ahora que sabemos todo sobre Web Workers, pasemos a implementar esto en el código y aprendamos cómo acelerar una aplicación web al proporcionarle capacidades de subprocesos múltiples.

Implementando Web Worker – Código

Haremos una aplicación web que cuente la cantidad de números primos en un rango dado. El rango será tan grande que podemos crear un «bloque de tareas» para el hilo principal. Entonces veremos la ventaja de mover esta tarea a un hilo de fondo.

Primero, creemos una función para buscar todos los números primos en un rango determinado y mostrarla en la interfaz de usuario en HTML. Tenga en cuenta que esta tarea se está ejecutando en el subproceso principal.

Archivo principal.js

function doSearch(fromNumber, toNumber) {
  // Perform the prime search. (This is the time-consuming step.)
  var primes = findPrimes(fromNumber, toNumber);

  // Take the results (an array of prime numbers), loop over it,
  // and paste all the primes together into one long piece of text.
  var primeList = "";
  for (var i=0; i

Aquí encontramos todos los números primos entre un rango dado y los imprimimos en HTML, lo que puede no ser una tarea de precomputación muy pesada, pero cuando se ingresa al rango de millones o cientos de millones, esto puede hacer que el navegador se bloquee.Por la simplicidad del tutorial, no consideramos los siguientes inicios de sesión encontrar primo() Características.

Cuando el rango está entre 1 y 1,000,000,000, ejecutar este código en el subproceso principal puede hacer que la página deje de responder, hacer que la interfaz de usuario no responda y crear una mala experiencia para el usuario.

Ahora intentemos descargar esta tarea pesada a un subproceso en segundo plano para que el subproceso principal permanezca inactivo y el usuario aún pueda usar la aplicación web. La implementación de un trabajador web en una aplicación web es un proceso sencillo.

  • Compruebe si el navegador actual es compatible con la API de trabajadores web.
  • Cree un archivo Web Worker y conéctelo con el JavaScript principal mediante la API.
  • Realice tareas intensivas en recursos en segundo plano. Deja que el hilo principal haga su trabajo.
  • Cuando termine, notifique a la página de inicio y termine el trabajador para guardar los recursos del sistema operativo.

Así que saltemos directamente al código.

Para controlar el manejo de errores y una mejor compatibilidad con versiones anteriores, generalmente se recomienda envolver el código de trabajo en las siguientes comprobaciones. Indicará si el navegador actual es compatible con la API del trabajador web.

dentro principal.js documento:

if (window.Worker){
    // Your web worker's code goes here
    var worker = new Worker('worker.js');
} else {
    console.log(“Web Worker API not supported by the browser”);
}

Dado que estamos ejecutando secuencias de comandos que están completamente aisladas y son distintas del archivo principal, estas secuencias de comandos también deben escribirse en archivos diferentes. Así que cree otro archivo llamado "worker.js" en la misma carpeta que main.js.

El objeto Worker() acepta un parámetro de cadena como la ruta al archivo del trabajador. Después de completar estos pasos, finalmente podemos comenzar a trabajar en la lógica del código que se ejecutará en el subproceso en segundo plano a través del trabajador web.

El código de Web Worker no puede acceder a las variables globales, ni puede manipular directamente el árbol DOM para cambiar los elementos de la interfaz de usuario, como escribir

Etiqueta. En su lugar, el trabajador debe enviar los datos procesados ​​al subproceso principal dentro de un paquete llamado "mensaje", que puede ser escuchado por un detector de eventos.

La comunicación de datos entre el trabajador y la página principal se realiza mediante postMensaje() Método API del trabajador.El personal o la página de inicio pueden escuchar mensaje evento.Otra cosa para recordar es postMensaje() El método solo toma un parámetro, por lo que se pueden enviar datos más complejos al trabajador encapsulando los datos en un Object Literal.

Con esto en mente, modifiquemos nuestro búsqueda() La función utiliza un Web Worker para realizar esta tarea en segundo plano.

Archivo principal.js

function doSearch(fromNumber, toNumber) {
  if (window.Worker){
    // Your web worker's code goes here
    var worker = new Worker('worker.js');
    // Hook up to the onMessage event, so you can receive messages from worker
    worker.onmessage = receivedWorkerMessage;

    // Get the number range, and send it to the web worker.
    worker.postMessage(
      { from: fromNumber,
        to: toNumber }
    );
    function receivedWorkerMessage(event) {
      var primes = event.data;

      // Copy the list to the page.
      var primeList = "";
      for (var i=0; i

Con esto, hemos implementado con éxito un trabajador web para ejecutar tareas en un subproceso en segundo plano y nunca interrumpir el subproceso principal. Terminemos el código implementando la lógica para ejecutar Web Worker en un archivo separado creado al principio.

archivo trabajador.js

onmessage = function(event) {
  var fromNumber = event.data.from;
  var toNumber = event.data.to;
  // Using that number range, perform the prime number search.
  var primes = findPrimes(fromNumber, toNumber);
  // Now the search is finished. Send back the results.
  postMessage(primes);
  close();
};

function findPrimes(fromNumber, toNumber) {
  // (The boring prime number calculations go in this function.)
};

La estructura general de los programas y archivos ha cambiado un poco, pero la lógica es básicamente la misma. Obtenga un rango, encuentre números primos e imprima la lista en HTML. Sin embargo, los últimos resultados son bastante diferentes y más eficientes.En el método anterior, después de ejecutar búsqueda() funcionalidad, la página deja de responder, falla y falla. Sin embargo, en el segundo enfoque que usa Web Worker, el cálculo aún se ejecuta en segundo plano, pero la interfaz de usuario del front-end nunca falla ni deja de responder. Puede desplazarse hacia abajo, presionar botones, etc., y los cálculos en segundo plano no se verán afectados.

pequeño y eficiente

¡estupendo! En este tutorial, aprendió qué es un Web Worker, cuál es la necesidad de implementar un Web Worker en el complejo mundo actual de las aplicaciones web, cómo enviar mensajes entre dos subprocesos y cuáles son las limitaciones de JavaScript como lenguaje de secuencias de comandos.

El enfoque de Web Worker puede ayudar a las aplicaciones web complejas a superar esta limitación y abrir un nuevo mundo de posibilidades con una experiencia de usuario perfecta y un flujo de trabajo fluido. Estamos ansiosos por ver lo que crea con este poderoso cambio de subprocesos y la capacidad de hacer que la experiencia del usuario sea fluida y mejor para sus clientes. Siempre sigue aprendiendo y prepárate para explorar más.

Publicaciones relacionadas

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Botón volver arriba