Javascript dove è meglio inserirlo?

Ci sono diversi modi per inserire codice javascript in un documento HTML5, ma quale tra questi è effettivamente il migliore? Scopriamolo in questo articolo!

Javascript nel HEAD

Il sistema più usato (ma non certo il migliore) è quello di inserire codice javascript o files javascript all’interno del HEAD del documento, solitamente dopo i CSS. In questo modo il codice javascript, cosi come i files, vengono caricati in ordine dal primo all’ultimo, il che è molto utile in caso si utilizzano librerie esterne per mantenere la priorità (si deve caricare prima jquery e solo dopo il codice javascript che lo utilizza). Il problema è che cosi il caricamento del javascript blocca il rendering del browser, rallentando il caricamento del sito!

<script src="http://esempio-cdn.com/jquery.js"></script>
<script src="esempio.js"></script>
<script>
// codice js
</script>
</head>
<body>

Async e Defer

Il secondo metodo è quello di inserire come prima il javascript nel HEAD del documento ma usare “async” o “defer” per dire al browser di caricare le risorse javascript dopo il rendering della pagina web in modo da non rallentarlo. Sarebbe un ottimo sistema se non fosse che il caricamento non mantiene le priorità date ma viene eseguito prima lo script che carica più veloce, causando problemi con le librerie esterne! (NB: async e defer funzionano solo con l’attributo src=””)

<script async src="http://esempio-cdn.com/jquery.js"></script>
<script async src="esempio.js"></script>
</head>
<body>

Javascript nel footer

Il sistema migliore è proprio questo, in pratica basta caricare javascript (files e codice) proprio prima della fine del tag </body>, in questo modo il codice javascript viene caricato senza bloccare il rendering della pagina web (senza bisogno di usare async) e mantiene le priorità date! Ecco un esempio:

<script src="http://esempio-cdn.com/jquery.js"></script>
<script src="esempio.js"></script>
<script>
// codice js
</script>
</body>

Per chi volesse approfondire rimando a questo interessantissimo articolo (in ingelse)

Ilario Pellandini

::: Certified Web developer 2006-2018 ::: ::: www.IPELWEB.com :::

More Posts - Website