it-swarm.it

Qual è il modo migliore per caricare Javascript in una pagina per ottimizzare le prestazioni?

C'è un modo per caricare il mio JavaScript in una pagina che lo farà caricare più velocemente?

14
Jason

Ci sono alcune cose che puoi fare:

  1. Carica HTML e CSS prima di JavaScript. Ciò fornisce al browser tutto il necessario per disporre la pagina e renderla. 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.

  2. Prendi in considerazione l'utilizzo di una CDN. Se stai utilizzando una delle librerie popolari come JQuery, molte aziende (ad esempio google, yahoo) gestiscono CDN gratuiti che puoi utilizzare per caricare le librerie.

  3. 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.

  4. Attiva la compressione Zip sul server web.

Yahoo ha una ottima pagina di suggerimenti che possono aiutare a ridurre i tempi di caricamento della pagina.

14

Oltre a Minifing, gziping e CDNing (nuova parola?). Dovresti prendere in considerazione il caricamento differito. 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>

Inseriscilo appena 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/

7

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/

7
Jeff Atwood

Un paio di persone di Google ha annunciato un nuovo progetto open source a Velocity 201 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 na versione ogni martedì e una media di 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 tutto il suo keynote di GeoWeb 2009 .

3
JasonBirch

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 load 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

Page load with css in the head and javascript at the bottom

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

Page load with non-blocking javascript

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 blocca improvvisamente il carico?

Tutto non bloccante

Page load with everything non-blocking

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ù:

1
Saif Bechan