Dove posizionare JavaScript in un file HTML?

212

Supponiamo che io abbia un file JavaScript abbastanza pesante, compresso fino a circa 100kb o giù di lì. Per file intendo che è un file esterno che verrebbe collegato tramite <script src="...">, non incollato nell'HTML stesso.

Qual è il posto migliore per inserirlo nell'HTML?

<html>
<head>
    <!-- here? -->
    <link rel="stylesheet" href="stylez.css" type="text/css" />
    <!-- here? -->
</head>
<body>
    <!-- here? -->
    <p>All the page content ...</p>
    <!-- or here? -->
</body>
</html>

Ci saranno differenze funzionali tra ciascuna delle opzioni?

javascript  html  optimization 
— nickf
fonte
— Ivar

Risposte:

176

Yahoo! Il team delle prestazioni eccezionali consiglia di posizionare gli script nella parte inferiore della pagina a causa del modo in cui i browser scaricano i componenti.

Ovviamente il commento di Levi "appena prima che tu ne abbia bisogno e non prima" è davvero la risposta corretta, cioè "dipende".

— Walter Rumsby
fonte
4
Ad esempio, se hai intenzione di fare un sacco di cose jQuery, avresti bisogno della libreria caricata prima di provare effettivamente a usarla.
— BryanH
58
Inoltre, il motivo per cui Yahoo EPT consiglia di posizionare JS in fondo è perché il browser deve entrare in modalità single-threaded mentre il JS viene caricato e quindi eseguito. Se lo script è in testa o in mezzo al contenuto, il browser "si fermerà" mentre si occupa del JS. Posizionando il JS in basso, il contenuto verrà caricato e generalmente visibile in modo che l'utente possa iniziare a leggerlo mentre il browser ha ancora a che fare con il JS.
— BryanH
1
Ciao. Mettiamo codice come questo $(function () {...})anche in fondo alla pagina o deve essere all'interno <head>?
— Thang Pham
7
Spero che il riferimento a "fondo pagina" qui non sia al di là </body>?
— Mr_Green
1
I browser moderni possono anche leggere l'attributo "defer". Puoi impostare defer = "defer" sui tag script che non sono in fondo al <body> e quando il browser li vede, prima finirà di caricare il resto dell'html e poi tornerà indietro e interpreterà il contenuto di il tag dello script. Questo è utile se stai usando una sorta di framework in cui non hai il pieno controllo della pagina. Dig in questo articolo e nota che si tratta di un documento vivo così alcune delle informazioni è obsoleto: stackoverflow.com/questions/5250412/...
— LinuxDisciple
75

Il posto migliore per questo è appena prima di averne bisogno e non prima.

Inoltre, a seconda della posizione fisica dei tuoi utenti, l'utilizzo di un servizio come il servizio S3 di Amazon può aiutare gli utenti a scaricarlo da un server fisicamente più vicino a loro rispetto al tuo server.

Il tuo script js è una libreria comunemente usata come jQuery o prototipo? In tal caso, esistono numerose società, come Google e Yahoo, che dispongono di strumenti per fornire questi file su una rete distribuita.

— Levi Rosol
fonte
62

Come regola generale, il posto migliore per inserire i <script>tag è la parte inferiore della pagina, appena prima del </body>tag. Qualcosa come questo:

<html>
    <head>
        <title>My awesome page</title>

        <!-- CSS -->
        <link rel="stylesheet" type="text/css" href="...">
        <link rel="stylesheet" type="text/css" href="...">
        <link rel="stylesheet" type="text/css" href="...">
        <link rel="stylesheet" type="text/css" href="...">

    </head>
    <body>
        <!-- Content content content -->

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script type="text/javascript" src="..."></script>
        <script type="text/javascript" src="..."></script>
        <script type="text/javascript" src="..."></script>
    </body>
</html>

Perché?

Il problema causato dagli script è che bloccano i download paralleli. La specifica HTTP / 1.1 suggerisce che i browser non scarichino più di due componenti in parallelo per nome host. Se offri le tue immagini da più nomi host, puoi ottenere più di due download in parallelo. Durante il download di uno script, tuttavia, il browser non avvierà altri download, anche su nomi host diversi. Di Più...

