¿Cómo puedo reducir los costos de cargar grandes bibliotecas JS?

Si estoy usando una gran biblioteca de Javascript para mi página, ¿cómo puedo asegurarme de que esto no perjudique el uso del sitio por parte del usuario?

Hay 4 cosas que puedes hacer.

1. Minifica tu archivo JS. Esto elimina todos los comentarios y espacios en blanco para reducir su tamaño.
2. Combine sus archivos JS en cada página para que solo haya 1 archivo.
3. Use un paquete para comprimir sus archivos cuando los envíe. Esto los hará aún más pequeños.
4. Ponga Javascript que no se requiere inmediatamente al final de la página para que se cargue al final. Esto permitirá al usuario ver y usar la página incluso antes de que el JS esté completamente cargado.

Y algunas otras personas han sugerido:

• Apache manejará automáticamente la compresión (y el almacenamiento en caché del contenido comprimido) que simplifica enormemente la administración de archivos
• Hacer que JavaScript sea capaz de almacenar en caché correctamente generará grandes beneficios.
• Los dominios comodín (con múltiples URI) permitirán más conexiones concurrentes. La búsqueda previa no es solo para imágenes /

Si está utilizando bibliotecas comunes (como jQuery, Prototype o Dojo), puede descargar el archivo a Google y hacer que lo sirvan , esto le brinda varias ventajas:

• No tiene que preocuparse por minificar y comprimir, etc.
• No es tu ancho de banda
• Estos archivos provienen de un dominio diferente, por lo que puede (al menos parcialmente) solucionar el límite de 2 solicitudes paralelas por nombre de host
• Si tiene suerte, el usuario ya ha visitado algún otro sitio que utilizó la misma biblioteca del mismo proveedor, por lo que ya lo tiene en la memoria caché del navegador.

Nota: La versión que solicite puede tener un gran impacto en las características de almacenamiento en caché: solicitar jQuery 1.4.2 le dará un archivo que puede almacenarse en caché durante un año, pero 1.4 solo puede almacenarse en caché durante una hora.

Puede poner toda la biblioteca en un archivo js y comprimir el archivo. Sin embargo, realmente solo importa para la primera carga de una página. Después de esto, su archivo js se almacenará en caché en el navegador, en particular si configura la caducidad de la caché el tiempo suficiente. Por lo tanto, cualquier golpe consecutivo ya no cargará su archivo js.

Además de las respuestas anteriores, puede usar el Compilador de cierre de Google para comprimir y optimizar automáticamente su JS mientras se integra con otras bibliotecas de terceros (jQuery, YUI, mootools, etc.)

Si tiene varios elementos de página y acceso a un dominio separado, puede considerar alojar todos los archivos estáticos, incluido el archivo JS grande en el segundo dominio.

Como señala Steve Souders en su blog de Sitios web de alto rendimiento :

... en algunas situaciones, vale la pena tomar un montón de recursos que se están descargando en un solo dominio y dividirlos en varios dominios. Yo llamo a este dominio fragmentación. Hacer esto permite que se descarguen más recursos en paralelo, lo que reduce el tiempo total de carga de la página.

en otra parte escribe ...

Los navegadores abren un número limitado de conexiones por dominio ... Al dividir o dividir las solicitudes en dos dominios, en lugar de un dominio, se obtiene una página más rápida, especialmente en IE 6 y 7