it-swarm.it

"Mettere Javascript in fondo" vanifica lo scopo di document.ready?

So che si consiglia di mettere Javascript in fondo alla pagina, ma se sto usando jQuery questo non vanifica il suo scopo di essere eseguito mentre il DOM sta caricando?

Se ho un menu a discesa, ad esempio, i menu a discesa non verranno visualizzati fino a quando non sarà caricato tutto il resto della pagina. Cerco anche di sviluppare pensando al miglioramento progressivo, quindi potrei avere elementi nascosti con jQuery anziché CSS (in modo che gli utenti non JS possano vederli).

C'è un mezzo felice, forse?

26
DisgruntledGoat

Document. già attende il caricamento del DOM prima di eseguire JavaScript (http://www.learningjquery.com/2006/09/introducing-document-ready).

L'idea di metterlo in fondo, significa che se il tuo JS sta avendo problemi o la persona ha una connessione lenta, il resto della pagina si carica ancora per primo e non si "blocca".

JS funziona ancora quando tutto è stato caricato, sia all'inizio che alla fine.

30
Callan

Mettere javascript in basso significa che il contenuto dell'altra pagina (in particolare il testo) viene caricato prima di javascript, quindi gli utenti non attendono il caricamento di JS se hanno connessioni lente.

Ciò non influisce già su document.come viene chiamato quando il browser ha terminato la preparazione del DOM per una pagina. Ad ogni modo, tutto deve ancora essere caricato per primo.

6
Macha

Uno script non ha un reale utilizzo fino al termine del caricamento dell'HTML: uno script non può modificare il DOM fino al caricamento dell'HTML. document.ready attende il caricamento del DOM. Quindi, non ha senso trattenere cose importanti come i fogli di stile.

Inserisci gli script nella parte inferiore della pagina (prima del tag </body>) per ordinare all'utente di trasmettere HTML e CSS il più velocemente possibile. Il browser sarà in grado di rendere la pagina molto più veloce e quindi gli script possono essere caricati, piuttosto che lasciare una pagina vuota affinché l'utente possa guardare mentre attendono il download degli script.

Mentre il browser esegue il rendering progressivo della pagina, se colpisce un tag script (ovvero un file Javascript esterno) tutto si ferma. Gli script hanno la precedenza - durante il download di uno script, il browser non avvierà altri download. vale a dire immagini e fogli di stile e qualsiasi altro download parallelo saranno bloccati, anche su nomi host diversi.

Lo svantaggio di mettere gli script nella parte inferiore della pagina è che, poiché la pagina verrà visualizzata prima che gli script siano inizializzati, in particolare i clicker rapidi saranno in grado di interagire con il tuo sito prima che Javascript sia pronto.

Nota: È vero il contrario per i fogli di stile: i fogli di stile nella parte inferiore della pagina bloccano il rendering progressivo fino a quando tutti i fogli di stile non sono stati scaricati e spostati nel documento HEAD elimina il problema.


Esiste un trucco per caricare JavaScript senza far attendere l'utente, è possibile creare un elemento <script/> utilizzando il metodo DOM createElement() e aggiungerlo alla pagina appena prima della chiusura </body> etichetta:

var oScript = document.createElement("script");
oScript.src = "/path/to/my.js";
document.body.appendChild(oScript);

Il browser non inizia a scaricare lo script js fino a quando il nuovo elemento <script/> non viene effettivamente aggiunto alla pagina. Una volta completato il download, il browser interpreta il codice Javascript contenuto all'interno.

3
Tom

Sì. Se metti gli script in fondo, doc.ready (DOMContentLoaded event) non è più necessario - lo script verrà eseguito dopo che tutti i DOM precedenti sono stati comunque caricati.

Poiché gli script alla fine migliorano le prestazioni (l'analisi HTML e il caricamento di CSS e immagini non sono bloccati dagli script), consiglio di mettere gli script in fondo invece di usare doc.ready.

1
Kornel