Fecha de publicación: 31 de marzo de 2014
Por defecto, la CSS se trata como un recurso que bloquea la representación. navegador no renderizará ningún contenido procesado hasta que se haya construido. Asegúrate de que tu CSS sea simple, proporciónalo tan rápido como y usar tipos de medios y consultas para desbloquear la renderización.
En la construcción del árbol de renderización, vimos que la ruta de renderización crítica requiere el DOM y el CSSOM para construir el árbol de renderización. Esto genera una importante consecuencia para el rendimiento: tanto HTML como CSS son recursos que bloquean la representación. El HTML es obvio, ya que sin el DOM no tendríamos nada para renderizar, pero el requisito de CSS puede ser menos obvio. ¿Qué ocurriría si intentáramos renderizar una página típica sin bloquear la renderización en CSS?
Resumen
- De forma predeterminada, la CSS se trata como un recurso que bloquea la representación.
- Los tipos de medios y las consultas de medios nos permiten marcar algunos recursos CSS como no bloqueadores de la renderización.
- El navegador descarga todos los recursos CSS, independientemente del comportamiento de bloqueo o no bloqueo.
El ejemplo anterior, en el que se muestra el sitio web del New York Times con y sin CSS, demuestra la razón por la cual se bloquea la renderización hasta que CSS esté disponible; sin CSS, la página no se puede usar. La experiencia de la derecha a menudo se conoce como destello de contenido sin estilo (FOUC). El navegador bloquea la representación hasta contar con el DOM y el CSSOM.
CSS es un recurso que bloquea la renderización. Proporciónala al cliente lo más rápido posible para optimizar el tiempo de la primera representación.
Sin embargo, ¿qué ocurre si hay algunos estilos de CSS que solo se usan en ciertas condiciones (por ejemplo, cuando se imprime la página o cuando se proyecta en un monitor grande)? Sería bueno no tener que bloquear la renderización en estos recursos.
“Tipos de medios” de CSS y “consultas de medios” nos permiten abordar estos casos de uso:
<link href="style.css" rel="stylesheet" />
<link href="print.css" rel="stylesheet" media="print" />
<link href="other.css" rel="stylesheet" media="(min-width: 40em)" />
Una consulta de medios consta de un tipo de medio y cero o más expresiones que verifican las condiciones de funciones multimedia específicas. Por ejemplo, nuestra primera declaración de la hoja de estilo no proporciona tipos ni consultas de medios. Por ello, se aplicará en todos los casos; es decir, siempre bloqueará la representación. Por otro lado, la segunda declaración de la hoja de estilo se aplica solo cuando se imprime el contenido; quizás quieras reorganizar el diseño, cambiar las fuentes y otras consideraciones de diseño importantes para la impresión. Por lo tanto, esta declaración de la hoja de estilo no necesita bloquear la representación de la página cuando se carga por primera vez. Por último, la última declaración de la hoja de estilo proporciona una “consulta de medios” que ejecuta el navegador: si las condiciones coinciden, el navegador bloquea la representación hasta que la hoja de estilo se haya descargado y procesado.
Con las consultas de medios, podemos adaptar nuestra presentación a casos de uso específicos, como visualización frente a impresión, y también a condiciones dinámicas, como cambios en la orientación de la pantalla, cambios de tamaño de eventos y mucho más. Cuando declares los recursos de tu hoja de estilo, presta mucha atención al tipo de medio y a las búsquedas. afectan en gran medida el rendimiento de la ruta de renderización crítica.
Ten en cuenta estos ejemplos:
<link href="style.css" rel="stylesheet" />
<link href="style.css" rel="stylesheet" media="all" />
<link href="portrait.css" rel="stylesheet" media="orientation:portrait" />
<link href="print.css" rel="stylesheet" media="print" />
- La primera declaración bloquea la representación y coincide en todas las condiciones.
- La segunda declaración también bloquea la renderización:
"all"es el tipo predeterminado, por lo que, si no especificas un tipo, se establece implícitamente en"all". Por lo tanto, la primera y la segunda declaración son equivalentes. - La tercera declaración tiene una consulta de medios dinámica, que se evalúa cuando se carga la página. Según la orientación del dispositivo mientras se carga la página, es posible que
portrait.cssbloquee la renderización. - La última declaración solo se aplica durante la impresión de la página (
"print"), por lo que no bloquea la renderización cuando la página se carga por primera vez en el navegador.
Por último, ten en cuenta que “bloqueo de la renderización” solo se refiere a si el navegador debe contener la renderización inicial de la página en ese recurso. En cualquier caso, el navegador descarga el recurso CSS, pero con una prioridad más baja para los recursos que no bloquean.