Pre-caricamento di file esterni (CSS, JavaScript) per altre pagine

Question

Sono curioso di sapere se esiste un modo efficiente per attendere che la pagina principale di un sito venga caricata e quindi precaricare i file CSS e di script che conosco sarà probabilmente necessario per le altre pagine del sito.

Desidero che la prima pagina del sito sia il più veloce possibile (snella e media). È probabile che l'utente non faccia immediatamente clic su un collegamento. Poiché ci sarà probabilmente un po 'di tempo di inattività, questo sembra un momento opportuno per precaricare alcune risorse esterne. Il pre-caricamento dovrebbe farli memorizzare nella cache. Quando l'utente fa clic su un'altra pagina, l'unica richiesta necessaria sarà per il contenuto e possibilmente alcune immagini, ecc.

Qualcuno ha fatto questo? È una cattiva idea? Esiste un modo elegante per implementarlo?

Answer 1

Questa è un'idea interessante, non sono sicuro che potrebbe essere eseguita tramite Javascript (almeno la parte CSS).

Si potrebbe inserire un IFRAME sulla pagina con le altre risorse che si desidera caricare, ma mettere un po 'di CSS su di esso per nasconderlo ...

.preload { 
    position : absolute; 
    top  : -9999px; 
    height : 1px; 
    width : 1px; 
    overflow : hidden; 
} 

Se si mette questo alla fine della pagina quindi penserei che caricherà dopo il il resto della pagina. In caso contrario, è possibile utilizzare alcuni Javascript e setTimeout per creare effettivamente l'IFRAME dopo il caricamento della pagina.

Answer 2

Sta a te prendere la decisione sulla larghezza di banda.

Se precarico tutto, si ottiene una migliore user-experience, ma un molto alto consumo di banda, in quanto l'utente potrebbe anche non utilizzare mai quella roba che è stata caricata, il che rende molto inefficiente.

Se non si precarica nulla, la larghezza di banda viene utilizzata al minimo e l'utente carica solo ciò di cui ha bisogno.

Answer 3

Se vuoi semplicemente caricarli nella cache del browser, suppongo che potresti farlo tramite un documento in un iframe nascosto.

Answer 4

L'idea di iFrame nascosta che le persone promuovono funzionerà perfettamente.

Se il tempo di caricamento della pagina di destinazione è anch'esso una priorità, la cosa da fare sarebbe creare dinamicamente l'iFrame in javascript al termine del caricamento della pagina.

Answer 5

È possibile eseguire il precaricamento di file arbitrari (CSS, immagini, ecc.) Come questo, la domanda è se il piccolo ritorno e il costo della larghezza di banda aggiunto lo rendono l'ottimizzazione giusta da perseguire ora. The Yahoo performance rules sono un ottimo punto di partenza. Se questa è la tua prima ottimizzazione del rendimento, probabilmente stai iniziando nel posto sbagliato. Questa è sicuramente un'ottimizzazione con un importante compromesso (l'aumento della larghezza di banda), mentre altre ottimizzazioni come "Minimize HTTP Requests" hanno costi minori e probabilmente un payoff molto più grande.

Per fare ciò in un modo compatibile con più browser, in pratica si aggiunge codice all'evento onload della propria pagina che crea un oggetto DOM, come un, e imposta il proprio src all'URL che si desidera precaricare. Tieni presente che poiché una grande parte di tutti i visitatori probabilmente visita solo la tua prima pagina, non avrebbero mai richiesto i file che hai precaricato. Ho visto fare il preloading come questo risultato in un aumento di richieste e larghezza di banda per i file prefetched.

Answer 6

Penso che dovresti analizzare a che ora ci vuole l'utente per arrivare a un'altra pagina dopo l'atterraggio sulla tua pagina principale.

Poi verificare che collega alle pagine principali sono seguiti più di frequente e la pagina principale evento/OnLoad fuoco una funzione timer setTimeOut che eseguirà la funzione ausiliaria con il codice di pre-carico per i più probabili seguente link.

Answer 7

Sono d'accordo con Gareth, avrei creato l'iframe in modo dinamico. Ti consigliamo di inserire questo codice come l'ultima cosa nella tua pagina di destinazione.

es:

.... 
    <script type="text/javascript"> 
    preloadContent(); 
    </script> 
</body> 
</html> 

Per quanto riguarda la memorizzazione nella cache, che in realtà dipende dal vostro setup. Ma il riferimento su Yahoo! il sito web dovrebbe essere un buon inizio: http://developer.yahoo.com/performance/rules.html#expires In breve, una buona tecnica è quella di avere i file statici (CSS, immagini, potenzialmente anche script) con una data di scadenza di 1 anno. In questo modo, qualsiasi cosa venga scaricata dal client verrà mantenuta nella cache del browser senza nemmeno verificare le nuove versioni.

Se fare essere necessario modificare un file:

• Creare un file diverso (nome del file ad esempio diverso) per le immagini
• CSS e script possono essere aggiunti un numero di versione/data alla fine .

Ciò garantisce che un client non utilizzi mai contenuto non aggiornato.

Cheers!

Answer 8

Filament Group ha una bella sceneggiatura jQuery che si precaricare le immagini da un file CSS:

Filament Group article

In realtà, ci sono una serie di altre soluzioni basate su jQuery se google 'jquery precarico'.

Answer 9

Il caricamento di tutto in un iframe nascosto non è l'unico modo. Ci sono due fantastici messaggi di Stoyan Stefanov sul precaricamento/prefetch di file JS e CSS per l'ottimizzazione.

ecco i link:

http://www.phpied.com/the-art-and-craft-of-postload-preloads/

http://www.phpied.com/preload-cssjavascript-without-execution/

Personalmente, come AJAX affrontare un sacco di bene. È bello e pulito e funziona bene a meno che non vogliate recuperare le informazioni su più domini.

La sua ultima tecnica nel secondo link sembra anche estremamente promettente (anche se non ho ancora provato.)