Yahoo best practice afferma che putting JavaScript files on bottom potrebbe far caricare le pagine più velocemente. Qual è l'esperienza con questo? Quali sono gli effetti collaterali, se ce ne sono?Il caricamento degli script nella parte inferiore di una pagina Web velocizza il caricamento della pagina?
ha un paio di vantaggi:
rendering inizia prima. Il browser non può elementi di layout che non ha ancora ricevuto. Ciò evita il problema "schermo bianco vuoto".
Rinvia i limiti di connessione. Di solito il tuo browser non tenta di creare più di un paio di connessioni allo stesso server alla volta. Se si dispone di un'intera coda di script in attesa di essere scaricati da un server lento, può davvero rovinare l'esperienza dell'utente mentre la pagina sembra bloccarsi.
A partire dal 2013, il primo punto è ancora un po 'vero. Tuttavia, mettere gli script in fondo non è più così rilevante. Ora con HTML5, se lo script deve modificare il DOM, è meglio metterlo in testa con un attributo html5 "async" o "defer", per evitare di ritardare il rendering generale della pagina. Per scopi di layout, più veloce è il nome degli script, meno si sta ritardando l'evento DOMReady e più veloce sarà la pagina caricata all'utente. Ora solo gli script che riguardano un'azione dell'utente dopo window.onload dovrebbero essere posizionati in basso. – hexalys
Per quello che posso dire, lascia semplicemente che il browser inizi il rendering prima.
quindi immagino che se i file js sono abbastanza grandi, sembrerà come se la pagina fosse caricata ma l'utente non sarà in grado di fare nulla perché browser che ancora carica file js. –
Questo è ciò che accade in Stack Overflow a volte, almeno. :) –
Non è vero che l'utente non sarà in grado di fare nulla - semplicemente non sarà in grado di fare nulla che richiede il javascript. – Skilldrick
Un effetto collaterale sarebbe che alcuni script non funzionano affatto se li si mettono alla fine della pagina. Se c'è uno script in esecuzione mentre viene eseguito il rendering della pagina (molto comune per gli script di annunci, ad esempio) che si basa su una funzione in un altro script, è necessario caricare prima lo script.
Inoltre, dire che la pagina si carica più velocemente non è la verità esatta. Quello che realmente fa è caricare gli elementi visivi della pagina in precedenza in modo che sembra che la pagina sta caricando più velocemente. Il tempo totale per caricare tutti i componenti della pagina è sempre lo stesso.
Se si ottiene una copia di Microsoft Visual Round Trip Analyzer, è possibile profilare esattamente ciò che accade.
Quello che ho visto non più spesso è che la maggior parte dei browser ARRESTO pipelining richieste quando si imbattono in un file JavaScript, e dedicano tutta la loro connessione con il download singolo, invece di scaricare in parallelo.
Il motivo per cui il pipelining viene interrotto, è quello di consentire l'inclusione immediata dello script nella pagina. Storicamente, molti siti utilizzavano document.write per aggiungere contenuti e il download dello script consentiva immediatamente un'esperienza leggermente più fluida.
Questo è sicuramente il comportamento a cui Yahoo sta ottimizzando. (Ho visto la stessa raccomandazione nella rivista MSDN con la spiegazione di cui sopra.)
È importante notare che IE 7+ e FF 3+ hanno meno probabilità di mostrare il cattivo comportamento. (Principalmente da quando uso document.write è diventato fuori pratica, e ora ci sono metodi migliori per pre-rendering del contenuto.)
La tua pagina dovrebbe in realtà caricarsi più velocemente. I browser apriranno più di una connessione per scaricare tre immagini in parallelo, ad esempio. D'altra parte, i tag <script> nella maggior parte dei browser causano il blocco del browser su quello script in esecuzione. Se è un tag <script> con un attributo src, il browser bloccherà sia per il download che per l'esecuzione. Se si inseriscono i tag <script> alla fine, si evita questo problema.
Allo stesso tempo, ciò significa che tali pagine non hanno alcuna funzionalità JS fino al termine del caricamento. Un buon esercizio di accessibilità è garantire che il tuo sito funzioni abbastanza bene da essere utilizzabile fino al caricamento del JS.Ciò garantisce che la pagina (a) funzioni bene per le persone con connessioni lente (b) che funzionino bene per le persone con problemi di menomazione o che utilizzino browser di solo testo.
La maggior parte dei browser continua a scaricarsi mentre lo script è in esecuzione, quindi non è del tutto vero. –
Inserirli nella parte inferiore equivale a utilizzare l'attributo "defer" (ulteriori informazioni here). Questo è simile a come un browser non può continuare con il layout di pagina a meno che i tag IMG non abbiano informazioni di larghezza e altezza - se il javascript incluso genera contenuto, il browser non può continuare con il layout finché non sa cosa c'è e quanto è grande tutto .
Fintanto che il javascript non deve essere eseguito prima che si verifichi l'evento onload, è possibile posizionare i tag di script alla fine o utilizzare l'attributo defer.
+1 bello, non sapevo che esistesse questa caratteristica. –
se si sta sviluppando per firefox/safari, si può sempre verificare con console Firebug/sviluppatore in quanto mostrano la sequenza di caricamento dei file
Ci sono alcuni punti.
Carica velocemente la pagina poiché il JavaScript interno o esterno è in basso.
Se non è stato utilizzato un metodo onLoad di finestra in JavaScript, verrà avviato non appena eseguito il rendering. Lo Script in basso garantisce che lo script venga eseguito dopo il caricamento della pagina.
Se lo script è come un file significa esterno, verrà eseguito il rendering dopo l'immagine HTML e altri oggetti visivi che formano la visualizzazione di pagina.
Se si utilizza fireFox, è presente un plug-in per verificare le prestazioni. Si prega di colpire il sito firefox per questo plugin.
Gli script bloccano altri download, quindi tendo a caricare gli script (ad eccezione di quelli necessari per la funzionalità della pagina immediata) appena prima del tag di chiusura del corpo, quindi posizionare le funzioni che dipendono da essi successivamente. Infine, aggiungo cose come Google Analytics. A quanto ho capito, la pagina non sempre carica * più velocemente * (anche se probabilmente lo farà), ma gli utenti vedono il contenuto * prima *, che aiuta l'apparente velocità di caricamento. Consulta il signore dei siti più veloci qui: http://stevesouders.com/hpws/move-scripts.php –