Como posso reduzir os custos de carregamento de grandes bibliotecas JS?

Se estou usando uma grande biblioteca Javascript para minha página, como posso garantir que isso não prejudique o uso do site pelo usuário?

Existem 4 coisas que você pode fazer.

1. Minimize seu arquivo JS. Isso remove todos os comentários e espaços em branco para reduzir seu tamanho.
2. Combine seus arquivos JS em cada página para que haja apenas 1 arquivo.
3. Use um pacote para compactar seus arquivos ao enviá-los. Isso os tornará ainda menores
4. Coloque o Javascript que não é necessário imediatamente na parte inferior da página para que ele seja carregado no final. Isso permitirá que o usuário veja e use a página antes mesmo de o JS ser completamente carregado.

E algumas outras pessoas sugeriram:

• O Apache manipula automaticamente a compactação (e o cache do conteúdo compactado), o que simplifica enormemente o gerenciamento de arquivos
• Tornar o JavaScript adequadamente capaz de armazenar em cache trará grandes benefícios.
• Os domínios curinga (com vários URIs) permitirão mais conexões simultâneas. A busca prévia não é apenas para imagens /

Se você estiver usando bibliotecas comuns (como jQuery, Prototype ou Dojo), poderá transferir o arquivo para o Google e fazê- lo atendê-lo , isso oferece várias vantagens:

• Você não precisa se preocupar em reduzir e compactar etc
• Não é a sua largura de banda
• Esses arquivos vêm de um domínio diferente, portanto, você pode (pelo menos parcialmente) solucionar o limite de 2 solicitações paralelas por nome de host
• Se você tiver sorte, o usuário já visitou outro site que usou a mesma biblioteca do mesmo provedor e, portanto, já o possui no cache do navegador.

Nota: A versão solicitada pode ter um grande impacto nas características de armazenamento em cache: solicitar o jQuery 1.4.2 fornecerá um arquivo que pode ser armazenado em cache por um ano, mas o 1.4 poderá ser armazenado em cache apenas por uma hora.

Você pode colocar a biblioteca inteira em um arquivo js e compactar o arquivo. No entanto, isso realmente importa apenas para o primeiro carregamento de uma página. Depois disso, seu arquivo js será armazenado em cache no navegador, principalmente se você definir a validade do cache por tempo suficiente. Portanto, qualquer ocorrência consecutiva não carregará mais seu arquivo js.

Além das respostas acima, você pode usar o Google Closure Compiler para compactar e otimizar automaticamente seu JS enquanto se integra a outras bibliotecas de terceiros (jQuery, YUI, mootools etc.)

Se você tiver vários elementos de página e acesso a um domínio separado, poderá considerar hospedar todos os arquivos estáticos, incluindo o arquivo JS grande no segundo domínio.

Como Steve Souders observa em seu blog High Performance Web Sites :

... em algumas situações, vale a pena pegar vários recursos que estão sendo baixados em um único domínio e dividi-los em vários domínios. Eu chamo esse domínio de fragmentação. Isso permite que mais recursos sejam baixados em paralelo, reduzindo o tempo total de carregamento da página.

em outro lugar ele escreve ..

Os navegadores abrem um número limitado de conexões por domínio ... A divisão ou fragmentação das solicitações em dois domínios, em oposição a um domínio, resulta em uma página mais rápida, especialmente no IE 6 e 7