Quanto è "troppo grande" per un file javascript

Question

Con tutti i fantastici plug-in jQuery là fuori, è così allettante iniziare a includerli ovunque per migliorare l'aspetto del nostro sito web.

Sto cercando alcune opinioni su se e quando dovrei preoccuparmi delle dimensioni di questi script.

Si suppone che vengano memorizzati nella cache a livello di server Web, quindi suppongo che i potenziali dubbi riguardino la larghezza di banda per gli script offerti dal server Web, nonché le prestazioni nel browser client che deve scaricare tutti questi script .

Answer 1

Ci sono due problemi qui come lei ha menzionato.

Il primo è il carico del server. Se questo è un problema, puoi utilizzare lo Google AJAX Libs APIs e ottenere le tue lib direttamente dal CDN di Google.

Il secondo problema è il tempo di caricamento lato client. Bene, dovresti decidere chi è il tuo target di riferimento e quanto sei bravo a lasciare aspettare l'utente. Come regola generale, la maggior parte dei siti Web oggi consumano ~300KB di larghezza di banda per pagina, inclusi script, fogli di stile e immagini.

Answer 2

Quanto è lungo un pezzo di spago?

Dipende dalla larghezza di banda del pubblico di destinazione, dalla larghezza di banda del server (s) e dal valore relativo fornito da JS.

Answer 3

Devi metterlo in prospettiva. Guarda per quanto tempo il caricamento della pagina è e quale percentuale è javascript. Di solito non è così grande.

Poiché js di solito aggiunge sottigliezze a un sito, potrebbe non avere importanza se carica per ultimo, o relativamente lentamente, purché non blocchi altri elementi da caricare.

Nel modo in cui lo vedo, se è necessaria la funzionalità, è necessario caricare il codice in modo che sia inevitabile. Se è decorativo, quindi caricare quella decorativa per ultima, ed è meglio averlo un po 'più tardi di non averlo affatto.

Answer 4

Come altri hanno già detto per jQuery, è preferibile utilizzare qualsiasi copia pubblica ospitata da CDN. Suggerirei anche di utilizzare uno strumento per raggruppare i plug-in/gli script personalizzati in un pacchetto (s) che abbia senso. Questi possono variare a seconda del tipo di server, ma 2 strumenti comuni sono ASP.NET ScriptManager Control - Script Combining - What's the big deal? e Bundler - Bundler Now Supports Css And .less. In quest'ultimo post ci sono più informazioni su questo argomento in generale.

Modifica: La soluzione corrente che utilizzo con .NET è http://getcassette.net/ Cassette fornisce la migliore storia per lo sviluppo di ASP.NET, si memorizza solo .debug. copie di file JS in soluzione, i file javascript ottengono facilmente intellisense, quando si esegue in debug si ottengono tutti i file di debug js e quando si esegue con debug = false i get vengono combinati e minificati. In entrambi gli scenari hanno stringhe di busting della cache quindi non dovrai mai preoccuparti di shift + refresh per non utilizzare javascript stantio.

Answer 5

Non penso che dovresti preoccuparti troppo. Di solito, le immagini consumano la maggior parte della larghezza di banda e non i file Javascript.

Se si desidera velocizzare il sito, ridurre il numero di richieste HTTP nella pagina è il punto da cui iniziare. Questo probabilmente aumenterà notevolmente le prestazioni. Prova a comprimere tutti i tuoi file .js in uno solo e usa le tecniche di sprite CSS per visualizzare le tue immagini.