Los usuarios notan si los sitios y las apps no se ejecutan bien, por lo que optimizar el rendimiento de la renderización es fundamental.
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 rápidamente, sino que también deben 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 Interacción a la siguiente pintura (INP). Un buen INP significa que una página respondió de manera coherente y confiable a las necesidades del usuario.
Si bien uno de los componentes principales de lo que hace que una página resulte ágil implica la cantidad de JavaScript que ejecutas en respuesta a las interacciones de los usuarios, lo que estos 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 conocen en conjunto como renderización, y este trabajo debe realizarse lo más rápido posible para que la experiencia del usuario resulte rápida y confiable.
Para escribir páginas que respondan rápidamente a las interacciones del usuario, debes comprender cómo el navegador maneja HTML, JavaScript y CSS, y asegurarte de que el código que escribas, al igual que cualquier otro código de terceros que incluyas, se ejecute de la manera más eficiente posible.
Información sobre las frecuencias de actualización del dispositivo
En la actualidad, la mayoría de los dispositivos actualizan sus pantallas 60 veces por segundo. Cada actualización produce la salida visual que ves y, por lo general, se conoce como marco. En el siguiente video, se demuestra el concepto de fotogramas:
Si bien la pantalla de un dispositivo se actualiza siempre a una frecuencia coherente, es posible que las aplicaciones que se ejecutan en él no siempre produzcan suficientes fotogramas para que coincidan con esa frecuencia de actualización. Por ejemplo, si hay una animación o una transición en ejecución, el navegador debe coincidir con la frecuencia de actualización del dispositivo para producir un fotograma por 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 el trabajo se debe completar en 10 milisegundos. Si 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 se suele denominar bloqueo.
Sin embargo, tus objetivos cambian según el tipo de trabajo que intentes realizar. Alcanzar 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, que se trasladan de un estado a otro sin ningún movimiento intermedio), te recomendamos que realices estos cambios en un plazo que siente instantáneo para el usuario. En casos como estos, 100 milisegundos es una cifra que se suele citar, 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.
Sin importar cuáles sean tus objetivos (ya sea producir la gran cantidad de fotogramas que requieren las animaciones para evitar bloqueos o simplemente producir un cambio visual discreto en la interfaz de usuario lo más rápido posible), es esencial para tu trabajo comprender cómo funciona la canalización de píxeles del navegador.
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 que tienes más control, y cada una de ellas representa un punto clave en la canalización de píxeles hacia la pantalla:
- JavaScript: Por lo general, JavaScript se usa para administrar el trabajo que genera 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 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 para averiguar qué reglas de CSS se aplican a qué elementos HTML en función de los selectores coincidentes. Por ejemplo,
.headlinees un ejemplo de un selector CSS que se aplica a cualquier elemento HTML con un valor de atributoclassque contenga 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, por ejemplo, cuánto espacio ocupan los elementos y dónde aparecen en la pantalla. El modelo de diseño de la Web significa
que un elemento puede afectar a los demás. Por ejemplo, el ancho del elemento
<body>generalmente afecta las dimensiones de sus elementos secundarios hacia arriba y hacia abajo en el árbol, por lo que el proceso puede implicar bastante al navegador. - Pintura: La pintura es el proceso por el cual se completan los píxeles. Implica dibujar texto, colores, imágenes, bordes, sombras y, básicamente, todos los aspectos visuales de los elementos después de calcular su diseño en la página. Por lo general, el dibujo se realiza en varias superficies, denominadas capas.
- Composición: dado que es posible que las partes de la página se hayan dibujado en varias capas, se deben aplicar 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 se activan con tu código y, también, investigar si puedes limitar los cambios solo a las partes de la canalización de píxeles que sean necesarias para renderizarlos.
Es posible que hayas escuchado el término "rasterizar" junto a "pintar". Esto se debe a que la pintura consiste en dos tareas:
- Crear una lista de llamadas de dibujo
- Relleno de los píxeles
La última opción se denomina "rasterización", por lo que, cada vez que veas registros de pintura en Herramientas para desarrolladores, debes considerarlos como una rasterización. En algunas arquitecturas, la creación de la lista de llamadas de dibujo y la rasterización se realiza en diferentes subprocesos, pero eso no está bajo tu control como desarrollador.
No siempre tocarás todas las partes de la canalización en cada fotograma. De hecho, la canalización se desarrolla normalmente de tres maneras 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", por ejemplo, una que modifica 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 "reprocesar" la página. Deberás volver a pintar las áreas afectadas, y los elementos pintados finales deberán volver a combinarse.
2. JS / CSS > Estilo > Pintura > Composición
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 (siempre que sea posible), evitas trabajos de diseño potencialmente costosos que, de lo contrario, podrían 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 diseño ni pintura, el navegador puede saltar directamente al paso de composición. Esta es la ruta más económica y deseable a través de la canalización de píxeles para puntos de presión alta 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 solo se muestre en el subproceso 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 dibujó anteriormente en la pantalla.
El rendimiento web es el arte de evitar trabajo, al mismo tiempo que aumenta la eficiencia de cualquier trabajo necesario tanto como sea posible. En muchos casos, se trata de trabajar con el navegador y no contra él. Vale la pena tener en cuenta que el trabajo que se mostró antes en la canalización difiere en términos de costo de procesamiento; algunas tareas son intrínsecamente más costosas que otras.
Analicemos las diferentes partes de la canalización. Analizaremos los problemas habituales, así como la forma de diagnosticarlos y solucionarlos.
Optimizaciones de la 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 de forma fluida. El experto en rendimiento Paul Lewis está aquí para ayudarte a destruir los bloqueos 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, también, identificar las causas del rendimiento de renderización deficiente. 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 a los usuarios les encantará usar.
Este es un curso gratuito que se ofrece a través de Udacity y puedes realizarlo en cualquier momento.