¿@import en CSS da como resultado solicitudes http adicionales?

Tengo un sitio de comercio electrónico que tiene alrededor de 8 archivos CSS vinculados desde el encabezado, lo que resulta en 8 solicitudes de http por separado para el servidor. Consolidé todos los archivos CSS en uno grande, lo que resultó en un archivo de 67kb (!) - para reducir las solicitudes http a 1 para nuestros archivos CSS.¿@import en CSS da como resultado solicitudes http adicionales?

Estoy encontrando este tamaño un archivo CSS un poco inmanejable a la luz del hecho de que estoy realizando actualizaciones en el sitio constantemente. Mi preocupación es que mis usuarios pueden verme en medio de la actualización y ver una página sin estilo cuando se mueven de una página a otra, b/c 67kb aún tarda unos buenos 2-3 segundos antes de que se coloque con éxito en el servidor remoto a través de FTP .

Mi pregunta es: el uso de @import dentro de este gran archivo CSS para dividir los archivos en tamaños más pequeños y manejables (dentro de ese archivo CSS) nos lleva de vuelta a las 8 solicitudes http originales cuando se cargan las páginas ? ¿O las @imports en CSS se comportan de manera diferente de alguna manera?

Fuente

2009-05-06 Mo Boho

Sí, volverá a una solicitud por cada hoja de estilo mientras usa @import.

Su mejor opción es minimizar y consolidar el CSS en un único archivo para su implementación. Pero aún puede desarrollarse con archivos separados.

Fuente

2009-05-06 20:57:34

gracias, lo temí tanto. :( intenté minificar, pero rompió el sitio por cualquier razón. Tendré que darle otra oportunidad y tal vez mirar POR QUÉ se está deshaciendo. Muchas gracias. –

consolidar en un solo archivo CSS es probable que vaya a dar Si obtiene un beneficio mayor (1 solicitud HTTP) que reducir algunos bytes con minificación, me concentraría primero en el archivo único para el despliegue. –

Cuando dice "concentrarse", ¿quiere decir reducir el "abotagamiento" en el CSS? Comprendo bastante bien el CSS y los accesos directos para reducir el exceso de código, así que ya he "recortado" un montón de grasa. ¿Hay algo más que pueda significar? –

El navegador tiene que obtener los datos de alguna manera, entonces ¿cómo podría no usar otra solicitud http? ;-)

También es posible que se beneficie del almacenamiento en caché del navegador si solo está cambiando un archivo y los otros siete no han cambiado.

Puede intentar olfatear una conexión entre un cliente y el servidor y ver lo que solicita.

Fuente

2009-05-06 20:59:27

gracias, Mike. –

Sí, se emite una solicitud por separado para cada declaración @import.

Puede verificar esto con una prueba rápida; escriba un fragmento de HTML, incluido un archivo CSS que importe un segundo archivo CSS. Al ver los resultados en algo así como el panel de red de Firebug, se muestran dos solicitudes separadas para cada archivo CSS. Esa es la prueba que utilicé para confirmar esta respuesta.

Fuente

2009-05-06 21:02:07 Rob

Las importaciones de CSS no se manejan de forma diferente a cualquier otro "incluir" en una página, como una referencia a un script de JavaScript externo. Sin embargo, el almacenamiento en caché del navegador debe hacer que esto no sea un problema, excepto para el primer acceso a su sitio.

Fuente

2009-05-06 21:03:03 Eddie

sí - i Creo que voy a volver a dividirlos en archivos más manejables. :) es cierto después de la carga de la primera página, no debería ser una preocupación. –

Si tiene un archivo CSS de 67 Kb, hay algo extraño. Recuerde que la C en CSS es para CASCADING, y esto significa que no tiene que definir en cada clase todas las propiedades de cada una de las etiquetas involucradas en la clase.

Por ejemplo, si se define un < DIV id = "maincontainer" > como un contenedor se puede definir una clase a la que

#maincontainer {font-face:Arial,helvetica,sans;}

Esto significa que si se crea una sub-clase de ella para la etiqueta <P> como

#maincontainer P {color:darkgray;}

Todos los <P> etiquetas dentro del DIV maincontainer utilizará la fuente Arial, Helvetica, Sanz.

También intente crear archivos CSS para ver cómo se usan en las páginas. Un archivo CSS único para todo el sitio hace que se carguen muchas clases que no se usarán en algunas páginas. Divide y conquistaras.

Fuente

2009-05-06 21:11:03 backslash17

lo había pensado; el único problema es que el sitio está basado en plantillas y no es tan fácil personalizarlo sección por sección. Pero como Eddie y otros han señalado, después de la primera carga, el caché del navegador debe encargarse del resto. –

También puede crear campos dinámicos de CSS. Significa archivos CSS creados en el lado del servidor personalizados para cada parte de su aplicación. – backslash17

Puede evitar las solicitudes HTTP adicionales combinando las hojas de estilo con .htaccess. La técnica se explica en el HTML5 Boilerplate .htaccess. Funciona así:

En .htaccess:

<FilesMatch "\.combined\.(js|css)$"> 
    Options +Includes 
    SetOutputFilter INCLUDES 
</FilesMatch>

En style.combined.css:

<!--#include file="reset.css"--> 
<!--#include file="style.css"-->

Se puede usar esta combinar Js (o cualquier otra extensión que usted pone en el paréntesis.)

La documentación para Opciones + Incluye es here.

Fuente

2011-06-26 23:57:03 ryanve

¿@import en CSS da como resultado solicitudes http adicionales?

Respuesta

Cuestiones relacionadas