Web Workers

Web Workers

8513bd393d0d86f1d297ae5a3e4a2157?s=128

Mariano Alvarez

April 20, 2020
Tweet

Transcript

  1. 2.

    @malvarezcr ¿Quién soy? Web Practice Lead Co-Organizador de Angular Costa

    Rica Fan de JS, TS, NG, Web Techs, Pizza, Emojis Mariano Álvarez
  2. 6.

    @malvarezcr ¿Cómo funciona Javascript? Conceptos • Heap • Stack Importante:

    First In - Last Out • Web API • Callback queue Importante: First In - First Out Referencia https://medium.com/@Rahulx1/understanding-event-loop-call-stack-event-job-queue-in-javascript-63dcd2c71ecd
  3. 10.

    @malvarezcr ¿Qué es un Web Worker? Es una especificación que

    define un API para poder correr tareas en un segundo plano
  4. 11.

    @malvarezcr ¿Qué es un Web Worker? Conceptos • Existen 2

    tipos: Dedicated y Shared Workers • OnMessage y postMessage son funciones que permiten la comunicación Shared se comunican igual pero deben usar el port object • Soportan importScripts • Un worker puede llamar otros workers • Los objetos son serializados y deserializados • No se puede manipular el DOM • Debe estar en el mismo dominio en el que se va utilizar
  5. 14.

    @malvarezcr Consejos • Utilizarlos solo en tareas muy intensas. En

    pequeñas tareas no se ve la mejora de rendimiento • Siempre validen que el navegador / NodeJS lo soporte • Tareas comunes en los que se usan: revision de ortografia, caching de assets, prefetching
  6. 15.
  7. 17.

    @malvarezcr Links de referencia • Ejemplo Web Worker https://github.com/mahcr/simple-web-worker •

    Javascript concurrency https://developer.mozilla.org/en-US/docs/Web/ API/Web_Workers_API/Using_web_workers • Twitter: @malvarezcr / Medium: @mahcr Mariano Álvarez