Sono abituato ad attaccare il mio JS nella parte inferiore dell'elemento del mio corpo (come per HTML5Boilerplate), ma dal TurboLinks, che sarà on by default in Rails 4, ricarica il corpo (e il titolo) su ogni richiesta, avrebbe senso per mettere il mio JS in testa d'ora in poi? Ci sono ancora guide decenti o buone pratiche su questo?Rails 4 + Turbolinks: JS nella testa o nella parte inferiore del corpo?
risposta
Anche precompilato application.js (come per la pipeline delle risorse) è attivo e in testa per impostazione predefinita. Il ragionamento è che anche se js è caricato prima del resto della pagina, poiché js è sempre lo stesso verrà caricato dalla cache dalla seconda richiesta in poi, quindi non c'è un motivo valido per servirlo nella parte inferiore del corpo più.
Se si utilizza Turbolinks 5, ora è possibile inserire i turbolinks nella parte inferiore del corpo (e seguire le best practice di sviluppo Web per il rendering di una pagina). Questo aiuta anche con SEO mai così poco. Basta aggiungere gli script per la parte inferiore del corpo e aggiungere
data-turbolinks-eval="false"
al tag script. Ciò impedirà ai turbolinks di valutare dopo il il caricamento iniziale della pagina. Ecco come si è fatto con l'javascript_include_tag
:
<%= javascript_include_tag 'application', 'data-turbolinks-eval' => 'false'%>
poi basta usare
$(document).on('turbolinks:load', function() { // code to be executed when use changes pages });
grazie, che è abbastanza buono per me :) – stephenmurdoch
si memorizza nella cache il file, ma ancora bisogno di aspettare per caricare il js (se è caricata l'intera pagina), vero? Un attributo 'async' non fornirebbe i vantaggi dell'aggiunta al fondo senza essere ricaricato da Turbolinks? – michelpm
Con le risorse basate su pignoni normali delle rotaie, si avrà un file j compresso e limitato che di solito è memorizzato nella cache del browser. Il tempo di caricamento (come in "caricare il codice") è comunque una frazione del download totale + attesa + tempo di caricamento per js. In ogni caso, TL carica semplicemente l'intera pagina in background, quindi prende gli elementi (titolo, corpo ecc.) E li scambia nella pagina invece di quelli correnti. È un comportamento semplice, che può o non può portare a una maggiore velocità. In esempi del mondo reale, ho trovato le ruote dentate compilate con javascript in testa più che abbastanza. – rewritten