Los usuarios notan si los sitios y las apps no funcionan bien, por lo que es fundamental optimizar el rendimiento de la renderización.
Los usuarios de la Web actual esperan que las páginas que visiten sean interactivas y fluidas, y es ahí donde debes enfocar cada vez más tu tiempo y esfuerzo. Las páginas no solo deben cargarse rápidamente, sino que también deben responder rápidamente 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 ágil implica la cantidad de JavaScript que ejecutas en respuesta a las interacciones del usuario, lo que los usuarios anticipan son los 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 sea rápida y confiable.
Para escribir páginas que respondan rápidamente a las interacciones del usuario, 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 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 fotogramas:
Si bien la pantalla de un dispositivo siempre se actualiza a una velocidad constante, es posible que las aplicaciones que se ejecutan en un dispositivo no siempre puedan producir suficientes fotogramas para coincidir con esa velocidad de actualización. Por ejemplo, si se está ejecutando una animación o 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, algunos cálculos rápidos revelarían 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 sacude en la pantalla. Este fenómeno suele denominarse bloqueo.
Sin embargo, tus objetivos cambian según el tipo de trabajo que intentas realizar. Lograr 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 parezca instantáneo para el usuario. 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 admitir 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 la inestabilidad 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:
- JavaScript: Por lo general, se usa JavaScript para controlar el trabajo que generará cambios visuales en la interfaz de usuario. Por ejemplo, podría ser la función
animatede jQuery, ordenar un conjunto de datos o agregar elementos 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 en función de los selectores que coinciden. Por ejemplo,
.headlinees un ejemplo de un selector CSS que se aplica a cualquier elemento HTML con un valor de atributoclassque contiene una clase deheadline. A partir de ahí, una vez que se conocen las reglas, se aplican y se calculan los diseños finales de 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 cuánto espacio 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. - Pintar: Pintar es el proceso de rellenar píxeles. Implica dibujar texto, colores, imágenes, bordes, sombras y, en esencia, todos los aspectos visuales de los elementos después de que se calculó su diseño en la página. Por lo general, el dibujo se realiza en varias superficies, que a menudo se denominan 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 bloqueos 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, luego, investigar si puedes limitar tus 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 es porque pintar es, en realidad, dos tareas:
- Creación de una lista de llamadas de dibujo
- Rellenar los píxeles
Este último se denomina "rasterización", por lo que, cada vez que veas registros de pintura en DevTools, debes considerar 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 subprocesos diferentes, pero eso no está bajo tu control como desarrollador.
No siempre es necesario que toques todas las partes de la canalización en cada fotograma. De hecho, existen tres formas en las 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 CSS left o top), el navegador debe verificar todos los demás elementos y “refluir” la página. Se deberán volver a pintar las áreas afectadas, y los elementos pintados finales se deberán volver a combinar.
2. JS / CSS > Estilo > Pintura > Compuesto
Si cambiaste una propiedad "solo pintura" para un elemento en CSS, por ejemplo, propiedades como background-image, color o box-shadow, no es necesario el paso de diseño para confirmar una actualización visual en la página. Si omites el paso de diseño, siempre que sea posible, evitas un trabajo de diseño potencialmente costoso que, de otro modo, podría haber contribuido con una latencia significativa en la producción del siguiente fotograma.
3. JS / CSS > Estilo > Compuesto
Si cambias una propiedad que no requiere ni diseño ni pintura, el navegador puede ir directamente al paso de composición. Esta es la ruta más económica y deseada 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 animaciones o desplazamiento. Dato curioso: Chromium optimiza el desplazamiento de la página para que se produzca solo en el subproceso del compositor cuando sea posible, lo que significa que, incluso si una página no responde, puedes desplazarte por ella y ver partes que se dibujaron anteriormente en la pantalla.
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 y cómo diagnosticarlos y solucionarlos.
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 rápidamente a las interacciones de los usuarios y se rendericen sin problemas. El experto en rendimiento Paul Lewis está aquí para ayudarte a eliminar los bloqueos y crear apps web que mantengan un rendimiento de 60 fotogramas por segundo. Cuando finalices este curso, tendrás las herramientas que necesitas para generar perfiles de apps y, además, identificar las causas de un rendimiento de renderización poco óptimo. También explorarás la canalización de renderización del navegador y descubrirás patrones que facilitan la compilació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 puedes realizarlo en cualquier momento.