Los usuarios notan si los sitios y las apps no funcionan correctamente, por lo que es fundamental optimizar el rendimiento de la renderización.
Los usuarios de la web actual esperan que las páginas que visitan sean interactivas y sin inconvenientes, y es allí donde debe enfocar cada vez más su tiempo y esfuerzo. Las páginas no solo deben cargarse rápido, sino también 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 forma coherente y confiable a los comentarios del usuario. necesidades empresariales.
Mientras que 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 de los usuarios, qué son anticipar son cambios visuales en la interfaz de usuario. Cambios visuales para un usuario son el resultado de varios tipos de trabajo, a menudo denominados colectivamente renderización. Esta tarea debe realizarse lo más rápido posible para que para que la experiencia del usuario sea rápida y confiable.
Para escribir páginas que respondan rápidamente a las interacciones de los usuarios, debes comprender cómo el navegador maneja HTML, JavaScript y CSS, y garantizar que el el código que escribas, así como cualquier otro código de terceros que incluyas, se ejecutará como con la mayor eficiencia posible.
Nota 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 el resultado visual que ves y se conoce comúnmente como marco. En la siguiente video, se demuestra el concepto de cuadros:
Si bien la pantalla de un dispositivo siempre se actualiza a una velocidad constante, las aplicaciones que que se ejecutan en un dispositivo no siempre puedan producir suficientes fotogramas para coincidan con esa frecuencia de actualización. Por ejemplo, si hay una animación o transición en ejecución, el navegador debe coincidir con la frecuencia de actualización del dispositivo para generar una marco para cada vez que la pantalla se actualice.
Dado que una pantalla típica se actualiza 60 veces por segundo, algunos cálculos 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 tu trabajo debe completarse en 10 milisegundos. Cuando no logras no cumplan con este presupuesto, la velocidad de fotogramas disminuye y el contenido de la página se sacude en la pantalla. Esta se denomina bloqueo.
Sin embargo, tus objetivos cambian según el tipo de trabajo que intentas hacer. Es fundamental alcanzar el umbral de 10 milisegundos para las animaciones, en las que de objetos de la pantalla se interpolan a través de una serie de marcos entre dos puntos. Cuando se trata de cambios discretos en la interfaz de usuario, es decir, y avanzar de un estado a otro sin ningún movimiento intermedio, recomendó realizar esos cambios en un período que se sienta instantáneo del usuario. En casos como estos, 100 milisegundos es una cifra muy común, pero de la métrica INP es “bueno” es de 200 milisegundos o menos para se adaptan a una gama más amplia de dispositivos con diferentes capacidades.
Cualesquiera que sean tus objetivos, ya sea producir tantos fotogramas como los que que requieren para evitar bloqueos, o solo producir un cambio visual discreto en la interfaz de usuario lo más rápido posible: comprender cómo funciona el modo es esencial para tu trabajo.
La canalización de píxeles
Hay cinco áreas principales que debes conocer y tener en cuenta en tu trabajar como desarrollador web. Estas cinco áreas son las que tienes y cada una representa un punto clave en la canalización de píxeles hacia la pantalla:
- JavaScript: JavaScript suele usarse para procesar el trabajo que generará
en cambios visuales a la interfaz de usuario. Por ejemplo, podría ser el flujo de trabajo
animate, 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: CSS animaciones, transiciones de CSS y la API de Web Animations pueden hacer lo siguiente: y animar el contenido de la página. - Cálculos de estilo: Este es el proceso para determinar qué reglas de CSS
se aplican a qué elementos HTML según los selectores coincidentes. 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. Desde una vez que se conocen las reglas, se aplican, y los estilos finales de cada de ese tipo de elemento. - Diseño: una vez que el navegador sabe qué reglas se aplican a un elemento, puede
empezar a calcular la geometría de la página, por ejemplo, cuántos elementos de espacio
ocupan y dónde aparecen en la pantalla. El modelo de diseño de la web significa
que un elemento puede afectar a otros. Por ejemplo, el ancho de
<body>elemento suele afectar las dimensiones de sus elementos secundarios hasta arriba el árbol, por lo que el proceso puede involucrar bastante al navegador. - Pintura: La pintura es el proceso de rellenar píxeles. Implica dibujar texto, colores, imágenes, bordes, sombras y, básicamente, todas las imágenes 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, a menudo llamadas capas.
- Compuesto: Dado que es posible que las partes de la página se dibujen en varias capas, deben aplicarse a la pantalla en el orden correcto para que que la página se renderice como se espera. Esto es especialmente importante para los elementos que se superponen con otro, ya que un error podría hacer que un elemento aparezca por encima de otro incorrectamente.
Cada una de estas partes de la canalización de píxeles representa una oportunidad para presentar bloquear animaciones o retrasar la pintura de los fotogramas, incluso para cambios en la interfaz de usuario. Por eso, es importante entender exactamente qué partes de la canalización activa tu código y, luego, investigar si puedes limitar los cambios solo a las partes de la canalización de píxeles necesarias representarlos.
Es posible que hayas escuchado el término “rasterizar” que se usa junto con "Painter". Esta es que, en realidad, la pintura consiste en dos tareas:
- Crear una lista de llamadas de dibujo
- Rellena los píxeles.
Este último se llama “rasterización”, por lo que cada vez que veas registros de pintura en Herramientas para desarrolladores, debes pensar que incluye la rasterización. En algunos arquitecturas, la creación de la lista de llamadas de dibujo y la rasterización en diferentes subprocesos, pero eso no está bajo tu control como desarrollador.
No siempre afectarás todas las partes de la canalización en cada fotograma. De hecho, la canalización funciona normalmente de tres maneras en una canalización determinada marco cuando realizas un cambio visual, ya sea con JavaScript, CSS o la Web API de Animations.
1. JS / CSS > Estilo > Diseño > Pintura > Compuesto
Si cambias un “diseño” como una que cambia la propiedad de un elemento,
geometría, como el ancho, la altura o su posición (como el CSS left o top)
propiedades), el navegador debe comprobar el resto de los elementos y realizar un "ajuste automático" el
. Se deberá volver a pintar las áreas afectadas y se deberá pintar la versión final
los elementos se deberán volver a componer.
2. JS / CSS > Estilo > Pintura > Compuesto
Si cambiaste la opción 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. Omitir el diseño
paso, siempre que sea posible, para evitar el trabajo de diseño potencialmente costoso que podría tener
de lo contrario, contribuyó con una latencia significativa para producir el siguiente fotograma.
3. JS / CSS > Estilo > Compuesto
Si cambias una propiedad que no requiere diseño ni pintura, el navegador puedes ir directamente al paso de composición. Es el producto más económico una ruta conveniente a través de la canalización de píxeles para los puntos de alta presión en una ciclo de vida de una página, como animaciones o desplazamiento. Dato curioso: Chromium optimiza desplazamiento de la página para que aparezca únicamente en el subproceso del compositor, donde posible. Esto significa que, aunque una página no responda, podrás desplazarte por la página y ver las partes que se dibujó anteriormente en la pantalla
El rendimiento web es el arte de evitar trabajo y, al mismo tiempo, aumentar la eficiencia cualquier trabajo necesario tanto como sea posible. En muchos casos, se trata de trabajar con el navegador, no contra él. Vale la pena tener en cuenta que el trabajo que se mostró anteriormente en la canalización difiere en cuanto al costo de procesamiento. algunos son intrínsecamente más costosas que otras.
Analicemos las distintas partes de la canalización. Echaremos un vistazo sobre los problemas habituales, y cómo diagnosticarlos y solucionarlos.
Optimizaciones de la renderización del navegador
El rendimiento es importante para los usuarios, y para crear buenas experiencias, los desarrolladores web necesitan crear sitios web que reaccionen rápidamente a las interacciones del usuario y sin problemas. El experto en rendimiento, Paul Lewis, está aquí para ayudarte a destruir los bloqueos y crear aplicaciones web que mantengan un rendimiento de 60 fotogramas por segundo. Saldrás este curso con las herramientas necesarias para generar perfiles de apps e identificar las causas rendimiento de renderización deficiente Explorarás la renderización del navegador canalización y descubrir patrones que faciliten la creación de sitios web rápidos les encantará a los usuarios.
Este es un curso gratuito que se ofrece a través de Udacity y puedes realizarlo en cualquier momento.