[Javascript/HTML] Posizionamento script

[kwb]

Traendo spunto da questo articolo: http://www.html5rocks.com/en/tutorials/speed/script-loading/ vorrei bene capire una questione sul caricamento degli script.
Mi pare di capire, dopo aver letto l'articolo, che alla fine della fiera se si vuole creare una pagina e inserirci degli script senza rallentare il caricamento di questa è opportuno inserire gli script al fondo della pagina, prima del <body/>, invece che nell'head: questo se si cerca un'implementazione che vada bene a tutti i browser.
Tuttavia, mi domandavo quale fosse il significato di questa manovra se, per esempio, utilizzo un framework come jQuery e racchiudo tutto il mio codice dentro il famoso:

$(document).ready()

O, meglio ancora:

$(window).load()

Se è vero che le due istruzioni eseguono il codice JS solo quando la struttura intera è stata completamente caricata, questa mossa di caricare gli script a fondo pagina ha ancora senso usando queste due istruzioni?

[OoZic]

con document ready aspetta solo che il DOM sia pronto.

con window load aspetta anche immagini ed elementi grafici, almeno io sapevo cosi.

riguardo la domanda se è ancora necessario utilizzarlo, pur mettendolo alla fine della pagina, trovi una risposta sensata qui:
http://stackoverflow.com/questions/13062246/when-should-i-use-jquerys-document-ready-function

in sostanza dice che se metti lo script a fine pagina non è necessario usare document ready in quanto arrivati a quel punto il DOM è già caricato.

discorso diverso per plugin o script da caricare in posizioni diverse.

[kwb]

con document ready aspetta solo che il DOM sia pronto.

con window load aspetta anche immagini ed elementi grafici, almeno io sapevo cosi.

riguardo la domanda se è ancora necessario utilizzarlo, pur mettendolo alla fine della pagina, trovi una risposta sensata qui:
http://stackoverflow.com/questions/13062246/when-should-i-use-jquerys-document-ready-function

in sostanza dice che se metti lo script a fine pagina non è necessario usare document ready in quanto arrivati a quel punto il DOM è già caricato.

discorso diverso per plugin o script da caricare in posizioni diverse.
Si, la differenza da ready e window.load è quella.
Quindi ne deduco che quell'articolo sia per chi scrive ancora in JS pure senza fare uso di frameworks..:mbe:

[OoZic]

scusa ma non ho capito cosa intendi. :mbe:

[kwb]

scusa ma non ho capito cosa intendi. :mbe:

Ho sbagliato a scrivere, non pure, puro :D

[OoZic]

Si, la differenza da ready e window.load è quella.
Quindi ne deduco che quell'articolo sia per chi scrive ancora in JS puro senza fare uso di frameworks..:mbe:

no in realtà ogni volta che si parla di $(document).ready si sta parlando di jquery (framework).

la $ da sola non vuol dire niente in javascript.

quindi come ti dicevo , sia che tu usi jquery sia che non lo usi, se metti lo script alla fine del documento (prima del /body) non ti serve fare document.ready o window.load nel caso si tratti qualcosa che deve agire sul DOM in quanto a quel punto è già caricato.

se si tratta di immagini, plugin o quant'altro discorso diverso.

[wingman87]

Il punto secondo me è un altro, ed è spiegato all'inizio dell'articolo in "My first script include"

<script src="//other-domain.com/1.js"></script>
<script src="2.js"></script>
Ahh, blissful simplicity. Here the browser will download both scripts in parallel and execute them as soon as possible, maintaining their order. “2.js” won’t execute until “1.js” has executed (or failed to do so), “1.js” won’t execute until the previous script or stylesheet has executed, etc etc.

Unfortunately, the browser blocks further rendering of the page while all this is happening. This is due to DOM APIs from “the first age of the web” that allow strings to be appended onto the content the parser is chewing through, such as document.write. Newer browsers will continue to scan or parse the document in the background and trigger downloads for external content it may need (js, images, css etc), but rendering is still blocked.
In sostanza l'inclusione degli script è bloccante per il rendering della pagina sia per via del caricamento che per via dell'esecuzione (anche il file di jquery deve essere eseguito, sebbene si tratti solo di dichiarazioni credo), ed il fatto che l'esecuzione non può essere parallela aumenta il tempo impiegato. Inoltre non lo sapevo (ma in effetti ha senso), ma nell'articolo dice che lo script attende anche il caricamento e l'esecuzione dei css.
Insomma, quando si includono molti file può essere una buona idea valutare queste ottimizzazioni.

