Precaricamento, prerendering e precarico dei service worker

Negli ultimi due moduli, hai scoperto concetti come differire il caricamento di JavaScript, caricamento lento di immagini ed elementi <iframe>. Il differimento del caricamento delle risorse riduce l'utilizzo di rete e CPU durante il processo iniziale caricamento pagina scaricando le risorse nel momento in cui sono necessarie, anziché caricarli in anticipo, dove potrebbero potenzialmente rimanere inutilizzati. Ciò può migliorare i tempi di caricamento iniziali della pagina, ma le successive interazioni potrebbero comportare un ritardo se le risorse necessarie per alimentarle non sono già caricate al momento si verificano.

Ad esempio, se una pagina contiene un selettore di date personalizzato, puoi posticipare la data delle risorse del selettore finché l'utente non interagisce con l'elemento. Tuttavia, il caricamento le risorse on demand del selettore della data possono comportare un ritardo, forse lieve, ma forse no, a seconda della connessione di rete, delle funzionalità del dispositivo o entrambi, fino a quando le risorse non vengono scaricate, analizzate e disponibili per l'esecuzione.

Si tratta di un equilibrio un po' complicato: non vuoi sprecare larghezza di banda caricando risorse che potrebbero rimanere inutilizzate, ma ritardando le interazioni e la pagina successiva i carichi di lavoro potrebbero non essere ideali. Per fortuna, esistono diversi strumenti per trovare un migliore equilibrio tra questi due estremi. In questo modulo alcune tecniche che puoi utilizzare per arrivarci, come il precaricamento delle risorse, il prerendering di intere pagine e la pre-memorizzazione delle risorse nella cache mediante un service worker.

Precarica le risorse necessarie nel prossimo futuro con priorità bassa

È possibile recuperare preventivamente le risorse, tra cui immagini, fogli di stile o JavaScript, usando il suggerimento della risorsa <link rel="prefetch">. La Il suggerimento prefetch indica al browser che è probabile che sia richiesta una risorsa in nel prossimo futuro.

Quando viene specificato un hint prefetch, il browser può quindi avviare una richiesta per quella risorsa alla priorità più bassa per evitare di contendersi con le risorse richiesta per la pagina corrente.

Il precaricamento delle risorse può migliorare l'esperienza utente, in quanto l'utente non necessario attendere che le risorse necessarie vengano scaricate nel prossimo futuro, come possono essere recuperate istantaneamente dalla cache del disco quando necessario.

<head>
  <!-- ... -->
  <link rel="prefetch" as="script" href="/date-picker.js">
  <link rel="prefetch" as="style" href="/date-picker.css">
  <!-- ... -->
</head>

Lo snippet HTML precedente informa il browser che può eseguire il precaricamento date-picker.js e date-picker.css quando è inattivo. È possibile anche precarica le risorse in modo dinamico man mano che l'utente interagisce con la pagina in JavaScript.

prefetch è supportato su tutti i browser moderni ad eccezione di Safari, dove è disponibili dietro una bandiera. Se devi caricare preventivamente per il tuo sito web in un modo che funzioni su tutti i browser e che tu stia utilizzando un service worker. Leggi la sezione successiva di questo modulo sulla pre-memorizzazione nella cache mediante un service worker.

Precarica le pagine per velocizzare le navigazioni future

È anche possibile precaricare una pagina e tutte le relative risorse secondarie specificando Attributo as="document" quando rimanda a un documento HTML:

<link rel="prefetch" href="/page" as="document">

Quando il browser è inattivo, potrebbe essere avviata una richiesta a bassa priorità per /page.

Nei browser basati su Chromium, puoi precaricare i documenti utilizzando API Speculation Rules. Le regole di speculazione sono definite come un oggetto JSON incluse nel codice HTML della pagina o aggiunte dinamicamente tramite JavaScript:

<script type="speculationrules">
{
  "prefetch": [{
    "source": "list",
    "urls": ["/page-a", "/page-b"]
  }]
}
</script>

L'oggetto JSON descrive una o più azioni, che al momento supportano solo prefetch e prerender e un elenco di URL associati all'azione. Nella lo snippet HTML precedente, il browser riceve istruzioni per precaricare /page-a e /page-b. Analogamente a <link rel="prefetch">, le regole di speculazione sono suggerimento che il browser potrebbe ignorare in determinate circostanze.

Le librerie come Quicklink migliorano la navigazione nelle pagine tramite di precaricamento o di prerendering dei link alle pagine quando queste sono visibili all'interno dell'area visibile dell'utente. Ciò aumenta la probabilità che l'utente prima o poi per giungere a quella pagina, a differenza del precaricamento di tutti i link presenti nella pagina.

Pagine di prerendering

Oltre a precaricare le risorse, è anche possibile suggerire al browser per eseguire il prerendering di una pagina prima che l'utente vi acceda. In questo modo, puoi raggiungere si carica immediatamente, mentre la pagina e le relative risorse vengono recuperate ed elaborate sullo sfondo. Quando l'utente accede alla pagina, questa viene inserita nel in primo piano.

