Requisiti: Quando si richiede un sito web, è necessario caricare molte risorse; le richieste di rete influenzano anche la velocità di rendering della pagina web; quando l'utente clicca sull'operazione per caricare alcune risorse può influire sull'esperienza utente; ora lo sviluppo rapido di Internet, la banda e il traffico non sono più così costosi, come pre-caricare le risorse in anticipo o stabilire un collegamento con il server target?
Preconnessione
La preconnessione per le proprietà degli elementi è un indizio al browser che l'utente potrebbe aver bisogno di risorse dalla sorgente di destinazione affinché il browser possa utilizzarleMigliora l'esperienza utente avviando preventivamente connessioni a questa fonte。
preconnect permette al browser di eseguire una serie di azioni prima che una richiesta HTTP venga ufficialmente inviata al server, inclusa la risoluzione DNS, la negoziazione TLS, il handshake TCP, che elimina la latenza di andata e ritorno e fa risparmiare tempo all'utente.
La preconnessione è un importante mezzo di ottimizzazione per ridurre il percorso di andata e ritorno in molte richieste - in alcuni casi di centinaia o migliaia di millisecondi di latenza.
Ecco un esempio di utilizzo di preconnect per Google Fonts, dove aggiungendo un prompt di preconnect a fonts.gstatic.com, il browser avvia immediatamente una richiesta che verrà eseguita in parallelo con la richiesta CSS. In questo scenario, il preconnect elimina tre RTT (Round-Trip Time) dal percorso critico eLatenza ridotta di oltre mezzo secondo。
La sintassi è la seguente:
Documentazione:Il login del link ipertestuale è visibile.
DNS-prefetch usa DNS prefetch
La parola chiave dns-prefetch dell'attributo elemento serve ad avvisare il browser che l'utente potrebbe aver bisogno di una risorsa dalla sorgente di destinazione, così che il browser possa migliorare l'esperienza utente eseguendo preventivamente la risoluzione DNS per quella sorgente.
Il pre-prelievo DNS permette al browser di essere presente sulla pagina mentre l'utente navigaEsegui la risoluzione DNS in background。 In questo modo, la risoluzione DNS si completa quando l'utente clicca su un link, così la latenza può essere ridotta. Il pre-prelievo DNS di un dato URL può essere effettuato aggiungendo rel="dns-prefetch' alle proprietà di un link tag; consigliamo di gestire font Google, Google Analytics e CDN.
"Le richieste DNS hanno pochissimo traffico di banda larghezza, ma la latenza può essere alta, specialmente sui dispositivi mobili. Il DNS specificato tramite pre-prefetching può ridurre significativamente la latenza in determinati scenari, come quando un utente clicca su un link. A volte, anche un ritardo di un secondo può essere ridotto - Mozilla Developer Network"
La sintassi è la seguente:
Documentazione:Il login del link ipertestuale è visibile.
Precaricamento precaricato
Il valore di preload della proprietà element ti permette di dichiarare una richiesta fetch in HTML, specificando le risorse di cui la pagina avrà bisogno a breve, e vuoi iniziare a caricarlo presto nel ciclo di vita della pagina, prima che inizi il meccanismo principale di rendering del browser. Questo garantisce che siano disponibili prima e meno probabili che blocchino il rendering della pagina, migliorando le prestazioni. Anche se il nome contiene il termine load, non carica e non esegue lo script, ma lo programma solo per scaricare e memorizzare in cache con priorità più alta.
Il preload è un nuovo standard web che controlla come vengono caricate le risorse specifiche, un aggiornamento al prefetch del subresource prefetch, che è stato deprecato nel gennaio 2016. Questo comando può <link> essere usato in , ad esempio <link rel="preload">. In generale, è meglio usare il preload per caricare le risorse più importanti, come immagini, CSS, JavaScript e file di font. Questo non va confuso con il preloading del browser, che precarica solo le risorse dichiarate in HTML. La direttiva preload supera effettivamente questa limitazione e consente il precarico delle risorse definite in CSS e JavaScript, oltre a decidere quando applicare ogni risorsa.
Il prefetch si differenzia dal prefetch in quanto si concentra sulla pagina corrente e carica le risorse con alta priorità, mentre il prefetch si concentra sulla risorsa che la pagina successiva caricherà e si carica con bassa priorità. Nota anche che il preload non blocca l'evento di onload della finestra.
Molti tipi diversi di contenuti possono essere precaricati. I valori immobiliari possibili sono:
audio: Un file audio, solitamente usato per <audio>.
document: 旨在由<frame>或嵌入的 HTML 文档<iframe>。
Incorporazione: La risorsa da incorporare <embed>nell'elemento.
fetch: Una risorsa accessibile tramite fetch o richiesta XHR, come un file ArrayBuffer o JSON.
font: 字体文件。
immagine: file immagine.
oggetto: La risorsa da <object>incorporare nell'elemento.
script: JavaScript 文件。
style: CSS 样式表。
track: WebVTT 文件。
lavoratore: Un worker web o un worker condiviso in JavaScript.
Video: un file video, solitamente usato per <video>.
La sintassi è la seguente:
Documentazione:Il login del link ipertestuale è visibile.
|
Pubblicato su 26/09/2022 21:45:08
|
|
|
|
Pubblicato su 28/09/2022 08:54:26
|
