Javascript - testa, corpo o jQuery?

Questa domanda è solo per chiarire alcune cose. Alcune cose come questa sono già state fatte prima, e questo raggruppa tutte in un'unica domanda: dove dovrebbe andare JavaScript nel documento HTML o, cosa più importante, è importante? Così, una delle cose che mi chiedo è, faJavascript - testa, corpo o jQuery?

<head> 
<script type="text/javascript"> 
alert("Hello world!"); 
</script> 
</head>

affatto differiscono (in termini di funzionalità) da

<body> 
<!-- Code goes here --> 
<script type="text/javascript"> 
alert("Hello world!"); 
</script> 
</body>

Ancora più importante, voglio concentrarmi su JS che modificano o usi elementi dal DOM in alcun modo. Quindi so che se metti qualcosa come prima del <element id="test"></element> nel tuo corpo, allora non funzionerà poiché il corpo viene caricato dall'alto verso il basso, facendo prima caricare il JS, che poi procederà a cercare di manipolare un elemento che non funziona Esistono ancora. Quindi dovrebbe, come sopra, andare nel <head> o appena prima del tag </body>. La domanda è, a parte l'organizzazione e lo smistamento, importa quale di questi è scelto, e se sì, in che modo?

Naturalmente, c'è anche un terzo metodo - il modo jQuery:

$(document).ready(function(){ /*Code goes here*/ });

In questo modo, non importa in quale parte del corpo si inserisce il codice, dal momento che verrà eseguito solo quando tutto ha caricato. La domanda qui è, vale la pena importare un'enorme libreria JS solo per utilizzare un metodo la cui necessità potrebbe essere sostituita con un'accurata collocazione degli script? Vorrei solo chiarire un po 'le cose qui, se vuoi rispondere, vai avanti! Riepilogo: dove dovrebbero andare diversi tipi di script - testa o corpo e/o importa? JQuery vale la pena solo per l'evento pronto?

fonte

2012-06-12 Bluefire

