In che modo la posizione di un tag di script in una pagina influisce su una funzione JavaScript definita in esso?

Ho letto che dovresti definire le tue funzioni JavaScript nel tag , ma in che modo la posizione dello (sia in , o qualsiasi altro tag) influisce su una funzione JavaScript.

In particolare, in che modo influisce sull’ambito della funzione e da dove è ansible chiamarla?

Dire alle persone di aggiungere solo nella testa sembra una cosa ragionevole da fare, ma come altri hanno detto ci sono molte ragioni per cui questo non è raccomandato o addirittura pratico – principalmente la velocità e il modo in cui le pagine HTML sono generate dynamicmente.

Questo è ciò che dice la specifica HTML 4 :

L’elemento SCRIPT posiziona uno script all’interno di un documento. Questo elemento può apparire un numero qualsiasi di volte in HEAD o BODY di un documento HTML.

E alcuni esempi di HTML. Non sembra tutto abbastanza formattato qui 🙂

 < !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">   A document with SCRIPT        

E qualcosa su cui guardare in avanti in HTML 5 :

Nuovo attributo asincrono in :

Nota: ci sono modi in cui [sic] può essere eseguito uno script:

L’attributo async è “true”: lo script verrà eseguito in modo asincrono con il resto della pagina, quindi lo script verrà eseguito mentre la pagina continua l’analisi.

L’attributo async è “false”, ma l’attributo defer è “true”: lo script verrà eseguito al termine della pagina con l’analisi.

Le normali regole del gioco sono ancora valide; non usare roba prima che sia definita. 🙂

Inoltre, prendi nota che il consiglio “metti tutto in basso” non è l’ unica regola del libro – in alcuni casi potrebbe non essere fattibile e in altri casi potrebbe avere più senso inserire lo script altrove.

Il motivo principale per cui uno script è inserito nella parte inferiore di un documento è per le prestazioni, gli script, a differenza di altre richieste HTTP, non si caricano in parallelo, il che significa che rallenteranno il caricamento del resto della pagina. Un altro motivo per cui gli script sono collocati in fondo è quindi che non è necessario utilizzare alcuna funzione “DOM ready”. Poiché il tag dello script è al di sotto di tutti gli elementi, il DOM sarà pronto per la manipolazione!

EDIT: leggi questo: http://developer.yahoo.com/performance/rules.html#js_bottom

Uno degli aspetti del posizionamento è le prestazioni. Vedi questo fine articolo all’interno della discussione su YSlow per il motivo per cui a volte ti consigliamo di metterli in fondo al documento.

Per quanto riguarda le problematiche, le solite regole di visibilità per Javascript (vars definite all’interno o all’esterno di funzioni, locali, globali, chiusure, ecc.) Non sono influenzate per quanto ne so.

La posizione del tag script è importante. Se si associa una funzione con un elemento del documento, l’elemento del documento deve essere caricato prima di implementare la funzione. supponiamo che getTeachers () sia una funzione nel file getTeachers.js. Questo ti darà un errore:

   Unit Teachers      

Dà un errore prima che la testa sia caricata per prima e non possa trovare l’elemento con l’id specificato. Il codice seguente è la correzione:

   Unit Teachers     

Non è così. La maggior parte degli script di script framework di programmazione si trova in tutta la pagina. Ho visto solo raramente problemi a causa di ciò (e solo da browser più vecchi).

Se il tuo script fa riferimento a un ID sulla pagina e la pagina non è stata renderizzata (cioè lo script è prima di HTML, o lo script è eseguito con onload, piuttosto che il DOM è pronto) puoi anche ottenere un errore.

Se trascini Javascripts attraverso XMLHttpRequest, come ha detto Diodeus, probabilmente non funzionerà. Nel mio caso, non c’era nessun errore, il browser ignora semplicemente i nuovi script.

Ho finito per usare questo, non terribilmente elegante ma funziona per me finora:

http://zeta-puppis.com/2006/03/07/javascript-script-execution-in-innerhtml-the-revenge/

Come usare execJS: http://zeta-puppis.com/2006/02/23/javascript-script-execution-in-innerhtml/

Nota: attenzione per < in questa riga: for(var i=0;i

Se si dispone di uno script inline (funzioni esterne) situato prima delle funzioni che può chiamare, è ansible che si verifichi un errore perché potrebbe non essere ancora disponibile. Non dire che succederà sempre, solo che potrebbe dipendere dal tipo o dalla versione del browser.

Le regole di scoping di Javascript sono simili a perl: puoi chiamare qualsiasi funzione al livello di ambito corrente o superiore. L’unica limitazione è che la funzione deve essere definita nel momento in cui viene chiamata. La posizione nella fonte è irrilevante – conta solo la posizione nel tempo.

Dovresti evitare di inserire script in se ansible, in quanto rallenta la visualizzazione della pagina (vedi il link pubblicato da Alan).