Qual è il modo migliore per caricare Javascript in una pagina per ottimizzare le prestazioni?
Risposte:
Ci sono alcune cose che puoi fare:
Carica HTML e CSS prima di JavaScript. Ciò fornisce al browser tutto il necessario per disporre la pagina e renderizzarla. Questo dà all'utente l'impressione che la pagina sia scattante. Posizionare tag o blocchi di script il più vicino possibile al tag body di chiusura.
Prendi in considerazione l'utilizzo di una CDN. Se si utilizza una delle librerie popolari come JQuery, molte aziende (ad esempio google, yahoo) gestiscono CDN gratuiti che è possibile utilizzare per caricare le librerie.
Carica il codice da un file esterno anziché da uno script incorporato. Ciò offre al browser l'opportunità di memorizzare nella cache il contenuto JS e di non doverlo caricare affatto. Il caricamento successivo delle pagine sarà più veloce.
Attiva la compressione zip sul server web.
Yahoo ha una grande pagina di suggerimenti che possono aiutare a ridurre i tempi di caricamento della pagina.
Oltre a Minifing, gziping e CDNing (nuova parola?). Dovresti considerare di posticipare il caricamento. Fondamentalmente ciò che fa è aggiungere gli script in modo dinamico e prevenire il blocco, consentendo download paralleli.
Ci sono molti modi per farlo, questo è quello che preferisco
<script type="text/javascript">
function AttachScript(src) {
window._sf_endpt=(new Date()).getTime();
var script = document.createElement("script");
document.getElementsByTagName("body")[0].appendChild(script);
script.src = src;
}
AttachScript("/js/scripts.js");
AttachScript("http://www.google-analytics.com/ga.js");
</script>Posizionalo subito prima del tag body di chiusura e usa AttachScript per caricare ogni file js.
Altre informazioni qui http://www.stevesouders.com/blog/2009/04/27/loading-scripts-without-blocking/
Potresti voler esaminare anche il modo in cui Google carica Analytics:
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-xxxxxxx-x']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>Poiché è considerato una sorta di "best practice" di script:
http://www.stevesouders.com/blog/2009/12/01/google-analytics-goes-async/
Un paio di persone di Google hanno annunciato un nuovo progetto open source a Velocity 2010 chiamato Diffable . Diffable esegue un po 'di magia per pubblicare in modo incrementale solo le parti di JS, HTML e CSS che sono cambiate rispetto alla versione memorizzata nella cache dell'utente, anziché inviare un intero nuovo file quando viene rilasciata una nuova versione.
Questa tecnica è follemente interessante ed è attualmente la più efficace (e ne vale la pena) su siti Web in cui si utilizza una base di codice JavaScript di grandi dimensioni con piccole modifiche frequenti al codice. Ciò si applica particolarmente bene ad applicazioni come Google Maps, che subisce almeno una versione ogni martedì e in media circa 100 nuove versioni all'anno. Ha anche molto senso in generale quando l'archiviazione locale HTML5 diventa più diffusa.
A proposito, se non hai visto Michael Jones di Google parlare del cambiamento (in un contesto geospaziale) vale la pena guardare il suo intero keynote a GeoWeb 2009 .
Per dare un aggiornamento a questa domanda. Penso che nel moderno, il modo di caricamento non bloccante non sia più necessario, il browser lo farà per te.
Ho aggiunto una domanda a StackOverflow, aggiungerò il contenuto qui come richiesto.
L'unica differenza è che l'evento di caricamento verrà generato un po 'prima, ma il caricamento dei file stessi rimane lo stesso. Voglio anche aggiungere che anche se l'onload si attiva anche in precedenza con lo script non bloccante, ciò non significa che i file JS vengano attivati prima. Nel mio caso la configurazione normale è risultata la migliore
Ora prima gli script, sembrano così:
<script>
(function () {
var styles = JSON.parse(myObject.styles);
for( name in styles ){
var link = document.createElement('link');
link.setAttribute('rel', 'stylesheet');
link.setAttribute('type', 'text/css');
link.setAttribute('href', styles[name]);
document.getElementsByTagName('head')[0].appendChild(link);
}
var scripts = JSON.parse(myObject.scripts);
for( name in scripts ){
var e = document.createElement('script');
e.src = scripts[name];
e.async = true;
document.getElementsByTagName('head')[0].appendChild(e);
}
}());
</script>myObject.styles è qui solo un oggetto che contiene tutti gli URL per tutti i file.
Ho eseguito 3 test, ecco i risultati:
Installazione normale
Questa è solo la normale installazione, abbiamo 4 file CSS nella testa e 3 file CSS nella parte inferiore della pagina.
Ora non vedo nulla che blocchi. Quello che vedo è che tutto si sta caricando allo stesso tempo.
JS non bloccante
Ora per andare un po 'oltre, ho reso SOLO i file js non bloccanti. Questo con lo script sopra. Improvvisamente vedo che i miei file CSS stanno bloccando il carico. Questo è strano, perché non sta bloccando nulla nel primo esempio. Perché css sta bloccando improvvisamente il carico?
Tutto non bloccante
Alla fine ho fatto un test in cui tutti i file esterni sono caricati in modo non bloccante. Ora non vedo alcuna differenza con il nostro primo metodo. Sembrano entrambi uguali.
Conclusione
La mia conclusione è che i file sono già caricati in modo non bloccante, non vedo la necessità di aggiungere uno script speciale.
O mi sto perdendo qualcosa qui?
Di Più:
- Articolo: http://www.yuiblog.com/blog/2008/07/22/non-blocking-scripts/
- Domanda: /programming/6828271/javascript-non-blocking-scripts-why-dont-simply-put-all-scripts-before-body
- Domanda: /programming/5765113/do-modern-browsers-still-limit-parallel-downloads
- Codice: http://calendar.perfplanet.com/2010/the-truth-about-non-blocking-javascript/
- Codice: http://blog.fedecarg.com/2011/07/12/javascript-asynchronous-script-loading-and-lazy-loading/