Il prerendering è supportato tramite l'API Speculation Rules:

<script type="speculationrules">
{
  "prerender": [
    {
      "source": "list",
      "urls": ["/page-a", "page-b"]
    }
  ]
}
</script>
di Gemini Advanced.

Precarica demo e prerendering

Pre-memorizzazione nella cache dei service worker

È anche possibile precaricare le risorse in modo speculativo utilizzando un service worker. La pre-memorizzazione nella cache dei service worker può recuperare e salvare risorse utilizzando l'API Cache, consentendo al browser di gestire la richiesta utilizzando l'API Cache senza andare in rete. La pre-memorizzazione nella cache dei service worker utilizza un service worker molto efficace strategia di memorizzazione nella cache, nota come strategia solo per la cache. Questo pattern è molto efficace perché, una volta inserite le risorse nella cache dei service worker, vengono recuperati quasi istantaneamente su richiesta.

Mostra il flusso di memorizzazione nella cache dei service worker dalla pagina al service worker, fino alla cache.
. La strategia solo cache recupera sempre e solo le risorse idonee dalla durante l'installazione del service worker. Al termine dell'installazione, le risorse vengono recuperate solo dalla cache dei service worker.
di Gemini Advanced.
.

Per prememorizzare nella cache le risorse utilizzando un service worker, puoi usare Workbox. Se è preferibile scrivere codice personalizzato per memorizzare nella cache un insieme . In ogni caso, decidi di utilizzare un service worker per prememorizzare nella cache è importante sapere che la pre-memorizzazione nella cache ha luogo quando il servizio worker è installato. Dopo l'installazione, le risorse prememorizzate nella cache vengono disponibili per il recupero in qualsiasi pagina controllata dal service worker sul tuo sito web.

Workbox utilizza un manifest di precache per determinare quali risorse devono essere prememorizzati nella cache. Un manifest pre-cache è un elenco di file e informazioni sul controllo delle versioni che funge da "fonte di dati" le risorse vengano prememorizzate nella cache.

[{  
    url: 'script.ffaa4455.js',
    revision: null
}, {
    url: '/index.html',
    revision: '518747aa'
}]

Il codice precedente è un manifest di esempio che include due file: script.ffaa4455.js e /index.html. Se una risorsa contiene versione le informazioni presenti nel file stesso (noto come hash del file), il revision può essere lasciato come null, perché il file è già sottoposto al controllo delle versioni (ad esempio, ffaa4455 per la risorsa script.ffaa4455.js nel codice precedente). Per risorse senza controllo delle versioni, è possibile generare una revisione al momento della build.

Una volta configurato, un service worker può essere utilizzato per prememorizzare nella cache le pagine statiche o per velocizzare le navigazioni nelle pagine successive.

workbox.precaching.precacheAndRoute([
  '/styles/product-page.ac29.css',
  '/styles/product-page.39a1.js',
]);

Ad esempio, in una pagina della scheda di prodotto di e-commerce, è possibile utilizzare un service worker prememorizzare nella cache i CSS e JavaScript necessari per il rendering della pagina dei dettagli del prodotto, rendendo molto più veloce la navigazione verso la pagina dei dettagli del prodotto. Nella nell'esempio precedente, product-page.ac29.css e product-page.39a1.js sono prememorizzati nella cache. Il metodo precacheAndRoute disponibile in workbox-precaching registra automaticamente i gestori necessari per garantire che le risorse prememorizzate nella cache vengono recuperati dall'API dei service worker quando necessario.

Poiché i service worker sono ampiamente supportati, puoi utilizzare il service worker la pre-memorizzazione nella cache su qualsiasi browser moderno laddove richiesto dalla situazione.

di Gemini Advanced.

Verifica le tue conoscenze

Con quale priorità viene applicato un suggerimento prefetch?

stress.
Alto.
Medio.

Qual è la differenza tra il prerecupero e eseguire il rendering di una pagina?

Mentre sia il precaricamento che il prerendering di una pagina ricevono una pagina e tutte le sue sottorisorse, un precaricamento recupera solo la pagina e tutti i suoi delle risorse, mentre un prerendering fa un ulteriore passo lo sfondo dell'intera pagina finché l'utente non vi accede.
Sono per lo più uguali, solo un prerendering ottiene tutti i mentre un precaricamento no.

La cache del service worker e la cache HTTP sono uguali.

Vero
Falso

A seguire: una panoramica dei web worker

Ora che sai in che modo il precaricamento, il prerendering e la pre-memorizzazione dei service worker ad esempio quando si tratta di accelerare la navigazione verso il futuro. pagine, sei nella posizione di prendere decisioni informate su come questo per il tuo sito web e per i suoi utenti.

A seguire, viene fornita una panoramica dei web worker e di come possono impiegare costose a partire dal thread principale e dare a quest'ultimo più spazio per le interazioni degli utenti. Se ti è mai capitato di chiederti cosa potresti fare per fornire alla Fissa un po' di respiro, allora i prossimi due moduli ti valse la pena!