Rendimiento del procesamiento

Los usuarios notan si los sitios y las apps no funcionan bien, por lo que optimizar el rendimiento de renderización es fundamental.

Paul Lewis

Los usuarios de la Web actual esperan que las páginas que visitan sean interactivas y fluidas, y ahí es donde debes enfocar cada vez más tu tiempo y esfuerzo. Las páginas no solo deben cargarse con rapidez, sino también responder con rapidez a las entradas del usuario durante todo su ciclo de vida. De hecho, este aspecto de la experiencia del usuario es precisamente lo que mide la métrica Interaction to Next Paint (INP). Un buen INP significa que una página respondió de manera coherente y confiable a las necesidades del usuario.

Si bien un componente importante de lo que hace que una página se sienta rápida implica la cantidad de JavaScript que ejecutas en respuesta a las interacciones del usuario, lo que los usuarios anticipan son cambios visuales en la interfaz de usuario. Los cambios visuales en una interfaz de usuario son el resultado de varios tipos de trabajo, que a menudo se denominan colectivamente renderización, y este trabajo debe realizarse lo más rápido posible para que la experiencia del usuario se sienta rápida y confiable.

Para escribir páginas que respondan con rapidez a las interacciones de los usuarios, debes comprender cómo el navegador controla HTML, JavaScript y CSS, y asegurarte de que el código que escribas, así como cualquier otro código de terceros que incluyas, se ejecute de la manera más eficiente posible.

Nota sobre las frecuencias de actualización de los dispositivos

La frecuencia de actualización de una pantalla es un aspecto importante que se debe tener en cuenta cuando se crean sitios web que se sienten responsivos a la entrada del usuario.

La mayoría de los dispositivos actuales actualizan sus pantallas 60 veces por segundo. Cada actualización produce el resultado visual que ves y se conoce comúnmente como fotograma. En el siguiente video, se muestra el concepto de marcos:

Fotogramas como se muestran en el panel de rendimiento de las Herramientas para desarrolladores de Chrome. A medida que el cursor se desplaza por la tira de película cerca de la parte superior, se muestra una representación ampliada de cada fotograma dentro de un cuadro de información, mientras que un menú de navegación para dispositivos móviles se anima hasta su estado "abierto".

Si bien la pantalla de un dispositivo siempre se actualiza a una frecuencia constante, es posible que las aplicaciones que se ejecutan en un dispositivo no siempre puedan producir suficientes fotogramas para igualar esa frecuencia de actualización. Por ejemplo, si se está ejecutando una animación o una transición, el navegador debe coincidir con la frecuencia de actualización del dispositivo para producir un fotograma cada vez que se actualiza la pantalla.

Dado que una pantalla típica se actualiza 60 veces por segundo, un cálculo rápido revelaría que el navegador tiene 16.66 milisegundos para producir cada fotograma. Sin embargo, en realidad, el navegador tiene su propia sobrecarga para cada fotograma, por lo que todo tu trabajo debe completarse en 10 milisegundos. Cuando no cumples con este presupuesto, la velocidad de fotogramas disminuye y el contenido de la página se mueve en la pantalla. Este fenómeno suele llamarse jank.

Sin embargo, tus objetivos cambian según el tipo de trabajo que intentas realizar. Cumplir con el umbral de 10 milisegundos es fundamental para las animaciones, en las que los objetos de la pantalla se interpolan en una serie de fotogramas entre dos puntos. Cuando se trata de cambios discretos en la interfaz de usuario, es decir, pasar de un estado a otro sin ningún movimiento intermedio, se recomienda que realices esos cambios en un período que el usuario sienta como instantáneo. En casos como estos, 100 milisegundos es una cifra que se cita con frecuencia, pero el umbral "bueno" de la métrica INP es de 200 milisegundos o menos para adaptarse a una variedad más amplia de dispositivos con diferentes capacidades.

Independientemente de tus objetivos, ya sea producir los muchos fotogramas que requieren las animaciones para evitar los saltos o simplemente producir un cambio visual discreto en la interfaz de usuario lo más rápido posible, comprender cómo funciona la canalización de píxeles del navegador es esencial para tu trabajo.

La canalización de píxeles

Hay cinco áreas principales que debes conocer y tener en cuenta en tu trabajo como desarrollador web. Estas cinco áreas son aquellas sobre las que tienes más control, y cada una representa un punto clave en la canalización de píxeles a pantalla:

Ilustración de la canalización de píxeles completa.

