ti-enxame.com

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?

23
Macha

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 quando você os enviar. 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 adequado para 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 /
25
Ben Hoffman

Se você estiver usando bibliotecas comuns (como jQuery, Prototype ou Dojo), poderá transferir o arquivo para o Google e torná-los 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, ele já está 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.

21
Cebjyre

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.

6
txwikinger

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

4
theycallmemorty

Se você possui vários elementos de página e acesso a um domínio separado, pode 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 em IE 6 e 7

0
mvark