2011-01-03 22 views
8

Così ho un'app web con più file JS (jQuery, jQuery, il mio codice JS e altro). Supponiamo che abbia una pagina denominata index.html. Quale sarebbe la migliore pratica per includere/precaricare i miei file js? Stavo pensando di creare un file JS separato che eseguirà il preloading (includi tutti gli altri script e chiama jQuery.noConflict()). Cosa suggerite voi ragazzi? È possibile? Come lo implementeresti?Il modo migliore per organizzare i file JavaScript

Grazie!

+0

Cosa si sta parlando semplicemente includendoli nella sezione 'testa'? Il browser si prenderà cura della memorizzazione nella cache. –

+0

Se hai molti file, non metterli in testa. Mettili alla fine del corpo. Crea una pagina che sia bella senza i file e quindi aggiungili alla fine del corpo. La pagina che creerai fungerà da splash page. Puoi nascondere i tuoi elementi splash una volta caricato jquery. – Hemlock

+2

@Pekka: mettere gli script in 'head' è necessario solo se si usano le loro funzionalità durante il rendering di' body' e si rallenta il tempo di caricamento percepito della pagina. Se non hai bisogno della loro funzionalità * durante il rendering * (e questo include l'utente che fa clic sulle cose mentre la pagina è ancora in costruzione), mettili in fondo a 'body'. [Altro] (http://developer.yahoo.com/performance/rules.html) –

risposta

0

Il modo migliore è ridurre al minimo tutti i file js e combinarli in uno script. Ciò causerà meno lavoro per il browser, in quanto non deve fare richieste multiple al server.

0

Se avete intenzione di caricare tutto in su, allo stesso tempo, si potrebbe mettere tutto in un unico file compresso

+0

grazie. dove posso trovare un compressore di file JS? – Ron

+1

@Ron: puoi usare googles compressor, http://code.google.com/closure/compiler/ –

+0

^^^ sì, il compilatore di chiusura di google è la strada da percorrere ... Credo che questo sia ciò che jQuery stesso è compresso con . – stephen776

5

Partenza RequireJS, uno script loader intelligente e robusto per JavaScript. È progettato per funzionare bene con jQuery e viene fornito con un optimization tool per combinare tutti i tuoi script in uno.

+0

+1 È particolarmente utile in app dev. Mi piace molto il modello del modulo negli usi. –

7

In generale, unire i file di script in un unico file (e minify o compress loro, o anche li compile, ma si noti che questo ultimo elemento è non a impatto zero, ci sono punti di dolore). Vedere le note here e here. Fondamentalmente, una delle prime linee guida che vedrai per un buon caricamento veloce delle pagine è "minimizzare le richieste HTTP". Quindi non vuoi sei tag separati script dove potresti averne uno.

Per gli script più diffusi, tuttavia, è possibile utilizzare dal numero Google's CDN. Google è abbastanza gentile da ospitare gratuitamente le librerie JavaScript più popolari sul loro CDN. Il vantaggio qui non è solo il fatto che il CDN sarà abbastanza veloce, ma che il browser dell'utente target potrebbe avere una versione cache dello script che si desidera utilizzare anche se non sono mai stati a il tuo sito.

+0

puoi spiegare di più "ma nota che questo ultimo elemento non è a impatto zero, ci sono punti di dolore"? grazie – user544262772

+0

@Oddant: l'uso del compilatore Closure richiede alcune pratiche a livello di sorgente che, in genere, non richiedono generalmente minifiers/compressori. Ma nella sua modalità semplice, non sono affatto onerosi. (La modalità avanzata è più complicata, ma in tal caso si ottengono anche maggiori vantaggi). –

Problemi correlati