Ottimizza JavaScript Download CSS

Question

Ho un numero di pagine per il mio sito Web che utilizzano tutte jQuery e JSON e lo stesso CSS, tranne alcune pagine. La prima pagina è l'accesso dell'utente. Poiché l'utente impiegherà del tempo per digitare il nome utente e la password, desidero scaricare tutti i file JavaScript e CSS necessari per l'intera sessione utente durante il login. Come si può fare? L'intestazione è la stessa per tutte le pagine. Come lo ottimizzo?

Answer 1

La mia idea verrebbe caricata nei file js e css dyna micamente dopo document.load. Ciò non influirebbe sul tempo di caricamento della pagina di accesso, ma anche sul caching dei file js e css una volta che l'utente ha effettuato il login.

Si potrebbe anche facilmente cambiare a document.ready se si carica più velocemente per voi.

E qualcosa di simile?

$(document).load(function() { 
    function preloadFile(filename, filetype){ 

     //For javascript files 
     if (filetype=="js"){ 
      var fileref=document.createElement('script'); 
      fileref.setAttribute("type","text/javascript"); 
      fileref.setAttribute("src", filename); 
     } 

     //For CSS files 
     else if (filetype=="css") { 
      var fileref=document.createElement("link"); 
      fileref.setAttribute("rel", "stylesheet"); 
      fileref.setAttribute("type", "text/css"); 
      fileref.setAttribute("href", filename); 
     } 

     document.getElementsByTagName("head")[0].appendChild(fileref) 
    } 

    //Examples of how to use below 
    preloadFile("myscript.js", "js"); 
    preloadFile("javascript.php", "js"); 
    preloadFile("mystyle.css", "css"); 
}); 

Riferimenti

http://www.javascriptkit.com/javatutors/loadjavascriptcss.shtml

Answer 2

Vorrei scaricare tutti i file JavaScript e CSS necessarie per l'intera sessione utente durante l'accesso

<title>Login</title> 
<script src="foo.js"></script> <!-- This line might be better placed just before </body> --> 
<link rel="stylesheet" type="text/css" href="foo.css"> 

Answer 3

• aggiungere tutti i css/javascript nella pagina di login.
• Metti tutti i tuoi CSS in alto nella sezione HEAD.
• Metti tutti i tuoi Javascripts in basso.

• Inoltre, rendi i tuoi Javascripts e CSS come file esterni così come sono memorizzati nella cache dal browser (invece di scrivere il javascript in linea e css nella pagina).

• Minify Javascript e CSS

UPDATE 2

carico Post del JS e CSS potrebbe anche essere fatto utilizzando YUI GET UTILITY

Per maggiori dettagli vedi questo Yahoo : Best Practises for Optimizing your WebSite

Answer 4

mi consiglia un caricatore asincrono esempio requireJS.

Dopo aver creato e compresso javascript e css, assegnare il caricamento di esso a un evento, ad esempio quando l'utente si concentra sul campo del nome utente.

Facebook utilizza un trucco simile con le loro query di esempio: caricamento dei dati rilevanti per l'utente quando la casella di ricerca viene messa a fuoco.