Come posso precaricare una pagina usando HTML5?

Ricordo di aver letto su un meta tag che fa precaricare il browser in una pagina. Qual è il tag di nuovo?

Il prefetching è incluso in una specifica W3C sotto il nome di Resource Hints . È implementato in Firefox, Chrome, IE 11, Edge, Opera dopo 12.1 e Android Browser dalla 4.4.4, vedere la pagina di precompilazione di caniuse per ulteriori e dettagli aggiornati.

Vedi anche le pagine di utilizzo e specifiche per le tecnologie correlate (i browser supportati vengono recuperati da caniuse e aggiornati a settembre 2015):

  • Prerendering caniuse / spec (IE 11, Edge, Chrome, Opera)
  • Preconnessione di cookie / specifiche (Firefox, Chrome 46, Opera 33)
  • DNS Prefetching caniuse / spec (IE9 ( vedi nota sotto ), IE10, ogni altro browser tranne Opera Mini e forse iOS Safari e il browser Android)

IE 9 implementava solo il prefetching DNS ma lo chiamava "prefetch" (attenzione!). Chrome per un po ‘(almeno fino al 2013) ha fatto solo il prerendering e il prefetching DNS. IE11 implementa lazyload , per immagini; Microsoft ha provato a farlo nelle specifiche ma finora non lo è. Si dice che iCab sia stato il primo browser ad implementare il prefetching, sebbene questo comportamento fosse automatico, non controllato dal markup.


Sfondo storico

Mozilla Application Suite e, successivamente, Firefox, implementano le specifiche (la specifica si basa in realtà sull’implementazione anticipata di prefetch di Mozilla, che era in qualche modo basata sull’intestazione Link: specificata in RFC 2068 che ora è stata superata da RFC 2616 [che fa non fare riferimento al Link: intestazione]. Consulta questa vecchia versione dei documenti ( 🕔 ) per maggiori dettagli.) Come da documentazione su MDN ( 🕔 ):

Il prefetching del collegamento è un meccanismo del browser che utilizza il tempo di inattività del browser per scaricare o precompilare i documenti che l’utente potrebbe visitare nel prossimo futuro.

Il browser cerca o un HTML o HTTP Link: con un tipo di relazione next o prefetch .

Quindi la syntax è:

  

Puoi anche utilizzare l’intestazione Link: HTTP:

 Link: ; rel=prefetch 

O un per simulare la stessa intestazione HTTP:

  

Si noti che è anche ansible utilizzare la relazione next , ma la sua funzione principale è quella di indicare la “prossima” pagina nella navigazione, quindi non si dovrebbe usarla per risorse o informazioni non correlate. Il prefetching viene eseguito anche sulle connessioni HTTPS.

iCab

Sembra che iCab ( 🕔 ) abbia implementato un precaricamento anticipato intorno al 2001. iCab apparentemente prefetch tutti i collegamenti alle pagine di contenuto (non risorse), non seguendo alcun suggerimento che lo sviluppatore avrebbe lasciato nel markup.

Alcuni user-agent possono scegliere di precaricare quando è presente, ma non si può scommettere su di esso.

  

Questa potrebbe non essere una buona risposta alla domanda, ma solo per le informazioni InstantClick.js può precaricare i tuoi collegamenti prima di fare effettivamente clic su di esso.

Come funziona

Prima che i visitatori facciano clic su un link, passano il mouse sopra il link. Tra questi due eventi di solito passano da 200 ms a 300 ms. InstantClick fa uso di quel tempo per precaricare la pagina, in modo che la pagina sia già presente quando fai clic.

Prealodare le risorse, è una delle attività più difficili e più semplici in un progetto FLASH o HTML5 perché abbiamo eseguito progetti di conversione da FLASH a HTML5.

I tipi più semplici di preloader sono preloader statici utilizzati per caricare il film in cui esistono. Per questi preloader, tutto ciò che devi fare è fermare il film su uno schermo di pre-caricamento, di solito il primo fotogramma del film, e tenerlo lì finché non sarai in grado di determinare che il film è stato completamente caricato nel lettore Flash.

Il Preloader ferma anche qualsiasi sfarfallio o ritardo quando si cambiano le immagini non collegate su una pagina Web poiché la stessa immagine deve essere scaricata dal server ogni volta che è necessario visualizzarla.

Abbiamo usato jQuery HMTL5 Loader nelle nostre app Web (HTML5), qui puoi vedere Github Repo .

Questo plugin richiede un file JSON per ottenere i file che deve precaricare e può precaricare immagini, sorgenti video e audio HTML, file di script e di testo. Oltre a questo, ha un diverso tipo di caricatori (circolare, linea, contatore grande, ecc.) E funzionalità aggiuntive così via.

È implementato in questo modo.

  

Funziona perfettamente in diversi browser tra cui Chrome, FireFox, Safari, Opera, ecc. E nei browser mobili.

Nota: l’abbiamo utilizzato per le nostre applicazioni Web HTML5 che vengono eseguite su piattaforms diverse tra cui Android e iOS.

Ci sono un paio di modi in cui puoi precaricare una pagina:

  • Il prefetching DNS indica al browser che sarebbero necessarie alcune risorse di un altro dominio, in modo che possa risolvere il DNS il più rapidamente ansible. Per fare ciò, devi aggiungere nel documento. Questo potrebbe essere utile se hai bisogno di usare elementi di terze parti.
  • Preconnect fa un ulteriore passo avanti e non solo risolve il DNS, ma fa anche un handshake TCP e se preconnetti a https farà una negoziazione TLS. Nell’intestazione devi aggiungere
  • Prefetch scarica la risorsa e la memorizza nella cache del browser per usarla in seguito. Puoi fare . Nota che questo dipende dal browser per decidere se ha senso scaricare la risorsa (potrebbe ignorarti)
  • Il Prerender è l’opzione più potente. Indica al browser di richiedere l’url e scaricare tutte le risorse. . Dovresti essere abbastanza sicuro che la persona aprirà la pagina, altrimenti perderai semplicemente la sua larghezza di banda.