Il riquadro Rete in DevTools del browser consente di identificare quali risorse sono e quando vengono caricati. Ogni riga nel riquadro Network corrisponde a una l'URL specifico caricato dalla tua applicazione web.
Controlla cosa carichi
L'ideazione delle strategie di memorizzazione nella cache adatte alla tua applicazione web richiede una gestione di cosa stai caricando esattamente. Quando crei un ambiente web affidabile applicazione, la rete può essere soggetta a tutti i tipi di forze oscure. Devi le vulnerabilità della rete, se speri di affrontarle nel tuo dell'app.
Potresti pensare di avere già un'idea abbastanza buona riguardo a ciò che il tuo sito viene caricata l'applicazione. Se utilizzi solo una piccola porzione di codice HTML statico, JavaScript, CSS e immagine. Ma non appena inizi combinando risorse di terze parti ospitate su reti CDN (Content Delivery Network), utilizzando da richieste API dinamiche e risposte generate dal server, l'immagine diventa rapidamente più morbido.
Una strategia di memorizzazione nella cache significativa per alcuni file CSS di piccole dimensioni probabilmente ha senso per centinaia di immagini di grandi dimensioni, ad esempio.
Ricevi una notifica quando carichi
Un'altra parte dell'immagine di caricamento generale si verifica quando tutti vengono caricati.
Alcune richieste alla rete, come richiesta di navigazione per il codice HTML iniziale, vengono apportate incondizionatamente non appena un utente visita un determinato URL. L'HTML potrebbe contenere riferimenti hardcoded a CSS o JavaScript fondamentali che devono essere caricati per visualizzare la pagina interattiva. Questi si trovano tutte nel percorso di caricamento critico. Dovrai gestire in modo aggressivo memorizzarle nella cache in modo che sia veloce in modo affidabile.
Altre risorse, come le richieste API o gli asset con caricamento lento, potrebbero non fino al termine del caricamento iniziale. Se avvengono solo dopo una specifica sequenza di interazioni potrebbe poi venire richiesto un insieme di risorse completamente diverso durante più visite alla stessa pagina. Una strategia di memorizzazione nella cache meno aggressiva è spesso appropriati per i contenuti che hai identificato come non appartenenti al di caricamento critico.
Le colonne Name (Nome) e Type (Tipo) consentono di
Le colonne Nome e Tipo aiutano a fornire un quadro significativo di ciò attuale. caricato. La risposta alla domanda "Che cosa sta caricando?". nell'esempio precedente è un totale di quattro URL, ognuno dei quali rappresenta un tipo unico di contenuti.
Il nome rappresenta l'URL richiesto dal browser, anche se vedrai solo
l'ultima parte del percorso dell'URL elencato. Ad esempio, se
L'elemento https://example.com/main.css è stato caricato, vedrai solo main.css
sotto Nome.
Gli ultimi caratteri del percorso dell'URL, dopo
(ad es. "css"), sono note come estensione dell'URL.
In genere l'estensione dell'URL indica quale tipo di risorsa viene richiesta,
ed è mappata direttamente alle informazioni mostrate nella colonna Tipo. Ad esempio:
v2.html è un documento e main.css è un foglio di stile.
La colonna Struttura a cascata aiuta a capire quando
Esamina la colonna Struttura a cascata, partendo dall'alto e procedendo verso il basso. La la lunghezza di ogni barra rappresenta la quantità totale di tempo dedicata al caricamento ogni risorsa. Come capire la differenza tra una richiesta effettuata del percorso di caricamento critico e una richiesta generata dinamicamente, molto tempo dopo il completamento del caricamento iniziale della pagina?
La prima richiesta nella struttura a cascata riguarda sempre il documento HTML,
ad esempio v2.html. Tutte le richieste successive verranno inviate in modalità flusso (come un
a cascata) da questa richiesta di navigazione iniziale, in base a quali immagini, script,
e gli stili a cui fa riferimento il documento HTML.
La struttura a cascata indica che, al termine del caricamento di v2.html, le richieste
per le risorse a cui fa riferimento (note anche come risorse secondarie). La
un browser può richiedere più risorse secondarie contemporaneamente,
rappresentati dalle barre sovrapposte nella colonna Struttura a cascata di main.css e
logo.svg. Infine, dallo screenshot puoi vedere che main.js avvia
viene caricato per ultimo e termina al termine del caricamento degli altri tre URL
.