Quindi la domanda [Dove dovrei dichiarare i file JavaScript usati nella mia pagina? In o vicino a?] (Http://stackoverflow.com/questions/1013112/where-should-i-declare-javascript-files-used-in-my-page-in-head-head-or-nea) non l'ha chiarito per te? E in ogni caso, se sei interessato alla funzionalità di 'ready' puoi solo dare un'occhiata al codice sorgente e replicarlo se necessario. –

Il tuo "metodo jQuery" può essere realizzato con JavaScript nativo: 'window.onload = function() {}' - Nessuna libreria necessaria – Gary

@Gary - abbastanza giusto – Bluefire

Il metodo consigliato è quello di inserirlo prima del tag </body>. Yahoo performance article suggerisce anche che oltre agli YSlow e agli Page Speed membri di Yahoo e Google rispettivamente.

Citando l'articolo linkato sopra Yahoo:

Il problema causato da script è che bloccano download paralleli. La specifica HTTP/1.1 suggerisce che i browser non scarichino più di due componenti in parallelo per nome host. Se si servono le immagini da più nomi host, è possibile ottenere più di due download in modo che si verifichino in parallelo. Durante lo scaricamento di uno script, tuttavia, il browser non avvia altri download, anche su nomi host diversi.

Quando si mette script nella <head> tag, il browser va per il loro mantenimento in tal modo altre cose in attesa fino a quando gli script vengono caricati gli utenti che percepirà come caricamento lento della pagina. Questo è il motivo per cui dovresti mettere gli script in fondo.

quanto riguarda:

$(document).ready(function(){/*Code goes here*/});

Si è sparato quando DOM è disponibile e pronto per essere manipolato. Se si inserisce il codice alla fine, non sarà necessariamente necessario, ma in genere ciò è necessario perché si desidera fare qualcosa non appena DOM è disponibile per l'uso.

fonte

2012-06-12 10:03:58 Sarfraz

Questa è un'ottima risposta, ma cosa dovresti fare se hai bisogno di usare qualcosa come '$ (" td.speical-format "). Live()' su una tabella che precede l'inclusione di jquery? –

Se hai intenzione di metterlo per ultimo, usa sempre uno spinner/loader .. questo perché se il tuo css/js è grande o grande in numeri allora alcune delle cose che dipendono da jquery non funzioneranno ... – DragonFire

come da il tuo punto, il tuo modo di dire, dovremmo scaricare i file della libreria JS anche nella parte inferiore. a meno che non usiamo async, sarà un blocco JavaScript di rendering. Ma i file della libreria JS dovrebbero essere pronti quando il processo di pittura è completato per il codice JavaScript personalizzato (es: document.ready()) per eseguire le loro funzioni vero? – lpradhap

Anche se una pratica comune, mettendo script tag nel head di solito non è una buona idea, in quanto detiene il rendering della pagina fino a quando questi script sono stati scaricati ed elaborati (salvo l'utilizzo del async o defer e il browser di supporto loro).

Il solito consiglio è di inserire i tag script all'estremità del tag body, ad esempio appena prima dello </body>. In questo modo, tutti gli elementi DOM sopra lo script saranno accessibili (vedi link sotto). Un avvertimento su questo è che ci può essere un breve momento in cui la tua pagina è stata resa almeno parzialmente ma i tuoi script non sono stati elaborati (ancora), e se l'utente inizia a interagire con la pagina, potrebbero fare qualcosa per generare un evento che il tuo script non ha ancora avuto il tempo di agganciare. Quindi devi essere consapevole di ciò. Questo è uno dei motivi del miglioramento progressivo , che è l'idea che la pagina funzionerà senza JavaScript, ma funziona meglio con esso. Se stai facendo una pagina/app che semplicemente non funzionerà senza JavaScript, potresti includere alcuni script in linea nella parte superiore del tag body (ad esempio, <script>minimal code here</script>) che aggancia gli eventi di bubbling su document.body e in entrambe le code loro per l'azione quando il tuo script è caricato, o chiede semplicemente all'utente di aspettare.

Utilizzo delle caratteristiche come jQuery di ready è fuori bene, ma non veramente necessario di librerie (per esempio, se siete in controllo di dove saranno i script tag, non è di solito bisogno di usarlo, ma se si' sto scrivendo un plug-in jQuery che deve fare qualcosa sul carico [che è relativamente raro, normalmente aspettano solo di essere chiamato], di solito lo fai).

Più lettura:

fonte

2012-06-12 10:05:13

Quindi, se sto creando un'app a cui JS è integrato, dovrei usare un hook inline; cosa succede se uno sta creando un'estensione di Chrome (dove JS in linea non è consentito)? – Bluefire

@Bluefire: Non ho detto che dovresti *, solo che sarebbe un modo per difendersi da quel breve intervallo. Stai dicendo che non puoi fare il codice '' in un'estensione di Chrome? –

No: D Sto dicendo che non puoi fare cose del tipo ''. Ho pensato che fosse ciò che intendevi per "in linea". – Bluefire

E 'possibile scaricare javascript in parallelo facendo qualcosa di simile a questo:

(function() { 
    var ele = document.createElement('script'); 
    ele.src = "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"; 
    ele.id = "JQuery"; 
    ele.onload = function() { 
     //code to be executed when the document has been loaded 
    }; 
    document.getElementsByTagName('head')[0].appendChild(ele); 
})();

Nell'esempio si scarica minisito JQuery v1.7.2 di Google, questo è un buon modo per scaricare JQuery dal momento che scaricarlo da Google è come usare un CDN e se l'utente è stato su una pagina che ha utilizzato lo stesso file potrebbe essere memorizzato nella cache e quindi non deve essere scaricato

C'è un ottimo discorso tecnico di Google su questo qui http://www.youtube.com/watch?v=52gL93S3usU&feature=plcp

fonte

2012-06-12 10:46:23 Luka

Javascript - testa, corpo o jQuery?

risposta

Problemi correlati