È una cattiva pratica incorporare JavaScript nel corpo dell'HTML?

Question 1

Un team su cui sto lavorando ha preso l'abitudine di utilizzare <script>tag in posizioni casuali nel corpo delle nostre pagine HTML. Per esempio:

<html>
    <head></head>
    <body>
        <div id="some-div">
            <script type="text/javascript">//some javascript here</script>
        </div>
    </body>
</html>

Non l'avevo mai visto prima. Sembra funzionare nei pochi browser che ho testato. Ma per quanto ne so, non è valido inserire tag di script in posti come questo.

Ho sbagliato? Quanto è grave che stiamo inserendo tag di script all'interno di tag div come questo? Ci sono problemi di compatibilità del browser di cui dovrei essere a conoscenza?

Question 2

È perfettamente valido.

Non vorresti inserire grandi blocchi di codice confusi nel markup lì (meglio usare script esterni), ma può essere utile per:

aggiungere informazioni extra vincolanti per il miglioramento progressivo (dove quei dati sono difficili da inserire in un nome di classe o altro approccio per nascondere le informazioni estese negli attributi); o
dove è necessario dare il via a un miglioramento tramite script il più rapidamente possibile (piuttosto che attendere il caricamento della finestra / il documento pronto). Un esempio di questo sarebbe l'autofocus, che può irritare se sparato troppo tardi.

Potresti pensare a <style>elementi che non sono consentiti <body>(sebbene la maggior parte dei browser lo consenta comunque).

Question 3

In realtà, è abbastanza comune. Ad esempio , il codice di monitoraggio dell'analisi dei dati di Google utilizza solo questa sintassi:

<script type="text/javascript">
  var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
  document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>

Se è abbastanza buono per Google ...

Question 4

È valido e, a seconda del framework lato server e della natura del codice, a volte molto difficile da evitare.

Question 5

Come hanno detto diverse persone, è valido, funziona ed è ampiamente utilizzato.

Le migliori pratiche consigliate dalla semantica (o almeno utilizzate per consigliare) sono l'inserimento di tag di script all'interno dell'intestazione.

Le migliori pratiche più moderne che tengono conto delle prestazioni raccomandano di posizionare i tag di script (esterno e in linea) in basso a destra prima del tag body, per consentire al markup di eseguire il rendering completo prima dell'esecuzione di qualsiasi codice JavaScript.

Per un codice più facile da capire e manutenibile, si consiglia "JavaScript discreto", in cui il codice si trova in un file esterno e associa gli eventi al DOM (JavaScript non invadente di Google).

Un caso in cui è utile avere JavaScript inline è inizializzare le variabili con valori che esistono solo sul lato server, che verranno successivamente utilizzati dal codice JavaScript esterno.

Question 6

Preferisco inserire riferimenti a script esterni nella testina e script che avviano le cose e inizializzano widget e quant'altro nel corpo.

Un problema in cui è molto facile imbattersi è che un elemento di script nel corpo non può accedere agli elementi che lo seguono. Inoltre, un brutto problema di compatibilità del browser correlato è il fatto che IE non consente agli elementi di script di modificare l'elemento in cui si trovano. Quindi, se hai questo:

<div id="foo">
  <script type="text/javascript">
    document.getElementById("foo")... // do something to it
  </script>
</div>

IE non apprezzerà la tua pagina. Le vecchie versioni di IE fornivano messaggi di errore molto criptici per questo o addirittura oscuravano l'intera pagina, ma IE8 sembra fornire un messaggio di errore descrittivo.

Finché ti assicuri che i tuoi script accedano solo al DOM di cui è sicuro l'accesso, non penso che sia malvagio inserire elementi di script nel corpo. In effetti, IMHO, inserire script che inizializzano i widget dopo gli elementi correlati può essere più leggibile che mettere tutto in un unico posto (e credo che questo potrebbe anche farli funzionare prima, il che fa sì che le cose saltino meno mentre la pagina viene caricata).

Question 7

È valido!

Puoi usare:

<script type="text/javascript">
    //<![CDATA[

    // Some JavaScript code that perfectly validates in the W3C validator

    //]]>
</script>

Non credo si possa dire se in generale è una cattiva pratica. Devi dirlo nel caso. Ma certo è che è bene avere tutto il codice JavaScript nello stesso posto. È un po 'disordinato se hai piccoli pezzi di codice JavaScript in tutto il tuo file HTML.

Question 8

Non l'avevo mai visto prima. Sembra funzionare nei pochi browser che ho testato. Ma per quanto ne so, non è valido inserire tag di script in posti come questo.

È valido, ma non è una buona (o consigliata) pratica.

Ho sbagliato? Quanto è grave che stiamo inserendo tag di script all'interno di tag div come questo? Ci sono problemi di compatibilità del browser di cui dovrei essere a conoscenza?

