Come posso ridurre i costi di caricamento di grandi librerie JS?

23

Se sto usando una grande libreria Javascript per la mia pagina, come posso assicurarmi che ciò non pregiudichi l'uso del sito da parte dell'utente?

javascript performance

— Macha
fonte

25

Ci sono 4 cose che puoi fare.

Minimizza il tuo file JS. Ciò rimuove tutti i commenti e gli spazi bianchi per ridurne le dimensioni.
Combina i tuoi file JS su ogni pagina in modo che ci sia solo 1 file.
Usa un pacchetto per gzip i tuoi file quando li invii. Questo li renderà ancora più piccoli
Inserisci Javascript che non è necessario immediatamente nella parte inferiore della pagina in modo che venga caricato alla fine. Ciò consentirà all'utente di visualizzare e utilizzare la pagina anche prima che JS sia completamente caricato.

E alcune altre persone hanno suggerito:

Apache gestirà automaticamente la compressione (e la memorizzazione nella cache del contenuto compresso) che semplifica enormemente la gestione dei file
Rendere JavaScript correttamente in grado di memorizzare nella cache produrrà grandi vantaggi.
I domini jolly (con più URI) consentiranno più connessioni simultanee. Il pre-recupero non è solo per le immagini /

— Ben Hoffman
fonte

Ci sono più cose che puoi fare e modi migliori per farlo. Apache gestirà automaticamente la compressione (e la memorizzazione nella cache del contenuto compresso) che semplifica enormemente la gestione del file. Rendere javascript correttamente memorizzabile nella cache produrrà grandi vantaggi. I domini jolly (con più URI) consentiranno più connessioni simultanee. Il pre-recupero non è solo per le immagini /

— symcbean,

21

Se si utilizzano librerie comuni (come jQuery, Prototype o Dojo), è possibile scaricare il file su Google e farli servire , questo offre numerosi vantaggi:

Non devi preoccuparti di minimizzare, zippare ecc
Non è la tua larghezza di banda
Questi file provengono da un dominio diverso, quindi puoi (almeno parzialmente) aggirare il limite di 2 richieste parallele per nome host
Se sei fortunato, l'utente ha già visitato qualche altro sito che ha utilizzato la stessa libreria dello stesso provider, quindi lo ha già nella cache del browser.

Nota: la versione richiesta può avere un grande impatto sulle caratteristiche di memorizzazione nella cache: la richiesta di jQuery 1.4.2 ti darà un file che può essere memorizzato nella cache per un anno, ma 1.4 può essere memorizzato nella cache solo per un'ora.

— Cebjyre
fonte

1

+ 1 per CDN e scriptsrc.net per renderlo ancora più semplice;)

— Agos,

1

Puoi espandere la tua 'nota'? Perché c'è una differenza nel tempo di memorizzazione nella cache?

— richiamano il

2

@theycallmemorty: Anche se non ho controllato i documenti, suppongo che sia perché specificando la 1.4.2 sei molto specifico sulla versione che desideri, mentre chiedendo la 1.4 stai sostanzialmente dicendo "dammi il massimo versione recente sotto 1.4 ", quindi non la stanno memorizzando nella cache pesantemente.

— Zhaph - Ben Duguid,

Vale anche la pena notare che Microsoft rende disponibili alcune librerie JS (jQuery e alcune specifiche per MS) sul proprio CDN che supporta anche https (che molti altri CDN di script non supportano) asp.net/ajaxlibrary/cdn.ashx

— Bert Lamb

6

È possibile inserire l'intera libreria in un file js e comprimere il file. Tuttavia, conta davvero solo per il primo caricamento di una pagina. Successivamente, il file js verrà memorizzato nella cache nel browser, in particolare se si imposta la scadenza della cache abbastanza a lungo. Quindi qualsiasi hit consecutivo non caricherà più il tuo file js.

— txwikinger
fonte

+1 per te puoi mettere l'intera libreria in un file e comprimerlo. Non ci ho pensato.

— Gordon Gustafson,

4

Oltre alle risposte di cui sopra, puoi utilizzare il Google Closure Compiler per comprimere e ottimizzare automaticamente il tuo JS mentre si integra con altre librerie di terze parti (jQuery, YUI, mootools, ecc.)

— theycallmemorty
fonte

0

Se disponi di numerosi elementi della pagina e accedi a un dominio separato, puoi considerare di ospitare tutti i file statici, incluso il file JS di grandi dimensioni sul secondo dominio.

Come osserva Steve Souders nel suo blog sui siti Web ad alte prestazioni -

... in alcune situazioni, vale la pena prendere un sacco di risorse che vengono scaricate su un singolo dominio e dividerle su più domini. Chiamo questo frammento di dominio. In questo modo è possibile scaricare più risorse in parallelo, riducendo il tempo complessivo di caricamento della pagina.

altrove scrive ..

I browser aprono un numero limitato di connessioni per dominio ... La suddivisione o condivisione delle richieste tra due domini, anziché un dominio, porta a una pagina più veloce, specialmente in IE 6 e 7

— mvark
fonte