Recentemente ho letto il manifesto di Yahoo Best Practices for Speed Up Your Web Site . Raccomandano di mettere l'inclusione di JavaScript in fondo al codice HTML quando possiamo.
Ma dove e quando esattamente?
Dovremmo metterlo prima della chiusura </html>o dopo? E soprattutto, quando dovremmo inserirla ancora nella <head>sezione?
Risposte:
Esistono due possibilità per script davvero discreti:
</body></html>)Il secondo può essere più veloce poiché la ricerca Yahoo originale ha mostrato che alcuni browser tentano di caricare i file di script quando colpiscono il tag di script e quindi non caricano il resto della pagina finché non hanno terminato. Tuttavia, se il tuo script ha una parte "pronta" che deve essere eseguita non appena il DOM è pronto, potresti aver bisogno di averlo in testa. Un altro problema è il layout: se il tuo script sta per cambiare il layout della pagina, vuoi che venga caricato il prima possibile in modo che la tua pagina non passi molto tempo a ridisegnarsi davanti ai tuoi utenti.
Se il sito di script esterno si trova su un altro dominio (come i widget esterni) può valere la pena metterlo in fondo per evitare che ritardi il caricamento della pagina.
E per qualsiasi problema di prestazioni, fai i tuoi benchmark : ciò che può essere vero in una volta quando viene fatto uno studio potrebbe cambiare con la tua configurazione locale o con i cambiamenti nei browser.
Non è mai così semplice: Yahoo consiglia di inserire gli script appena prima del </body>tag di chiusura , il che creerà l'illusione che la pagina si carichi più velocemente su una cache vuota (poiché gli script non bloccheranno il download del resto del documento). Tuttavia, se si dispone del codice che si desidera eseguire al caricamento della pagina, l'esecuzione inizierà solo dopo che l'intera pagina è stata caricata. Se metti gli script nel <head>tag, inizieranno a essere eseguiti prima, quindi su una cache con priming la pagina sembrerebbe caricarsi più velocemente.
Inoltre, il privilegio di mettere gli script in fondo alla pagina non è sempre disponibile. Se è necessario includere script inline nelle visualizzazioni che dipendono da una libreria o da un altro codice JavaScript caricato in precedenza, è necessario caricare tali dipendenze nel <head>tag.
Tutto sommato i consigli di Yahoo sono interessanti ma non sempre applicabili e dovrebbero essere considerati caso per caso.
<script>tag inline non implicano javascript invadente.
<script>i tag sono separati dal markup e possono essere utilizzati con codice che migliora l'interfaccia ma non è necessario. Quindi non c'è nulla di intrinsecamente invadente nei <script>tag inline .
<script>tag per codificare quei valori in variabili javascript, da usare forse con modifica in linea o altri comportamenti simili.
Come altri hanno detto, posizionalo prima dei tag html del corpo di chiusura .
L'altro giorno abbiamo ricevuto numerose chiamate da clienti che si lamentavano dei loro siti estremamente lenti. Li abbiamo visitati localmente e abbiamo scoperto che impiegavano 20-30 secondi per caricare una singola pagina. Pensando che i server funzionassero male, abbiamo effettuato l'accesso, ma sia i server Web che SQL erano circa lo 0% di attività.
Dopo pochi minuti, ci siamo resi conto che un sito esterno era inattivo, a cui stavamo collegando per i tag di tracciamento Javascript. Ciò significava che i browser stavano premendo il tag script nella sezione head del sito e aspettavano di scaricare il file di script.
Quindi, almeno per script di terze parti / esterni, consiglierei di inserirli come ultima cosa sulla pagina. Quindi, se non fossero disponibili, il browser caricherà almeno la pagina fino a quel punto e l'utente ne sarebbe ignaro.
Per riassumere, sulla base dei suggerimenti di cui sopra:
</body>tag.</body>meno che tu non abbia un motivo limite per posizionare gli script in testa.Se vuoi armeggiare con la posizione dei tuoi script, YSlow è un ottimo strumento per darti un sapore se migliorerà o danneggerà le prestazioni. Mettere javascript in determinate posizioni del documento può davvero ridurre i tempi di caricamento della pagina.
No, non dovrebbe essere dopo il </html>perché non sarebbe valido. Il posto migliore per inserire gli script è subito prima del file</body>
Questo è fondamentalmente perché la maggior parte dei browser interrompe il rendering della pagina mentre valuta lo script fornito. Quindi va bene mettere codice non bloccante ovunque nella pagina (sto principalmente pensando a cose che collegano funzioni onLoadall'evento, poiché il binding dell'evento è così veloce da essere effettivamente gratuito). Un grande assassino qui è all'inizio della pagina l'inserimento di uno script dell'ad server, che può impedire il caricamento di qualsiasi pagina prima che gli annunci siano stati scaricati completamente, rendendo i tempi di caricamento della pagina gonfiati
Se lo metti in fondo, si carica per ultimo, accelerando così la velocità con cui l'utente può vedere la pagina. Deve essere prima della finale, </html>anche se altrimenti non farà parte del DOM.
Se il codice è necessario immediatamente, però, mettilo in testa.
È meglio mettere cose come i widget del blog in fondo in modo che se non vengono caricati, non influisce sull'usabilità della pagina.