Non c'è problema a posizionare un <script>sotto qualsiasi altro elemento (ma dovrebbe essere dentro <head>o <body>). Non ci sono problemi anche in termini di compatibilità del browser, tuttavia, l'incorporamento di script JS nelle pagine web presenta seri svantaggi (come / perché sono considerati cattivi) :

Aggiunge il peso della pagina
Difficoltà (o probabilmente impossibile) per la minificazione
Non può essere migrato o essere utilizzato per altre pagine
Non può essere memorizzato nella cache (deve essere scaricato ogni volta che la pagina viene caricata)
Nessuna separazione delle preoccupazioni (più difficile da mantenere)

Question 9

Tuttavia, è anche positivo sapere che il codice JavaScript necessario per una sezione di HTML sarà lì per questo. Piuttosto che dover affermare e creare un'inclusione all'inizio del file.

Quindi, invece di "se hai intenzione di utilizzare questo HTML, assicurati di importare xyz.js" puoi semplicemente includere l'HTML e farla finita.

Quindi, non è necessariamente un male orribile. Forse non in modo spettacolare, ma nemmeno del tutto terribile. Dipende dall'intento.

Question 10

Consulta l'interfaccia utente di Yahoo per le migliori pratiche: http://developer.yahoo.com/performance/rules.html (JavaScript in fondo alla pagina)

Question 11

È certamente legale; L'ho visto in poche pagine qui su Exforsys ad esempio.

Ora questo è un sito di tutorial che mostra le basi di HTML e JavaScript, quindi in quel contesto è perfettamente comprensibile. Tuttavia, non mi piacerebbe vederlo nel codice di produzione per qualcosa di più di una semplice dichiarazione o due. Senza vedere cosa hai sostituito// Some JavaScript code here non vorrei commentare.

Tuttavia, non dovrebbero esserci problemi con il browser.

Question 12

È valido aggiungere <script> in body , ma a Internet Explorer non piace. Quindi, per essere più sicuri, assicurati di avere i tuoi script all'interno del tag <head>.

Questo stava davvero creando scompiglio (specialmente per Internet Explorer) nel progetto su cui stiamo lavorando.

Question 13

Presumo che il tuo team lo stia facendo perché desidera inserire uno script in modo dinamico o perché sta scrivendo uno script che verrà attivato al caricamento della pagina.

Non direi che c'è qualcosa di sbagliato nel farlo quando ASSOLUTAMENTE NECESSARIO, (purché sia in un blocco CDATA), ma al di fuori di ciò, consiglierei al tuo team di utilizzare una libreria di script come Prototype o jQuery e di mantenere gli script esterni alla pagina. Questo di solito è più pulito e le librerie a volte forzeranno un po 'di pulizia al codice, cosa che scommetto non sta accadendo al momento.

Inoltre, non eseguirò alcuna funzione dispendiosa in termini di tempo nei tag di script in linea, poiché si verificano durante il caricamento della pagina e, come ha affermato Jason sopra, potrebbero rallentare il caricamento della pagina. Tutte le librerie di script hanno funzioni precise che ti consentono di fare cose al caricamento della pagina e ti daranno la possibilità di attivarle quando nel caricamento della pagina, ad esempio dopo il caricamento del DOM.

Question 14

È una delle tante, molte best practice che riguardano tanto il miglioramento delle prestazioni quanto il miglioramento del tuo approccio alla programmazione.

In definitiva, nello sviluppo web, ottenere il prodotto è la cosa più importante!

Question 15

È perfettamente valido, anche se potrebbe danneggiare la manutenibilità. Vedi anche Dove devo inserire i tag <script> nel markup HTML? e perché la chiamata a questa funzione jQuery non riesce in Firefox? .

Question 16

La raccomandazione spesso dichiarata di mantenere gli script nell'intestazione è di assicurarsi che lo script venga caricato prima di essere chiamato. Questo è solo un problema per alcuni gestori di eventi. Per altri tipi di script, non importa e per alcuni tipi (come document.write) non ha alcun senso.

Question 17

Se disponi di un editor in grado di gestire contemporaneamente la sintassi HTML e JavaScript. E se ti piace leggere prima alcune righe di HTML e poi JavaScript cpde ... certo. Fallo.

Question 18

Poche cose:

È completamente valido dal punto di vista del codice.
È completamente sconsigliato.

Ciò rallenta notevolmente il caricamento della pagina poiché il codice JavaScript deve essere eseguito prima che il resto della pagina possa essere visualizzato. Se stai lavorando molto con quel codice JavaScript, il tuo browser potrebbe bloccarsi. Dovresti provare (quando possibile) a caricare il tuo codice JavaScript in modo dinamico e alla fine della tua pagina (preferibilmente prima del file</body> tag).

Acquista e leggi JavaScript ad alte prestazioni . Cambierà il modo in cui scrivi il codice JavaScript.