[kwb]

Piccola premessa: ritengo che oggigiorno, l'utilizzo di un framework js sia indispensabile. Credo che solo un pazzo voglia far uso del JS puro, o in casi applicativi MOLTO particolari.
Dunque, do per scontato che si utilizzi un framework come jQuery o altro, per lo scripting.

Perciò, se ho ben capito, qui si sta parlando di scaricare in locale lo script, che è ciò che blocca il browser? :mbe:
Perchè se si trattasse di uno script in jQuery, quasi sempre ( assolutamente sempre?? ) c'è un document.ready a fermare l'esecuzione, quindi, in questo caso, il problema di fondo si riduce ad un semplice download dello script...

Come dice wingman87, anche il framework jquery deve essere scaricato ma, come si legge nell'articolo, i nuovi browser eseguono download in parallelo degli elementi necessari. Quindi forse c'è un piccolo rallentamento di qualche frazione di secondo per il download della libreria e dello script. Problema assolutamente minimizzabile se si spostasse lo script in fondo al body ( rimuovendo il document.ready che risulta inutile ) e si lasciasse solo jQuery nell'header.

Tirando le somme, secondo me è una preoccupazione inutile questa, perchè se i nuovi browser scaricando in parallelo, scaricare la sola libreria jquery in un processo a parte non penso influenzi affatto il caricamento della pagina ( presupponendo di caricare gli altri script a fondo pagina.. ).

[DanieleC88]

Per rendere asincrono il caricamento degli script, HTML5 prevede degli appositi attributi:

async [HTML5]

Set this Boolean attribute to indicate that the browser should, if possible, execute the script asynchronously. It has no effect on inline scripts (i.e., scripts that don't have the src attribute). In older browsers that don't support the async attribute, parser-inserted scripts block the parser; script-inserted scripts execute asynchronously in IE and WebKit, but synchronously in Opera and pre-4.0 Firefox. In Firefox 4.0, the async DOM property defaults to true for script-created scripts, so the default behavior matches the behavior of IE and WebKit. To request script-inserted external scripts be executed in the insertion order in browsers where the document.createElement("script").async evaluates to true (such as Firefox 4.0), set .async=false on the scripts you want to maintain order. Never call document.write() from an async script. In Gecko 1.9.2, calling document.write() has an unpredictable effect. In Gecko 2.0, calling document.write() from an async script has no effect (other than printing a warning to the error console).

Per il resto, è sufficiente porre gli script in coda al body, oppure registrare un handler per gli eventi di caricamento ("load", ma soprattutto "DOMContentLoaded").

[kwb]

Per rendere asincrono il caricamento degli script, HTML5 prevede degli appositi attributi:



Per il resto, è sufficiente porre gli script in coda al body, oppure registrare un handler per gli eventi di caricamento ("load", ma soprattutto "DOMContentLoaded").
Come dice l'articolo riguardo a questa opzione:

Unfortunately, because they’re going to execute as soon as possible, “2.js” may execute before “1.js”. This is fine if they’re independent, perhaps “1.js” is a tracking script which has nothing to do with “2.js”. But if your “1.js” is a CDN copy of jQuery that “2.js” depends on, your page is going to get coated in errors, like a cluster-bomb in a… I dunno… I’ve got nothing for this one.

[DanieleC88]

Ovviamente ciò vale solo se dell'ordine di esecuzione non te ne può fregare di meno. In caso contrario, metti i tag script in fondo al body (senza attributo async) nell'ordine da te desiderato, et voila.

EDIT: e nessuno toglie che tu possa voler usare un misto delle due tecniche. :)

[__ZERO_UNO__]

Ricordo di aver letto una discussione su google group di ingegneri di Google proprio su questo. Loro usano anche mettere gli script subito dopo la fine dell'ultimo elemento del DOM sul quale tale script opera, per migliorare la UX (user experience). Infatti se –come usualmente accade– l'utente è impaziente di "fare", cioè non vuole attendere il completamento del caricamento, le parti della pagina caricate sono già completamente attive.

Questa soluzione può essere una buona soluzione con pagine molto complesse, altamente interattive. Altrimenti si può anche evitare a favore di una maggiore semplicità di manutenzione, a mio parere.