Orden de carga de archivos CSS y JavaScript externos

Tengo una aplicación de terceros que carga muchos archivos css y javascript, y ahora quiero optimizar esto al concatenar todos los javascripts en un archivo, comprimido por el yuicompresor, pero. .. cuando tenemos una mezcla como:Orden de carga de archivos CSS y JavaScript externos

<script type="text/javascript" src="script1.js"></script> 
<script type="text/javascript" src="script2.js"></script> 
<link rel="stylesheet" href="style1.css" type="text/css" /> 
<script type="text/javascript" src="script3.js"></script> 
<script type="text/javascript" src="script4.js"></script>

¿Importa que haya un CSS en el medio aquí? ¿Debería concatinate y yucompress los 4 javascripts y cargarlos antes del CSS o después?

Fuente

2010-11-16 janfrode

-1

No debería importar de ninguna manera.

Fuente

2010-11-16 20:32:44

No importa, aunque si la carga lleva un tiempo, el usuario puede ver su apariencia cambiar de página y preguntarse por qué. Pondría los archivos CSS primero para tener las definiciones de estilo en su lugar antes de cualquier manipulación DOM, lo más probable es que minimice el cambio visible a medida que la página se carga, pero en realidad no importa al final.

Fuente

2010-11-16 20:32:59 palswim

Depende. Si todos los JS solo funcionan en DOM listo, el orden no es importante. Sin embargo, si hay algún javascript en línea que cambie el estilo CSS de los elementos DOM, entonces tendrá problemas.

Más prácticamente, probablemente debas poner el CSS primero para que haya menos tiempo donde el usuario necesita experimentar contenido sin estilo.

Fuente

2010-11-16 20:35:02

Si las secuencias de comandos se ejecutan en DOM listo, es posible que desee pegarlas todas antes de la etiqueta ''. Es un ahorro, pero cada segundo cuenta. – zzzzBov

+1 por impacto de la manipulación del estilo de JavaScript. P.ej. si JavasScript que altera el posicionamiento de CSS se ejecuta antes de que se haya cargado un archivo CSS dependiente, podría producirse una representación inesperada. Por lo tanto, los archivos CSS deben cargarse primero. – mtmacdonald

Echa un vistazo Yahoo's Best Practices for Speeding Up Your Web Site, recomiendan cargar primero su CSS (preferiblemente en el encabezado), y su js último (después de todo el contenido del cuerpo). Google's best practices también recomienda cargar primero CSS.

Fuente

2010-11-16 21:04:09

Las mejores prácticas de Google ya no tienen esta recomendación por algún motivo, pero la Auditoría de Chrome 45 aún señala "Optimizar el orden de estilos y scripts .Los siguientes archivos CSS externos se incluyeron después de un archivo JavaScript externo en el encabezado del documento. los archivos se descargan en paralelo, siempre incluye CSS externo antes de JavaScript externo ". –

Orden de carga de archivos CSS y JavaScript externos

Respuesta

Cuestiones relacionadas