Fecha de publicación: 31 de marzo de 2014
De forma predeterminada, CSS se trata como un recurso que bloquea el procesamiento, lo que significa que el navegador no procesará ningún contenido procesado hasta que se construya el CSSOM. Asegúrate de mantener tu CSS simple, entregarlo lo más rápido posible y usar tipos y consultas de medios para desbloquear el procesamiento.
En la construcción del árbol de procesamiento, vimos que la ruta de acceso de procesamiento crítica requiere el DOM y el CSSOM para construir el árbol de procesamiento. Esto crea una implicación de rendimiento importante: HTML y CSS son recursos que bloquean el procesamiento. El HTML es obvio, ya que sin el DOM no tendríamos nada que procesar, pero el requisito de CSS puede ser menos obvio. ¿Qué sucedería si intentamos procesar una página típica sin bloquear el procesamiento en CSS?
Resumen
- De forma predeterminada, CSS se trata como un recurso que bloquea el procesamiento.
- Los tipos y las consultas de medios nos permiten marcar algunos recursos CSS como no bloqueadores de procesamiento.
- El navegador descarga todos los recursos CSS, independientemente del comportamiento de bloqueo o no bloqueo.
En el ejemplo anterior, que muestra el sitio web de The New York Times con y sin CSS, se demuestra por qué se bloquea el procesamiento hasta que CSS está disponible. Sin CSS, la página es relativamente inutilizable. La experiencia de la derecha suele denominarse Flash de contenido sin estilo (FOUC). El navegador bloquea el procesamiento hasta que tiene el DOM y el CSSOM.
CSS es un recurso que bloquea el procesamiento. Haz que llegue al cliente lo antes posible para optimizar el tiempo hasta el primer procesamiento.
Sin embargo, ¿qué sucede si tenemos algunos estilos CSS que solo se usan en determinadas condiciones, por ejemplo, cuando se imprime la página o se proyecta en un monitor grande? Sería bueno que no tuviéramos que bloquear el procesamiento en estos recursos.
Los "tipos de medios" y las "consultas de medios" de CSS 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 particulares. Por ejemplo, nuestra primera declaración de hoja de estilo no proporciona un tipo ni una consulta de medios, por lo que se aplica en todos los casos; es decir, siempre bloquea el procesamiento. Por otro lado, la segunda declaración de hoja de estilo solo se aplica cuando se imprime el contenido. Tal vez 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 hoja de estilo no necesita bloquear el procesamiento de la página cuando se carga por primera vez. Por último, la última declaración de hoja de estilo proporciona una "consulta de medios", que ejecuta el navegador: si las condiciones coinciden, el navegador bloquea el procesamiento hasta que se descarga y procesa la hoja de estilo.
Con las consultas de medios, podemos adaptar nuestra presentación a casos de uso específicos, como la visualización frente a la impresión, y también a condiciones dinámicas, como cambios en la orientación de la pantalla, eventos de cambio de tamaño y mucho más. Cuando declares tus recursos de hoja de estilo, presta mucha atención al tipo y las consultas de medios, ya que afectan en gran medida el rendimiento de la ruta de acceso de procesamiento 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 el procesamiento y coincide en todas las condiciones.
- La segunda declaración también bloquea el procesamiento:
"all"es el tipo predeterminado, por lo que, si no especificas un tipo, se establece de forma implícita 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,
portrait.csspuede bloquear o no el procesamiento. - La última declaración solo se aplica cuando se imprime la página (
"print"), por lo que no bloquea el procesamiento cuando se carga por primera vez en el navegador.
Por último, ten en cuenta que "bloqueo de procesamiento" solo se refiere a si el navegador debe mantener el procesamiento inicial de la página en ese recurso. En cualquier caso, el navegador aún descarga el recurso CSS, aunque con una prioridad más baja para los recursos que no bloquean el procesamiento.