Una delle cose più antipatiche delle applicazioni web 2.0 basate sullo scripting in AJAX è legata ai tempi di caricamento delle pagine html.
Molto spesso infatti, è costume dei siti web dinamici quello di creare un unico file di header che andrà ad essere incluso in tutte le pagine dell’applicazione. Il vantaggio è quello di doversi preoccupare una ed una sola volta di tutto quello che è compreso nei tag <head> e </head>.
Lo svantaggio può essere quello di dover includere tutti i file js che gestiscono gli eventi AJAX in un unico <head>, costringendo l’utente ad un GET di file che magari in quel contesto di pagina sono inutili, rallentando la navigazione.
Una soluzione, non definitiva, ma sicuramente apprezzabile, è quella di eseguire il get del codice incluso nei js dopo aver loadato tutto il resto.
<script type="text/javascript" src="http://example.com/js.js" defer="defer"></script>
I browser supportati (tutti quelli di nuova generazione) leggeranno i file con questo attributo dopo tutto il resto! Di conseguenza le funzioni incluse saranno immediatamente disponibili, ma visivamente il contenuto html della pagina (si presume che non ci siano defer nel body) verrà letto prima dei file js che stanno nel head.
Di fatto l’attributo permette una deroga alla regola generale che i file html vengono letti dall’altro verso il basso (e da sinistra verso destra).
La cosa ha senso per quei file js che non modificano elementi della pagina durante il suo loading. Se una funzione inclusa in un js fa riferimento ad un elemento onclick della pagina, non c’è bisogno di mandare in loading il sorgente relativo al momento del caricamento.
Al contrario, se lo scripting modifica il contenuto della pagina durante il suo caricamento da browser (è il caso degli editor di testo web based scritti in javascript) allora l’attributo non può essere utilizzato.
Grazie!!!!
Post utilissimo!!!! 🙂
sempre utile e disponibile, grazie
Perfetto però..
se uno volesse attribuirlo automaticamente a tutti i codici js?