A finales del siglo XVIII, existió al que hoy se conoce como el padre de la química, el francés Antoine-Laurent Lavoisier que en 1785 elaboro la tan conocida ley de Lavoisier, la materia ni se crea ni se destruye, solo se transforma. Por lo que todo aquello que nos es cercano es relativo a su supuesta creación o punto 0.
La web ha sufrido incontables cambios en los últimos años, y más aún si tenemos en cuenta el cambio de mentalidad en cuanto a realizar hoy en día paginas web más atractivas, siendo algunas de ellas un placer para la vista navegar por ellas.
Es aquí donde reside la magia de las animaciones, un elemento visual que brilla por su dinamismo y que puede generar una reactividad en nuestros recursos web, una interconexión del antes, después y ahora dejando un hilo conductor donde su estado original no es la referencia, sino el flujo de sus continuos cambios que nos llevan a un punto unidireccional donde principio y final se establecen como un único momento, la continua transformación.
Animation Worklet, la cuarta API de la serie CSS Houdini , la cual viene a resolver problemas que van más allá de la propia visualización y nos aporta un mayor ahorro de renderizado en el propio navegador.
¿Otra librería de animaciones? En absoluto. Animation Worklet a diferencia de otras técnicas se ejecuta de forma independiente del hilo principal de Javascript y tiene como objetivo el procesamiento de dicha animación fuera este hilo, lo que impide que si existe un retraso en el hilo principal no se reproduce en la animación.
Actualmente Animation Worklet forma parte de un borrador cuya integración en los navegadores se encuentra en un soporte parcial.
Para cargar esta api simplemente tendremos que utilizar la propia estructura para insertar módulos, un método muy común en las ultimas funciones de los navegadores como Service Workers.
Una vez hecho esto, haremos uso del método “registerAnimator”, el cual acepta dos parámetros:
Tras cargar la configuración, crearemos una nueva instancia de tipo “WorkletAnimation”, que al igual que cualquier animación recibe tres argumentos:
Para ejecutar la animación simplemente tendremos que aplicar a nuestra variable el método “play()”
WorkletAnimation no solamente se queda aquí, también podemos realizar animaciones de scroll pudiendo personalizar dicho efecto.
Aparentemente no hace nada que ninguna librería de animaciones no nos pueda ofrecer, sin embargo, su autentico potencial reside en que mejora drásticamente el rendimiento.
Los navegadores son multiproceso. De hecho, así lo han sido durante hace algún tiempo, pero esto no significa que obtengamos todos nuestros núcleos de CPU y GPU de manera simultanea para procesar nuestra aplicación web. Cada navegador lo realiza de una manera ligeramente distinta, ya que cada uno utiliza un motor de renderizado distinto.
Por ejemplo, Chrome utiliza el motor “blink”, el cual se centra en separar las pestañas del navegador en procesos aislados. Esto permite que cada proceso o pestaña se ejecute en un núcleo distinto, por lo que utiliza toda la CPU cuando este funcionando. Sin embargo, cada proceso ejecuta todas las partes que normalmente las instancias de la pagina web podrían reutilizar. Por lo que eso ultimo, afecta drásticamente a la cantidad de memoria que el navegador necesita, dando como resultado un ataque a la duración de la batería.
Firefox a diferencia, tiene un enfoque distinto, ejecutando un máximo de cuatro procesos para todas las pestañas, y a cada una de estas le asigna uno de los procesos para estar a cargo de la pestaña. Con la actualización de Quantum, incluso puede procesar ciertas tareas para una pestaña en varios subprocesos. Sin embargo, esto genera una limitación ya que existen tareas como el procesamiento de CSS de sitios web que podrían separarse en subprocesos paralelos.
Como os podréis imaginar, todos los procesos se realizan secuencialmente, de hecho, el encargado principal de realizar esta tarea se conoce como Event Loop, que tiene como objetivo programar y procesar las tareas que ocurren en la pestaña.
De modo que aquí es donde viene al rescate Animation Worklet dejando de lado el hilo principal y ejecutándose en un hilo separado haciendo los cálculos necesarios para su ejecución, los cuales retornara una vez calculados para que el hilo principal simplemente tenga que renderizarlos.
AnimationWorklet es un añadido muy prometedor a la familia de animación nativa. Su enfoque en la separación de la carga de trabajo en otros subprocesos es ante todo una buena practica que veremos más en las futuras API implementadas.
ifgeekthen.nttdata.com es un blog del grupo NTT DATA. Un proyecto que busca compartir con profesionales del mundo digital temas relacionados con la tecnología y el universo geek.
