JavaScript inline è buono o cattivo?

Al momento sono passato da WordPress a Yii framework e uno sviluppatore esterno sta ricostruendo il mio sito.

Una cosa che noto è che ogni volta che invoca AJAX / jQuery nel modo Yii, incorpora inserti JavaScript in linea nella pagina web. Anche se sembra che il codice JavaScript sia posizionato sotto il piè di pagina, è ancora in linea.

In generale, sembra che il codice JavaScript sia più frequentemente inserito nella pagina web. Ho sempre pensato che gli script JavaScript dovrebbero, per quanto possibile, essere inseriti in file JavaScript. È una tendenza "nuova" in arrivo? O dovrei ancora provare a mantenere il codice JavaScript in file separati?

Inline JavaScript aumenta i tempi di download per la pagina, il che non va bene. Con una chiamata a un .jsfile, almeno queste possono essere chiamate parallele e tempi di download del contenuto ridotti. Sì, ci sono volte in cui va bene inserire JavaScript direttamente nel codice HTML, ma spesso è meglio scaricare questo il più possibile.

Tieni presente che i tempi di download della pagina (ovvero, l'HTML) e non tutte le chiamate alle risorse influiscono sulle metriche che influiscono sul posizionamento (anche se come PageRank o nelle SERP non importa). Il punto è che influenza le prestazioni di un sito per SEO, tuttavia si manifesta.

Sul mio sito di conversione di valuta, la maggior parte delle sessioni sono viste a pagina singola. Questo perché gli utenti possono eseguire il calcolo della valuta direttamente sulla pagina di destinazione (tutto il calcolo è gestito dal lato client con JavaScript).

La mia pagina viene scaricata e renderizzata in circa la metà del tempo in cui tutte le risorse (css, js e persino immagini ) sono in linea nella pagina. Poiché così pochi dei miei utenti visualizzano più pagine, non trarrebbe alcun vantaggio da alcune di queste risorse memorizzate nella cache tra le visualizzazioni di pagina.

Il mio sito non è tipico. La maggior parte dei siti ha più pagine per sessione e immagini di grandi dimensioni che renderebbero la mia tecnica meno applicabile. Non esiste una soluzione corretta a questa domanda; dipende dal sito. Devi misurarlo tu stesso in base al comportamento tipico dei tuoi utenti.

Non è necessariamente male avere JavaScript nel tuo file HTML ma devi fare un giudizio su di esso.

Si è male se si dispone di una grande quantità di JavaScript utilizzata su più pagine. In tal caso, JavaScript dovrebbe trovarsi in un file esterno, compresso e memorizzabile e se il tuo sito ha un traffico molto intenso dovresti utilizzare una CDN.

Tuttavia, se si dispone di una piccola quantità di JavaScript, il salvataggio di metterlo in un file esterno potrebbe essere negato dal fatto che è necessario effettuare una richiesta HTTP aggiuntiva per recuperarlo. In questo caso sarebbe più efficiente mantenere il JavaScript nella tua pagina.

Inoltre, se questo stesso piccolo frammento di JavaScript viene utilizzato su più pagine, sarebbe utile posizionarlo in un file esterno per sfruttare la memorizzazione nella cache.

Alla fine è necessario valutare la dimensione di JavaScript rispetto al sovraccarico di effettuare ulteriori richieste HTTP. Per la maggior parte, per un sito "medio", probabilmente non farà molta differenza semplicemente inserendolo in un file esterno.

Sono uno sviluppatore di Yii e posso dirti che Yii non ha nulla a che fare con questo . È completamente dal punto di vista dello sviluppatore , indipendentemente dal fatto che inserisca il codice Javascript in un file separato e lo registri con la pagina HTML (visualizzazione) con il CClientScript::registerScriptFilemetodo o lo metta direttamente per visualizzare il codice (HTML) e lo registri utilizzando il CClientScript::registerScriptmetodo.

Secondo la tua risposta, la maggior parte degli sviluppatori (professionisti?) Di Yii vota fortemente per il primo approccio, vale a dire: mantenere il maggior numero di codice Javascript in file separati possibile. Quindi, questo è sicuramente non è una nuova tendenza di codifica, ma piuttosto una pratica sviluppatore male. Almeno, è così che si vede nella comunità Yii.

EDIT : In realtà, ho dimenticato l'argomento più importante. Yii (così come la maggior parte degli altri framework PHP professionali) si basa sul modello di progettazione MVC (in realtà: modello architettonico). E lo stesso modello può essere utilizzato in fronte: codice HTML è il modello (dati), CSS è la vista (decoratore) e Javascript è il controller. Tutti loro messi in file separati , .jse le .cssfile - minified, obsfucated e gzip nella migliore delle ipotesi.

Quando si crea l'applicazione Yii, è possibile interrompere il modello MVC e mantenere tutto nello stesso file. La domanda è: vale la pena farlo, quali sono i vantaggi (nessuno?) E dove ti porterà? Puoi usare la stessa argomentazione, quando chiedi, se mantenere il codice JS in linea o no?

In realtà dipende dallo scopo della pagina Web che stai sviluppando:

Uso una piccola quantità di JavaScript incorporato, mentre preferisco scegliere file JavaScript esterni se è grande.

Ad ogni modo, quando la pagina carica JavaScript, deve essere eseguita per prima. La migliore pratica è utilizzare JavaScript esterno in modo da non allungare il contenuto della pagina. Inoltre semplifica il debug.

La risposta in realtà dipende da ciò che viene fatto.

Se noti JavaScript incorporato che viene utilizzato in tutto il sito Web (ad esempio un widget che viene mostrato all'interno dell'intestazione su tutte le pagine del sito Web), sarebbe opportuno spostarlo in un file JavaScript "comune".

In effetti, sposterei il maggior numero possibile di JavaScript in un file JavaScript comune anche se fosse utilizzato su una singola pagina. Configurerei il server per inviare cache e header di compressione forti per i file JavaScript; che riduce le dimensioni delle pagine ma non aumenta di molto le dimensioni del file JavaScript.

D'altra parte, se JavaScript è semplicemente un insieme di opzioni di configurazione / inizializzazione, ad esempio:

$(function () {
    myplugin({
        images: ["img1", "img2", "img3"]
    });
});

dove per qualche motivo non era possibile spostare il codice in un file JavaScript esterno (ad es. quando i parametri dell'immagine provengono dal database) lo terrei in linea. Detto questo, sceglierei plugin di terze parti "discreti" (o convertirli come tali).

Queste risposte mancano il segno. Dai un'occhiata alla cache in linea .

Poiché Yii è codificato in PHP, un modello PHP comune (o forse non comune) è che gli sviluppatori a volte scrivono codice PHP per generare dinamicamente codice Javascript sul server - in base a uno stato, condizione o valore noto al server - e quindi inviare tutto al client in un batch, consentendo al client di eseguire la funzione e saltare parte del calcolo che è già stato eseguito dal server.

Invece di inviare al client tutta una serie di funzioni JavaScript generiche in un file .js che non hanno contesto fino a quando non vengono forniti i dati (dati che potrebbero trovarsi sul server e richiedere un round trip), possiamo "inserire" il contesto / dati come parte della funzione Javascript. Questo è parsimonioso perché significa che stai inviando insieme funzionalità / dati e inviando solo funzionalità / dati di cui un client potrebbe aver bisogno in quel momento, invece di inviare l'intera app al caricamento della prima pagina. Significa anche che non è necessario esporre l'intera app in modo che sia facilmente scaricabile e retroingegnerizzata al caricamento della prima pagina perché si stanno iniettando solo piccole porzioni di funzionalità di cui ogni singolo client potrebbe aver bisogno in quel momento. Non sono sicuro di quanto sia utile per la SEO, ma sono sicuro che possa essere ottimizzato di conseguenza.

Si consideri il caso di un utente finale che scrive una pagina in alcuni software CMS utilizzando un editor WYSIWYG. In che modo questo utente aggiungerà nuove funzionalità alla pagina quando non ha accesso ai file .js di origine sul server? Passano alla scheda HTML e utilizzano Javascript in linea.

Non tutto il Javascript in linea è male; a volte anche onclick va bene. Come raccomandazione generale, evita di scrivere Javascript in linea e sarai sulla buona strada per costruire buone abitudini.

Riferimenti:

• Cache in linea
• Ottimizzazione di JavaScript dinamico con cache incorporate
• Spiegazione di macchine virtuali JavaScript in JavaScript: cache in linea
• Perché dovrei evitare gli script in linea? (vedi la risposta di MainMa e dell'utente1389596)

Il codice JS normalmente in linea è male, come hanno detto gli altri prima di me.

Ma penso a un caso d'uso in cui JS in linea è migliore .

Pensa a un CMS che inserisce una galleria guidata da JS. La galleria potrebbe essere stata realizzata in jQuery. È identificato da un attributo id, che non è solo univoco nella pagina, ma anche univoco in tutto il sito. In questo caso — credo — in linea JS sarebbe meglio, perché il codice JS è usato solo su una pagina e non hai un overhead HTTP