Múltiples archivos javascript/css: ¿mejores prácticas?

Question

Tengo alrededor de 7 archivos Javascript ahora (gracias a varios plugins jQuery) y de 4 a 5 archivos CSS. Tengo curiosidad por saber cuál es la mejor práctica para lidiar con estos, incluyendo en qué parte del documento se deben cargar. YSlow me dice que los archivos Javascript deben estar, cuando sea posible, incluidos al final. El final del cuerpo? Menciona que el delímetro parece ser si escriben contenido. Todos mis archivos Javascript son funciones y código de jQuery (todo listo cuando está listo()) así que debería estar bien.

¿Debo incluir un CSS y un archivo Javascript y tener esos incluir el resto? ¿Debo concatenar todos mis archivos en uno? ¿Debería poner Javascript mis etiquetas al final de mi documento?

Editar: FWIW Sí, esto es PHP.

Answer 1

Sugeriría usar PHP Minify, que le permite crear una única solicitud HTTP para un grupo de archivos JS o CSS. Minify también maneja los encabezados GZipping, Compression y HTTP para el almacenamiento en memoria caché del lado del cliente.

Editar: Minify también le permitirá configurar la solicitud para que en diferentes páginas pueda incluir diferentes archivos. Por ejemplo, un conjunto principal de archivos JS junto con código JS personalizado en ciertas páginas o solo los archivos JS básicos en otras páginas.

Mientras está en desarrollo, incluya todos los archivos como lo haría normalmente y luego, cuando esté más cerca de cambiar a producción, ejecute minify y una todos los archivos CSS y JS en una única solicitud HTTP. Es muy fácil de instalar y trabajar.

También, sí, los archivos CSS se deben establecer en el encabezado y los archivos JS en la parte inferior, ya que los archivos JS pueden escribir en su página y pueden causar problemas masivos de tiempo de espera.

Así es como se debe incluir sus archivos JS:

</div> <!-- Closing Footer Div --> 
<script type="application/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.min.js"></script> 
</body> 
</html> 

Editar: También puede utilizar Cuzillion para ver cómo su página debe ser configurado.

Answer 2

No ha dicho explícitamente que usted tiene acceso a una solución de servidor, pero suponiendo que hagas, siempre he ido con un método que implica el uso de PHP para hacer lo siguiente:

jQuery. js.php:

<?php 
$jquery = ($_GET['r']) ? explode(',', $_GET['r']) : array('core', 'effects', 'browser', 'cookies', 'center', 'shuffle', 'filestyle', 'metadata'); 
foreach($jquery as $file) 
{ 
echo file_get_contents('jquery.' . $file . '.js'); 
} 
?> 

Con el código anterior en su lugar, a continuación, llamar el archivo al igual que lo haría normalmente:

<script type="text/javascript" src="jquery.js.php"></script> 

y luego si estoy al tanto de la funcionalidad precisa I' Voy Necesito, simplemente paso mis requerimientos como una cadena de consulta (jquery.js.php? r = core, effects). Hago exactamente lo mismo para mis requisitos de CSS si alguna vez son tan ramificados.

Answer 3

Esto es lo que hago: utilizo hasta dos archivos JavaScript y generalmente un archivo CSS para cada página. Calculo cuáles archivos JS serán comunes en todas mis páginas (o lo suficiente para que estén cerca, el archivo que contiene jQuery sería un buen candidato) y luego los concateno y los minimizo usando jsmin-php y luego guardo en caché el archivo combinado . Si quedan archivos JS que sean específicos de esa página, también los concateno, los minimizo y los guardo en un solo archivo. El primer archivo JS se llamará en varias páginas, el segundo solo en ese o quizás algunos.

Puede usar el mismo concepto con CSS si lo desea con css-min, aunque generalmente solo utilizo un archivo para CSS. Una cosa adicional, cuando creo el archivo de caché, puse un pequeño código PHP al principio del archivo para servirlo como un archivo GZipped, que de hecho es donde obtendrá la mayoría de sus ahorros. También querrá configurar el encabezado de caducidad para que el navegador del usuario también tenga más posibilidades de almacenar en caché el archivo. Creo que también puedes activar GZipping a través de Apache.

Para el almacenamiento en caché, compruebo si la hora de creación del archivo es anterior a la cantidad de tiempo que establecí. Si es así, recreo el archivo de caché y lo sirvo; de lo contrario, obtengo el archivo almacenado en caché.

Answer 4

La idea de minificar y combinar los archivos es excelente.

que hacer algo similar en mis sitios, pero para facilitar el desarrollo sugiero algo de código que se parece a esto:

if (evironment == production) { 
    echo "<style>@import(/Styles/Combined.css);</style>" 
} else { 
    echo "<style>@import(/Styles/File1.css);</style>" 
    echo "<style>@import(/Styles/File2.css);</style>" 
} 

Esto le debe permitir mantener sus archivos se separan durante dev para facilitar el manejo y uso del archivo combinado durante implementación para cargas de página más rápidas. Esto supone que tiene la capacidad de combinar los archivos y cambiar variables como parte de su proceso de implementación.

Definitivamente considere incluir su js en la parte inferior y el CSS en la parte superior según las recomendaciones de YUI, ya que mantener el JS bajo tiene un efecto tangible en la apariencia del resto de la página y se siente mucho más rápido.

Answer 5

No recomendaría el uso de una solución basada en Javascript (como PHP Minify) para incluir su CSS ya que su página se volverá inutilizable si el visitante tiene javascript deshabilitado.

Answer 6

También tienden a copiar + pegar todos mis plugins jQuery en un solo archivo: jquery.plugins.js entonces Enlace a

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"> 

para la biblioteca jQuery real.