Posizionamento degli script jQuery

**vi1985** · 26-07-2011, 19:25

Salve a tutti.

Ho realizzato una semplice pagina in HTML5 in cui è presente il richiamo ad un semplice script con codice jQuery.

root/index.html:

codice:

<!DOCTYPE HTML>
<html>
    <head>
    	
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        
        <link rel="stylesheet" href="style.css" />
        
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>	
        
        <title>MyTitle</title>
        
        <link rel="icon" href="images/favicon.png" type="image/png" />
    </head>
    <body>
        
        <div id="disclaimer">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vel elit sapien. Suspendisse potenti. Aliquam ut erat metus, ut scelerisque ligula. Aliquam pulvinar lorem non libero sagittis id facilisis mi viverra. Quisque quis tincidunt nibh. Integer ut felis non odio ultrices vulputate. Quisque a justo libero. Integer posuere, purus sit amet porta vulputate, purus dolor iaculis risus, at varius felis dolor fringilla est. Integer ac nulla enim. Vivamus molestie laoreet leo vitae iaculis. Cras lorem justo, congue nec scelerisque ac, commodo ac tellus. Suspendisse et massa sem. Etiam felis sapien, eleifend et laoreet vel, aliquam vitae nunc. Aliquam lorem orci, porttitor et consectetur vel, tincidunt vel turpis.
        </div>

        
        <script type="text/javascript" src="js/sample.js"></script>

    </body>
</html>

root/js/sample.js:

codice:

// JavaScript Document

$('<input type="button" value="toggle" id="toggleButton">')
	.insertAfter('#disclaimer');
$('#toggleButton').click(
	function(){
			$('#disclaimer').toggle();
		}
);

Tipicamente il richiamo di sample.js ero abituato a farlo all'interno della sezione head, subito dopo il caricamento della libreria jQuery; peccato che l'unico modo per far funzionare il tutto, ad oggi, è quello di posizionare lo script all'interno di body. Qualcuno saprebbe darmi delucidazioni in merito? E' stata modificata qualche best pratice di recente? Per inciso, il testing di questa pagina è stato effettuato sull'ultime versioni di Safari e Firefox.

Grazie mille in anticipo, Vi.

**simotenax** · 27-07-2011, 17:52

allora intanto gli script per buona norma devrebbero essere inseriti nel footer, per una questine di caricamento della pagina.
comunque nessuno vieta di metterli nell'head; così come l'hai scritto te non funziona perchè in quel punto i selettori sono nulli, il DOM non è ancora pronto.

Per inserire il tuo script utilizzando jQuery (ma anche tutte le altre librerie) devi usare una funzione che aspetta il DOMready, nel caso di jQuery così:

Codice PHP:


jQuery(document).ready(function(){



// il tuo codice qui



});

**vi1985** · 27-07-2011, 18:42

Avevo completamente dimenticato il ready per l'inizializzazione dello script... Errore da principiante.

Per quanto riguarda il caricamento nel footer per migliorare le prestazioni, intendi una struttura di questo tipo?

codice:

<html>
    
    <head>
    </head>
    
    <body>
        
        <header>
        </header>
        
        <section>
        </section>
        
        <footer>
            <p id="footerText">Questo è il mio footer</p>
            
            
            <script src="js/script1.js"></script>
            <script src="js/script2.js"></script>
            <script src="js/script3.js"></script> 
        </footer>
    
    </body>

</html>

Tutto giusto od ho inteso male?
Grazie mille per la risposta!

**simotenax** · 28-07-2011, 10:01

sì vanno messi come ultimi tag prima della chiusura del body (non in senso stretto alla fine del footer, mi sono spiegato male)

**vi1985** · 28-07-2011, 11:01

Tutto chiaro, ti ringrazio molto per i suggerimenti!

**Vindav** · 28-07-2011, 11:24

Originariamente inviato da simotenax
sì vanno messi come ultimi tag prima della chiusura del body (non in senso stretto alla fine del footer, mi sono spiegato male)

