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

23

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?

Macha
fonte

Respostas:

25

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 /
Ben Hoffman
fonte
Há mais coisas que você pode fazer e melhores maneiras de fazer isso. O Apache manipulará automaticamente a comptressão (e o cache do conteúdo compactado), o que simplifica enormemente o gerenciamento de arquivos. Tornar o javascript adequadamente armazenável em cache proporcionará grandes benefícios. Os domínios curinga (com vários URIs) permitirão mais conexões simultâneas. Pré-busca não é apenas para imagens /
symcbean
21

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.

Cebjyre
fonte
1
+ 1 para CDN e scriptsrc.net para torná-lo ainda mais fácil;)
Agos
1
Você pode expandir sua 'nota'? Por que há uma diferença no tempo de armazenamento em cache?
theycallmemorty
2
@theycallmemorty: Embora eu não tenha verificado os documentos, presumo que seja porque, ao especificar 1.4.2, você está sendo muito específico sobre a versão que deseja, enquanto pede para 1.4, você está basicamente dizendo "me dê o máximo versão recente em 1.4 ", para que não o armazenem em cache tão intensamente.
Zhaph - Ben Duguid
Também digno de nota é que a Microsoft disponibiliza algumas bibliotecas JS (jQuery e algumas específicas da MS) em sua CDN, que também suporta https (que muitas outras CDNs de script não suportam) asp.net/ajaxlibrary/cdn.ashx
Bert Lamb
6

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.

txwikinger
fonte
+1 para você colocar a biblioteca inteira em um arquivo e compactá-lo. Não pensei nisso.
Gordon Gustafson
4

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.)

theycallmemorty
fonte
0

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

mvark
fonte