• JavaScript: Por lo general, JavaScript se usa para controlar el trabajo que generará cambios visuales en la interfaz de usuario. Por ejemplo, podría ser la función animate de jQuery, ordenar un conjunto de datos o agregar elementos del DOM a la página. Sin embargo, JavaScript no es estrictamente necesario para activar cambios visuales: las animaciones de CSS, las transiciones de CSS y la API de Web Animations pueden animar el contenido de la página.
• Cálculos de estilo: Es el proceso de determinar qué reglas de CSS se aplican a qué elementos HTML según los selectores coincidentes. Por ejemplo, .headline es un ejemplo de un selector CSS que se aplica a cualquier elemento HTML con un valor de atributo class que contiene una clase de headline. A partir de allí, una vez que se conocen las reglas, se aplican y se calculan los estilos finales para cada elemento.
• Diseño: Una vez que el navegador sabe qué reglas se aplican a un elemento, puede comenzar a calcular la geometría de la página, como el espacio que ocupan los elementos y dónde aparecen en la pantalla. El modelo de diseño de la Web implica que un elemento puede afectar a otros. Por ejemplo, el ancho del elemento <body> suele afectar las dimensiones de sus elementos secundarios en todo el árbol, por lo que el proceso puede ser bastante complejo para el navegador.
• Pintura: La pintura es el proceso de completar píxeles. Implica dibujar texto, colores, imágenes, bordes, sombras y, básicamente, todos los aspectos visuales de los elementos después de que se haya calculado su diseño en la página. Por lo general, el dibujo se realiza en varias superficies, que suelen llamarse capas.
• Compuesto: Dado que las partes de la página se dibujaron potencialmente en varias capas, deben aplicarse a la pantalla en el orden correcto para que la página se renderice como se espera. Esto es muy importante para los elementos que se superponen, ya que un error podría hacer que un elemento aparezca sobre otro de forma incorrecta.

Cada una de estas partes de la canalización de píxeles representa una oportunidad para introducir tirones en las animaciones o retrasar la pintura de fotogramas, incluso para cambios visuales discretos en la interfaz de usuario. Por lo tanto, es importante comprender exactamente qué partes de la canalización activa tu código y, además, investigar si puedes limitar los cambios solo a las partes de la canalización de píxeles que son necesarias para renderizarlos.

Es posible que hayas escuchado el término "rasterizar" junto con "pintar". Esto se debe a que pintar, en realidad, implica dos tareas:

1. Crear una lista de llamadas de dibujo
2. Rellenando los píxeles…

Esto último se denomina "rasterización", por lo que, cada vez que veas registros de pintura en DevTools, debes pensar que incluye la rasterización. En algunas arquitecturas, la creación de la lista de llamadas de dibujo y la rasterización se realizan en diferentes subprocesos, pero eso no está bajo tu control como desarrollador.

No siempre es necesario que toques cada parte de la canalización en cada fotograma. De hecho, hay tres formas en que la canalización normalmente se reproduce para un fotograma determinado cuando realizas un cambio visual, ya sea con JavaScript, CSS o la API de Web Animations.

1. JS/CSS > Estilo > Diseño > Pintura > Compuesto

Si cambias una propiedad de "diseño", como una que cambia la geometría de un elemento, como el ancho, la altura o su posición (como las propiedades de CSS left o top), el navegador debe verificar todos los demás elementos y "reorganizar" la página. Se deberán volver a pintar las áreas afectadas y, luego, se deberán volver a componer los elementos pintados finales.

2. JS/CSS > Estilo > Pintura > Compuesto

Si cambiaste una propiedad de "solo pintura" para un elemento en CSS, por ejemplo, propiedades como background-image, color o box-shadow, el paso de diseño no es necesario para confirmar una actualización visual en la página. Si omites el paso de diseño, cuando sea posible, evitarás un trabajo de diseño potencialmente costoso que, de lo contrario, podría haber contribuido a una latencia significativa en la producción del siguiente fotograma.

3. JS/CSS > Estilo > Compuesto

Si cambias una propiedad que no requiere diseño ni pintura, el navegador puede saltar directamente al paso de composición. Esta es la ruta de acceso más económica y deseable a través de la canalización de píxeles para los puntos de alta presión en el ciclo de vida de una página, como las animaciones o el desplazamiento. Dato curioso: Chromium optimiza el desplazamiento de la página para que se produzca únicamente en el subproceso del compositor siempre que sea posible, lo que significa que, incluso si una página no responde, puedes desplazarte por ella y ver las partes que se dibujaron previamente en la pantalla.

Nota: Si quieres acelerar el proceso para crear animaciones de alto rendimiento, lee Usa solo propiedades del compositor y administra el recuento de capas.

El rendimiento web es el arte de evitar el trabajo y, al mismo tiempo, aumentar la eficiencia de cualquier trabajo necesario tanto como sea posible. En muchos casos, se trata de trabajar con el navegador, no en su contra. Vale la pena tener en cuenta que el trabajo que se mostró anteriormente en la canalización difiere en términos de costo de procesamiento; algunas tareas son inherentemente más costosas que otras.

Analicemos las diferentes partes de la canalización. Analizaremos los problemas habituales, así como la forma de diagnosticarlos y corregirlos.

Optimizaciones de renderización del navegador

El rendimiento es importante para los usuarios y, para crear buenas experiencias del usuario, los desarrolladores web deben crear sitios web que reaccionen con rapidez a las interacciones de los usuarios y se rendericen sin problemas. El experto en rendimiento Paul Lewis está aquí para ayudarte a eliminar los tirones y crear apps web que mantengan un rendimiento de 60 fotogramas por segundo. Terminarás este curso con las herramientas que necesitas para generar perfiles de apps y, además, identificar las causas del rendimiento de renderización subóptimo. También explorarás la canalización de renderización del navegador y descubrirás patrones que facilitan la creación de sitios web rápidos que los usuarios disfrutarán usar.

Este es un curso gratuito que se ofrece a través de Udacity y que puedes realizar en cualquier momento.