a parte che è praticamente indifferente la posizione all'interno della pagina, tutto dipende da come è gestito il js incluso, cmq è buona norma inserirli nell'head insieme all'inclusione dei css, basta scaricare qualche script da internet per vedere che nella stra grande maggioranza dei casi vengono inseriti nell'head.

**simotenax** · 28-07-2011, 12:45

il fatto che gli script vengano inseriti nell'head non vuol dire che sia buona norma.

la differenza sta nel fatto che prima che il contenuto del body venga mostrato devono essere completamente caricati tutti i js inseriti nell'head.

vedi googlando così

**Vindav** · 28-07-2011, 15:41

io rimango della mia opinione, inserendo i js nel footer si torna al classico problema che avevo già riscontrato tempo fa: se il js è di grandi dimensioni(o viene prelevato da un sito esterno molto lento per esempio) e non è ancora stato caricato completamente, e si tenta di accedere ad essi(tramite una funzione per esempio richiamata dal body che è già stato caricato) il richiamo alla funzione non darà i risultati sperati.
Stesso discorso per il caricamento, il caricamento totale è cmq la somma del caricamento del body + la parte di script, quindi il tempo totale di caricamento non diminuisce... certo vedremo prima tutto cio che sta nel body ma se non ha ancora caricato lo script che ci serve?

**simotenax** · 28-07-2011, 15:55

beh il tuo è un approccio diverso, se metti funzioni o richiami a funzioni nel body necessariamente dovrai includere i tuoi script nell'head. Dovrai comunque stare sempre attento a non accedere ad elementi non ancora renderizzati nel punto in cui vai ad inserire js.

La mia abitudine è oltre che a inserire gli script (per quanto possibile) prima della chiusura del body, quella di includere prima tutte le librerie che mi servono (funzioni,plugin ecc) e poi per ultimo lo script che andrà ad agire sul dom.

Dici che non cambia nulla perchè alla fine il tempo totale è identico ma ti devo contraddire, ad un qualsiasi utente sembrerà più veloce un sito che viene mostrato una volta caricati css e body piuttosto uno che attende anche il caricamento dei js. Questa affermazione va comunque misurata nei vari casi, ovvio che se si parla di pochi kb di codice la differenza è trascurabile ma se già cominciamo a parlare di 100-200kb di codice magari su un server o lento o trafficato e visitato da un utente con un linea lenta il tempo di attesa aumenta. E se vai a dare un occhio alle statistiche vedrai che il tempo di attesa medio di un utente per il caricamento della pagina prima di provare con un'altra è molto breve (sui 3-4 secondi se non vado errato)

Non pensare che ti voglia inculcare la mia opinione o miei metodi eh

**fcaldera** · 28-07-2011, 16:28

Originariamente inviato da Vindav

a parte che è praticamente indifferente la posizione all'interno della pagina, tutto dipende da come è gestito il js incluso,

Non è esattamente così: il punto di inclusione fa molta differenza perchè l'elemento <script> - quando viene incontrato dal parser - blocca temporaneamente il rendering della pagina fino a quando lo script è stato scaricato ed eseguito, quindi includerli nell'head o prima della chiusura del body fa molta differenza

Originariamente inviato da Vindav
cmq è buona norma inserirli nell'head insieme all'inclusione dei css, basta scaricare qualche script da internet per vedere che nella stra grande maggioranza dei casi vengono inseriti nell'head.

No, per quanto detto sopra è invece buona norma (non un obbligo assoluto) inserire detti elementi a fondo pagina. Se molti siti non lo fanno ciò lo si deve principalmente a 1) poca flessibilità dello strumento/CMS che compone la pagina a livello server; 2) poca comprensione del problema da parte di chi sviluppa; 3) problemi specifici a livello di implementazione e 4) scarsa sensibilità da parte di chi non specifica l'ottimizzazione come requisito e di chi non ha strumenti minimi per valutarla.

Discussione: Posizionamento degli script jQuery

Strumenti discussione

Ricerca discussione

Visualizza

Posizionamento degli script jQuery

Permessi di invio