2010-05-02 48 views
9

diferentes páginas de mi sitio tienen diferentes necesidades js (plugins principalmente), algunos necesitan una caja de luz, algunos no haga, algunos necesitan un carrusel, algunos Dont etc.diferentes pequeños archivos js por página VS. 1 archivo js en todo el sitio?

Con respecto a la velocidad pageloading ¿Debo opción

1 - referencia js cada archivo cuando es necesario:

por lo que uno podría tener la página:

<script type="text/javascript" src="js/carousel/scrollable.js"></script>  
<script type="text/javascript" src="js/jquery.easydrag.js"></script> 
<script type="text/javascript" src="js/colorbox/jquery.colorbox-min.js"></script> 

y otra tener:

<script type="text/javascript" src="st_wd_assets/js/carousel/scrollable.js"></script> 
<script type="text/javascript" src="st_wd_assets/js/typewatch.js"></script> 

opción 2 - combinar y comprimir en un solo archivo site_wide.js:

por lo que cada página haría referencia:

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

habría selectores no utilizados/detectores de eventos sin embargo, cómo malo es esto? me gustaría incluir cualquier nota Programas/acreditaciones en la parte superior de los site_wide.js archivo

+0

http://stackoverflow.com/questions/2707499/improving-javascript-load-times-concatenation-vs-many-cache/2707544#2707544 http://stackoverflow.com/questions/1495338/use-cache -file-or-one-more-http-request –

Respuesta

7

Por lo general es la mejor manera de combine these and serve one file, que configura las cabeceras de caché para que el cliente se aferra a él, no lo solicite cada página. Recuerde que si un selector de jQuery no encuentra nada, no hace nada, así que no es un problema importante siempre y cuando esté usando una buena parte de su script en cada página, está bien que tenga selectores sin coincidencias.

Make sure it's being cached by the client though, de todo su trabajo es en vano. También asegúrese de it's served minified and gzipped. Y, por último, mira el alojamiento de tu main libraries from a CDN.

+0

Recuerde que ciertos clientes (como iPhones) no almacenan en caché los archivos> 15 KB. Además, es extraño que esta respuesta http://stackoverflow.com/questions/2707499/improving-javascript-load-times-concatenation-vs-many-cache/2707544#2707544 recomiende lo contrario. –

+3

@Marcel - El límite es> 25kb (y ese es el tamaño ** descomprimido **, muy bajo) :) Ya que está cargando la biblioteca ** en sí misma ** cada carga de página, la situación de jQuery en el iPhone no está Eso es genial hasta que salga una versión móvil. Si tiene que realizar un viaje de ida y vuelta para ** cualquiera de sus plugins (que debería tener con colorbox), es mejor obtenerlos todos a la vez, ya que la solicitud en sí misma es lo que es tan doloroso en un dispositivo móvil, obteniendo un archivo más grande con esa solicitud es mucho más rápido que hacer otro. Como cliente de AT & T con uno y un servicio irregular, puedo dar fe de esto :) –

+0

De acuerdo con este comentario http://www.niallkennedy.com/blog/2008/02/iphone-cache-performance.html#comment255665 El límite de tamaño hoy en día es de 15 KB en lugar de 25 KB (OS 3.1). Como no tengo un iPhone, no puedo probar esto. Aunque es bueno saber que las solicitudes HTTP pueden ser extremadamente lentas en las conexiones móviles. –

2

Combínelos en un archivo externo grande y minificado, e inclúyalo en cada página. Después de cargar la primera página, el navegador la almacenará en la memoria caché, por lo que el usuario solo la descargará una vez.

Cuestiones relacionadas