it-swarm.dev

più tag di script singoli o singoli

Esiste qualche differenza (prestazioni, buone pratiche, ecc.) Tra l'utilizzo di un singolo tag script con codice incorporato o l'utilizzo di più tag script con lo stesso codice diffuso su tutto il codice HTML?

Per esempio:

<script>
    foo();
</script>
...
<script>
    bar();
</script>

contro:

<script>
    foo();
    bar();
</script>

Grazie

42
Assaf Shemesh

Con inline script come quello che hai citato, è improbabile che ci sia much difference; tuttavia, ogni volta che il parser HTML del browser incontra un tag script, questo:

  • Arresta bruscamente
  • Crea una stringa del testo nel tag fino alla prima volta che vede la stringa "</script>"
  • Passa il testo all'interprete JavaScript, ascoltando l'output che l'interprete invia quando si esegue un document.write
  • Aspetta che l'interprete finisca
  • Inserisce l'output accumulato ricevuto nel flusso di analisi
  • Continua la sua analisi

Quindi aumentare il numero di volte che questa sequenza deve verificarsi può, in teoria, aumentare il tempo di caricamento della pagina. Influisce anche sul grado in cui il parser può "guardare avanti" nel flusso di token, il che potrebbe renderlo meno efficiente.

Tutto ciò sembra davvero drammatico, ma dovresti profilare una pagina reale nei vari browser che ti interessano per determinare se ha avuto un impatto reale.

Quindi, in sintesi, combinale il più possibile. Se non riesci a combinare ragionevolmente una coppia, non preoccuparti troppo fino a quando non vedi un problema del mondo reale.

Quanto sopra è per script in linea. Naturalmente, se si hanno diversi tag script che si riferiscono a una serie di file JavaScript esterni, si avrà anche il problema che ciascuno di questi file deve essere scaricato, e l'avvio di una richiesta HTTP è una cosa costosa (comparativamente) e quindi è meglio , in grande stile, per combinarli in un unico file.

Alcune altre cose da considerare:

  • Avere molti tag script sparsi nel tuo codice HTML può rendere difficile la manutenzione dello script
  • Separare il tuo codice HTML e lo script in file separati ti aiuta a limitare il livello di accoppiamento, aiutando di nuovo la manutenzione
  • Mettendo lo script in un file separato, è possibile eseguire quel file tramite minifiers/compressors/packer, riducendo al minimo le dimensioni del codice e rimuovendo commenti, lasciandoti libero di commentare nel codice sorgente sapendo che quei commenti saranno privati
  • Mettere gli script in file esterni ti dà l'opportunità di mantenere le cose separate dalla funzionalità, e quindi combinarle in un unico file per la pagina (compresso/minificato/impacchettato) per una consegna efficiente al browser

Di Più:

41
T.J. Crowder

A mio parere, la combinazione dei copioni è il migliore possibile. Alcuni browser devono sospendere il rendering durante l'esecuzione di blocchi di script. Controlla la risposta a: Prestazioni Javascript: blocchi di script multipli Vs blocco singolo più grande

2
Babiker

Fino a questo punto, tutto il codice JavaScript era in un tag, non è necessario che sia così.

Puoi avere tutti i tag che desideri in un documento.

I tag vengono elaborati al loro verificarsi.

Spero che questo ti aiuti.

2
user812254

Alcuni sostengono che è una buona pratica combinare tutti gli script in un singolo blocco di script o un singolo file di script, caricare solo il javascript che è veramente necessario e caricarlo il più tardi possibile per non rallentare il rendering di html.

A parte questo, sono sicuro che l'utilizzo di un singolo blocco di script si carica più velocemente rispetto all'utilizzo di più blocchi di script poiché devono essere valutati singolarmente. Tuttavia questa differenza potrebbe non essere riconoscibile.

0
Till