CSS

Un po 'fuori tema, ma ... Metti i fogli di stile in alto.

Durante la ricerca delle prestazioni su Yahoo !, abbiamo scoperto che spostando i fogli di stile nel documento HEAD, le pagine sembrano caricarsi più velocemente. Questo perché l'inserimento dei fogli di stile in HEAD consente il rendering progressivo della pagina. Di Più...

Ulteriore lettura

Yahoo ha rilasciato una guida davvero interessante che elenca le migliori pratiche per velocizzare un sito web. Sicuramente vale la pena leggere: https://developer.yahoo.com/performance/rules.html

— martynas
fonte
1
"Il problema causato dagli script è che bloccano i download paralleli". - Non è più vero: w3.org/TR/html5/scripting-1.html#attr-script-async
— Quentin
4

Con 100k di Javascript, non dovresti mai metterlo all'interno del file. Utilizza un file JavaScript di script esterno. Non c'è nessuna possibilità che tu possa usare solo questa quantità di codice in una sola pagina HTML. Probabilmente ti stai chiedendo dove caricare il file Javascript, per questo hai già ricevuto risposte soddisfacenti.

Ma vorrei sottolineare che comunemente, i browser moderni accettano file Javascript gzip ped! Basta comprimere il x.jsfile in x.js.gze puntare a quello srcnell'attributo. Non funziona sul filesystem locale, è necessario un server web per farlo funzionare. Ma il risparmio in byte trasferiti può essere enorme.

L'ho testato con successo in Firefox 3, MSIE 7, Opera 9 e Google Chrome. Apparentemente non funziona in questo modo in Safari 3.

Per maggiori informazioni, vedere questo post del blog e un'altra pagina molto antica che tuttavia è utile perché sottolinea che il server web può rilevare se un browser può accettare Javascript con gzip o meno. Se il tuo lato server può scegliere dinamicamente di inviare il file compresso con gzip o il testo normale, puoi rendere la pagina utilizzabile in tutti i browser web.

— bart
fonte
8
Hai frainteso la domanda dell'OP. Chiedeva dove nell'HTML inserire il tag dello script. Stava già utilizzando un file esterno, non in linea con lo script. Certo, questo era meno chiaro prima della sua modifica della domanda nell'aprile '09. Forse eliminare questa risposta?
— Mark Amery
@ Leandro Immagino sia perché le persone non tengono sempre a mente la domanda reale, ma considerano comunque utili risposte come questa. Tuttavia, questa risposta è utile ma non necessariamente pertinente. Potrebbe funzionare meglio se il suggerimento per la votazione contiene una formulazione più esplicita, ad esempio "Questa risposta è utile e pertinente".
— WynandB
1
Su Javascript compresso con gzip: Puoi semplicemente configurare il tuo server web per comprimerlo ... (Oppure usa qualcosa come il modulo / opzione gzip_static di nginx) (e quello gunzip per gli altri client) Questo dovrebbe almeno inviare l'intestazione del tipo di contenuto corretto, con codifica contrassegnata come gzip, che probabilmente si tradurrà in un supporto del browser ancora migliore
— Gert van den Berg,
4

Mettere il javascript in alto sembrerebbe più ordinato, ma funzionalmente, è meglio seguire l'HTML. In questo modo, il tuo javascript non verrà eseguito e proverà a fare riferimento agli elementi HTML prima che vengano caricati. Questo tipo di problema spesso diventa evidente solo quando si carica la pagina su una connessione Internet effettiva, specialmente una lenta.

Puoi anche provare a caricare dinamicamente il javascript aggiungendo un elemento di intestazione da un altro codice javascript, sebbene ciò abbia senso solo se non utilizzi tutto il codice tutto il tempo.

— Matthias Wandel
fonte
3

Utilizzando cuzillion puoi testare l'effetto sul caricamento della pagina di diversi posizionamenti di tag di script utilizzando metodi diversi: inline, esterno, "tag HTML", "document.write", "elemento JS DOM", "iframe" e "XHR eval" . Vedere l' aiuto per una spiegazione delle differenze. Può anche testare fogli di stile, immagini e iframe.

