Inserisci javascript in un file .js o estrailo in più file .js?

Question

La mia applicazione web utilizza jQuery e alcuni plugin jQuery (ad esempio convalida, completamento automatico). Mi chiedevo se dovessi inserirli in un unico file .js in modo che potesse essere memorizzato nella cache più facilmente, o dividerli in file separati e includere solo quelli necessari per una determinata pagina.

Vorrei anche ricordare che la mia preoccupazione non è solo il tempo necessario per scaricare i file .js ma anche quanto la pagina rallenta in base al contenuto del file .js caricato. Ad esempio, l'aggiunta del plug-in di completamento automatico tende a rallentare il tempo di risposta di circa 100ms rispetto ai test di base anche quando si memorizza nella cache. La mia ipotesi è che deve scansionare gli elementi nel DOM che causa questo ritardo.

Answer 1

Se le persone visitano più di una pagina del sito, è probabilmente meglio metterle tutte in un file in modo che possano essere memorizzate nella cache. Prenderanno un colpo in attacco, ma sarà per tutto il tempo che trascorreranno sul tuo sito.

Answer 2

Alla fine della giornata tocca a voi.

Tuttavia, minori sono le informazioni contenute in ciascuna pagina Web, più rapidamente sarà scaricato dal visualizzatore.

Se si includono solo i file js necessari per ogni pagina, sembra più probabile che il vostro sito web sarà più efficiente e snella

Answer 3

comune ma rilevanti risposta:

Dipende dal progetto .

Se si dispone di un sito Web abbastanza limitato in cui la maggior parte delle funzionalità viene riutilizzata in più sezioni del sito, è opportuno inserire tutto lo script in un unico file.

In diversi progetti Web di grandi dimensioni su cui ho lavorato, tuttavia, ha più senso inserire le funzionalità comuni del sito in un singolo file e inserire le funzionalità più specifiche della sezione nei propri file. (Stiamo parlando di file di script di grandi dimensioni qui, per il comportamento di diverse app Web distinte, tutte servite nello stesso dominio.)

Il vantaggio di suddividere lo script in file separati è che non è necessario fornire agli utenti contenuti non necessari e larghezza di banda che non stanno utilizzando. Ad esempio, se non visitano mai "App A" sul sito Web, non avranno mai bisogno dei 100K di script per la sezione "App A", ma avrebbero bisogno delle funzionalità comuni a livello di sito.

Il vantaggio mantenere lo script sotto un unico file è semplice. Meno colpi sul server. Meno download per l'utente.

Come al solito, però, YMMV. Non c'è una regola dura e veloce. Fai ciò che ha più senso per gli utenti in base al loro utilizzo e in base alla struttura del tuo progetto.

Answer 4

Se i file sono necessari in ogni pagina, inserirli in un unico file. Ciò ridurrà il numero di richieste HTTP e migliorerà il tempo di risposta (per molte visite).

Vedere Yahoo best practice per altri suggerimenti

Answer 5

Se vi piace il codice in file separati per lo sviluppo si può sempre scrivere uno script veloce per concatenare in un unico file prima di minimizzazione.

Un grande file è migliore per ridurre le richieste HTTP come indicato da altri poster.

Answer 6

Penso anche che dovresti seguire il percorso a un file, come suggerito dagli altri. Tuttavia, al punto in cui i plug-in mangiano i cicli semplicemente inclusi nel file js di grandi dimensioni:

Prima di eseguire un'operazione costosa, utilizzare alcuni controlli per assicurarsi di essere anche su una pagina che richiede le operazioni. Forse è possibile rilevare la presenza (o l'assenza) di un nodo dom prima di eseguire il plugin di completamento automatico e solo inizializzare il plugin quando necessario. Non è necessario sprecare il sovraccarico di dom traversal su pagine o sezioni che non avranno mai bisogno di determinate funzionalità.

Un semplice condizionale prima di un costoso pezzo di codice ti darà i vantaggi di entrambi gli approcci che stai decidendo.

Answer 7

Sarei in grado di concordare con quello che ha detto BigMattyh, dipende.

Come regola generale, cerco di aggregare i file di script il più possibile, ma se si dispone di alcuni script che vengono utilizzati solo su alcune aree del sito, in particolare quelli che eseguono grandi attraversamenti DOM al caricamento, avrebbe senso lasciare quelli in file separati.
ad es. se usi la validazione solo sulla tua pagina di contatto, perché caricarla sulla tua home page?

Per inciso, a volte puoi infiltrare questi file in pagine interstiziali, dove non succede molto altro, quindi quando un utente atterra su una pagina altrimenti piuttosto pesante che ne ha bisogno, dovrebbe essere già messo in cache - usa con cautela - ma può essere un trucco utile quando qualcuno ti esegue il benchmarking.

Quindi, con il minor numero possibile di file di script, entro limiti ragionevoli.

Se si invia un monolite da 100 K, ma si utilizzano solo 20 K di esso per l'80% delle pagine, è consigliabile suddividerlo.

Answer 8

Dipende molto dal modo in cui gli utenti interagiscono con il tuo sito.

Alcune domande per voi da considerare:

• Quanto è importante che il vostro primo caricamento della pagina sarà molto veloce?
• Gli utenti trascorrono la maggior parte del tempo in sezioni distinte del sito con sottoinsiemi di funzionalità?
• Hai bisogno di tutti gli script pronti nel momento in cui la pagina è pronta, oppure puoi caricarne alcuni dopo aver caricato la pagina inserendo gli elementi <script> nella pagina?

Avere una buona idea di come gli utenti utilizzano il tuo sito e di cosa si desidera ottimizzare è una buona idea se si sta davvero cercando di spingere per le prestazioni.

Tuttavia, il mio metodo predefinito consiste nel concatenare e minimizzare tutti i miei javascript in un unico file. jQuery e jQuery.ui sono piccoli e hanno un sovraccarico molto basso. Se i plug-in che stai utilizzando hanno un effetto di 100 ms sul tempo di caricamento della pagina, allora qualcosa potrebbe essere sbagliato.

Un paio di cose da controllare:

• Viene gzipping abilitato sul server HTTP?
• Stai generando file statici con nomi univoci come parte della distribuzione?
• Stai servendo file statici con scadenza cache infinita?
• Stai includendo il CSS nella parte superiore della pagina e gli script nella parte inferiore?
• C'è un plugin jQuery migliore (più piccolo, più veloce) che fa la stessa cosa?

Answer 9

Penso che dipenda da quanto spesso cambiano. Prendiamo questo esempio:

• JQuery: il cambiamento una volta l'anno
• 3rd plugin di partito: cambiano ogni 6 mesi
• il codice personalizzato: cambiare ogni settimana

Se il codice personalizzato rappresenta solo 10% del codice totale, non si desidera che gli utenti scarichino l'altro 90% ogni settimana. Dovresti dividere almeno 2 js: i plugin JQuery + e il tuo codice personalizzato. Ora, se il codice personalizzato rappresenta il 90% delle dimensioni complete, ha più senso inserire tutto in un unico file.

Al momento di scegliere come combinare file JS (e lo stesso per i CSS), mi saldo:

• dimensione relativa del file
• numero di aggiornamenti previsto