Supporto di prerendering e prelettura

Usa il prerendering e la prelettura in Internet Explorer 11 per migliorare la navigazione del sito Web. Il prerendering (denominato anche precaricamento) specifica una pagina Web da caricare (di cui eseguire il rendering) in background mentre l'utente legge la pagina corrente, mentre la prelettura identifica le risorse da scaricare in background. Dato che entrambe le funzionalità scaricano il contenuto prima che sia necessario, le risorse sono disponibili immediatamente quando richieste dall'utente.

In questo argomento illustreremo come usare gli elementi link per eseguire il prerendering delle pagine Web e la prelettura delle risorse in background.

Migliorare le prestazioni ottenendo quello che serve in anticipo

Mentre un utente legge una pagina Web con IE11, il browser può caricare ed effettuare il rendering di altro contenuto in background. Come sviluppatore Web puoi identificare la pagina Web e le risorse che saranno più probabilmente richieste dall'utente. In questo modo riesci a migliorare le prestazioni percepite per il sito Web, perché il contenuto è pronto e può essere visualizzato più velocemente.

Supponi di avere scritto un articolo suddiviso in pagine Web distinte. Mentre l'utente legge ogni pagina puoi precaricare la successiva in modo da visualizzarla non appena l'utente è pronto per proseguire la lettura. Se hai creato un sito contenente vari articoli, puoi usare la home page per scaricare fogli di stile, immagini e altre risorse usati in tutte le pagine, in modo che ogni articolo venga caricato più velocemente.

A questo scopo puoi usare l'elemento link. In IE11 sono supportati i valori seguenti per l'attributo rel:

ValoreDescrizione ed esempio
prerendering

Identifica una pagina Web da caricare in background, nel caso in cui l'utente desideri visitarla successivamente.

Esempio:


<link rel="prerender" href="http://example.com/nextpage.html" />

IE11 supporta il prerendering di una pagina in background. Se viene rilevata una seconda richiesta di prerendering, questa sostituirà la prima. Le ulteriori richieste di prerendering vengono ignorate.

prefetch

Identifica un file di risorse, come un'immagine o un foglio di stile CSS, da scaricare nella cache.

Esempio:


<link rel="prefetch" href="http://example.com/style.css" />

IE11 supporta fino a dieci (10) richieste di prelettura. Le ulteriori richieste vengono ignorate.

dns-prefetch

Identifica una query DNS da risolvere in background, in modo che le richieste possano essere elaborate più velocemente.

Esempio:


<link rel="dns-prefetch" href="http://example.com/"/>

 

Nota  Internet Explorer supporta anche i valori "next" e "prev" per l'attributo rel. Per altre informazioni, vedi Determinazione delle destinazioni dello scorrimento in avanti.

Questi valori degli elementi link sono supportati solo per i documenti di primo livello; vengono ignorati quando applicati a documenti figlio (iframe).

Gli URL di destinazione devono fare riferimento a singoli nomi di file (relativi o completi). Non sono supportati caratteri jolly.

Caricamento efficace delle risorse in background

Quando usi l'elemento link per precaricare una pagina Web, IE11 carica ed esegue il rendering della pagina in background.

Il caricamento di una pagina Web in background non riduce il tempo necessario per il caricamento della pagina. La pagina richiede lo stesso numero di richieste di rete, indipendentemente dal fatto che venga caricata in primo piano o in background.

La differenza è osservabile dal punto di vista dell'utente. Poiché il caricamento e il rendering vengono eseguiti in background, le pagine sottoposte a prerendering vengono visualizzate immediatamente quando l'utente fa clic sul collegamento. Poiché gli utenti non vedono il caricamento della pagina, hanno la sensazione che venga visualizzata più velocemente.

Le condizioni per il prerendering sono le seguenti:

  • Se l'utente usa una rete a consumo, la capacità di prerendering delle pagine Web dipende dal piano dati associato al dispositivo usato per visualizzare la pagina.
  • L'URL di destinazione non può essere un download di file.
  • L'URL di destinazione utilizza i protocolli "http://" o "https://".
  • L'URL di destinazione è un documento di primo livello, ovvero non può essere un documento iframe.
  • È possibile eseguire il prerendering di una sola pagina Web alla volta.
  • Il documento che contiene l'elemento link è visibile, ovvero viene caricato nella scheda in primo piano e non è ridotto a icona.

Non è possibile eseguire il rendering completo delle pagine in background in presenza di queste condizioni:

  • La pagina di destinazione attiva una modifica dell'interfaccia utente, come ad esempio una casella alert, una chiamata di window.open o una notifica di sicurezza.
  • La pagina di destinazione riproduce automaticamente un file multimediale tramite l'elemento video o audio.
  • La pagina di destinazione modifica il travel log.
  • La finestra degli strumenti F12 è aperta.

In questi casi la pagina di destinazione viene messa in pausa mentre è in background. Quando l'utente sceglie la pagina di destinazione, questa viene visualizzata e il rendering riprende dal punto di sospensione.

Le pagine sottoposte a prerendering non vengono sempre visualizzate all'utente. Queste condizioni fanno sì che le pagine sottoposte a prerendering vengano ignorate:

  • L'utente non apre la pagina di destinazione entro cinque minuti.
  • L'utente apre una pagina diversa.
  • L'utente passa a una diversa scheda o istanza del browser.
  • Un processo JavaScript aggiunge un nuovo elemento link che richiede il prerendering di un'altra pagina Web.
  • Si verifica un errore durante il caricamento della pagina di destinazione, incluso il codice di errore HTTP 500 (errore del server), 404 (risorsa non trovata) o errori correlati, come problemi di connessione.

Quando una pagina sottoposta a prerendering viene scartata e poi richiesta in seguito, viene caricata direttamente dal server di hosting. Se la pagina è ancora presente nella cache del browser, potrebbe essere caricata più velocemente, tuttavia ciò non è garantito.

Il caricamento di una pagina in background potrebbe produrre alcuni effetti collaterali. In particolare, per le attività eseguite durante un evento load, potresti scoprire che:

  • I controlli Microsoft ActiveX non vengono caricati fino a quando l'utente non visualizza la pagina. Usa la proprietà readyState per verificare che gli oggetti siano disponibili prima di usarli in JavaScript.

  • Determinate animazioni potrebbero non apparire quando la pagina viene visualizzata. È probabile che le animazioni siano già state eseguite mentre la pagina era caricata in background.

  • I timer potrebbero fornire risultati imprevisti.

  • Vengono mantenuti i cookie, il contenuto memorizzato nella cache e le modifiche apportate da operazioni asincrone, come IndexedDB e l'archiviazione Web.

Se riscontri questi effetti collaterali o altri, usa l'API di visibilità delle pagine per stabilire se la pagina è visibile. Le animazioni dovrebbero ad esempio essere ritardate finché la pagina non è visibile. Per maggiori informazioni, vedi Uso efficace di prerendering e prelettura.

Specifica

HTML5, sezione 4.12.5.9

 

 

Mostra:
© 2015 Microsoft