— Sam Hasler
fonte
1

La risposta dipende da come stai usando gli oggetti di javascript. Come già accennato, caricare i file javascript a piè di pagina piuttosto che a piè di pagina migliora sicuramente le prestazioni, ma bisogna fare attenzione che gli oggetti utilizzati vengano inizializzati più tardi di quanto siano caricati a piè di pagina. Un altro modo è caricare i file "js" inseriti nella cartella che saranno disponibili per tutti i file.

— GustyWind
fonte
0

Come altri hanno già detto, molto probabilmente dovrebbe andare in un file esterno. Preferisco includere tali file alla fine del <head />. Questo metodo è più adatto alle persone che alle macchine, ma in questo modo so sempre dove si trova il JS. Non è altrettanto leggibile includere file di script altrove (imho).

Se hai davvero bisogno di spremere ogni ultimo ms, probabilmente dovresti fare quello che dice Yahoo.

— Berserk
fonte
0

I tuoi link javascript possono essere inseriti nella testa o alla fine del tag body, è vero che le prestazioni migliorano mettendo il link alla fine del tag body, ma a meno che le prestazioni non siano un problema, metterli nella testa è più bello in modo che le persone possano leggere e tu sai dove si trovano i link e puoi consultarli più facilmente.

— Timothy Trousdale
fonte
0

Direi che dipende dai fatti cosa intendi ottenere con il codice Javascript:

  • se hai pianificato di inserire all'esterno i tuoi script JS, il posto migliore è in testa alla pagina
  • se prevedi di utilizzare le pagine su smartphone, vai in fondo alla pagina, subito prima del tag.
  • ma, se hai pianificato di creare una combinazione HTML e JS (tabella HTML creata e popolata dinamicamente, ad esempio), devi metterla dove ti serve.
— Ludus H
fonte
Quello che ho detto di meritare meno !? Geez.
— Ludus H
Cosa c'entra l'essere esterno con il mettere in testa il copione? Perché la parte inferiore della pagina è un buon posto per inserire script specifici per smartphone? La tua affermazione sulla generazione dinamica di HTML da JS è vera solo se stai usando document.write, cosa che probabilmente non dovresti essere.
— Quentin
Hai "presunto" quello che pensavo e perché la mia risposta è stata negativa? Probabilmente pensi che la tua presunzione sia migliore della mia spiegazione, giusto? Ho solo pensato di dare una breve spiegazione, se qualcuno non è in grado di capire, chiederà maggiori informazioni. Nel mio commento ho suggerito di mettere JS a fine pagina per smartphone e tablet, appena prima della fine del corpo perché il caricamento dell'intera pagina è più veloce in quanto il browser non deve passare alla modalità "thread singolo", il contenuto della pagina inizierà ad apparire sullo schermo ... ma probabilmente lo sai.
— Ludus H
0

Gli script dovrebbero essere inclusi alla fine del tag body perché in questo modo l'HTML verrà analizzato dal browser e visualizzato prima che gli script vengano caricati.

— José Salgado
fonte
0

La risposta alla domanda dipende. Ci sono 2 scenari in questa situazione e dovrai fare una scelta in base allo scenario appropriato.

Scenario 1 - Script critico / Script necessario

Nel caso in cui lo script che stai utilizzando sia importante per caricare il sito web, si consiglia di posizionarlo all'inizio del documento HTML, ad esempio <head>. Alcuni esempi includono: codice dell'applicazione, bootstrap, caratteri, ecc.

Scenario 2 - Script meno importanti / di analisi

Sono inoltre utilizzati script che non influiscono sulla visualizzazione del sito web. Si consiglia di caricare tali script dopo aver caricato tutti i segmenti importanti. E la risposta sarà in fondo al documento, cioè in fondo al tuo <body>prima del tag di chiusura. Alcuni esempi includono: Google Analytics, hotjar, ecc.

Bonus: asincrono / rinvia

È inoltre possibile indicare ai browser che il caricamento dello script può essere eseguito contemporaneamente ad altri e può essere caricato in base alla scelta del browser utilizzando un argomento defer / async nel codice dello script.

per esempio. <script async src="script.js"></script>

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.