[Web Performance] Includere file Javascript alla fine del body: problemi e soluzioni
Una delle performance best practices per le pagine web è quella di includere i richiami dei file Javascript alla fine del documento, appena prima della chiusura del tag body, invece che, come ancora comunemente avviene, nell'head del documento.
Una delle scomodità che questo comporta è che, se ad esempio spostiamo jQuery alla fine del documento, naturalmente non potremo utilizzare la libreria in nessuno script embed prima della fine del documento.
Un modo molto semplice per aggirare il problema, è quella di utilizzare un semplice array come coda di funzioni da eseguire quando le librerie necessarie saranno state incluse.
Nell'head del documento, l'unico Javascript può quindi essere:
<script>var jq=[]</script>
Ora, se vogliamo definire uno script embed nella pagina, ci basta aggiungere una funzione come elemento dell'array:
<script>
jq.push(function($){
alert("jQuery is here and the document is ready");
});
</script>
Ed infine, a fondo pagina, dopo l'inclusione delle librerie, non ci resta che eseguire la coda di funzioni. Se abbiamo a disposizione jQuery:
jQuery(function($){
$.each(jq, function() {
this($);
});
jq.push = function(func) {func($)};
});
O, per una versione generica in puro Javascript:
for (var i = 0, length = jq.length; i < length; ++i) {
jq[i]();
}
jq.push = function(func) {func()};
