Le panneau "Network" (Réseau) des outils de développement de votre navigateur permet d'identifier les ressources et quand ils sont chargés. Chaque ligne du panneau "Network" (Réseau) correspond à spécifique que votre application Web a chargée.
Savoir ce que vous chargez
Déterminer les stratégies de mise en cache adaptées à votre application Web nécessite de mieux maîtriser ce que vous chargez. Pour créer un Web fiable application, le réseau peut être soumis à toutes sortes de forces noires. Vous devez comprendre les vulnérabilités du réseau si vous espérez y faire l'application.
Vous pensez peut-être que vous avez déjà une assez bonne idée de ce à quoi votre de votre application. Si vous n'utilisez qu'un petit fragment de code HTML statique, JavaScript, CSS et image, cela peut être vrai. Mais dès que vous commencez des ressources tierces hébergées sur des réseaux de diffusion de contenu, aux requêtes API dynamiques et aux réponses générées par le serveur, l'image devient rapidement Murkier.
Une stratégie de mise en cache adaptée à quelques petits fichiers CSS ne pour des centaines d'images, par exemple.
Savoir quand les données sont chargées
Une autre partie de l'image de chargement globale est quand tout est chargé.
Certaines requêtes envoyées au réseau, telles que requête de navigation pour votre code HTML initial, sont créées de manière inconditionnelle dès qu'un utilisateur consulte URL. Ce code HTML peut contenir des références codées en dur à du code CSS ou JavaScript critique. fichiers devant également être chargés pour afficher votre page interactive. Ces se trouvent toutes dans votre chemin de chargement critique. Vous devrez mettre en place les mettre en cache pour être rapides et fiables.
D'autres ressources, telles que les requêtes API ou les éléments à chargement différé, peuvent ne pas que le chargement initial se termine bien après la fin du chargement initial. Si ces demandes ne se produisent qu'après une séquence spécifique d'interactions utilisateur, alors un ensemble complètement différent de ressources peut finir par être demandé lors de plusieurs visites sur une même page. Une stratégie de mise en cache moins agressive souvent adapté au contenu que vous avez identifié comme étant en dehors de la dans le chemin critique du chargement.
Les colonnes "Nom" et "Type" permettent
Les colonnes "Nom" et "Type" permettent d'obtenir une image claire des événements chargé. Réponse à la question "Qu'est-ce qui se charge ?" dans l'exemple ci-dessus représente un total de quatre URL, chacune représentant un type de contenu unique.
Le nom représente l'URL demandée par votre navigateur, mais vous ne verrez que
la dernière partie du chemin
de l'URL listée. Par exemple, si
https://example.com/main.css est chargé, vous ne verrez que main.css
sous "Nom".
Les derniers caractères du chemin de l'URL, à la suite du
(par exemple, "css") sont appelés "extension de l'URL".
L'extension de l'URL vous indique
généralement le type de ressource demandé,
et correspond directement aux informations affichées dans la colonne "Type". Par exemple,
v2.html est un document et main.css est une feuille de style.
La colonne Waterfall aide à déterminer quand
Examinez la colonne Waterfall, en commençant par le haut et en allant vers le bas. La la longueur de chaque barre représente le temps total consacré au chargement pour chaque ressource. Comment pouvez-vous faire la différence entre une demande effectuée en tant que une partie du chemin de chargement critique et une requête déclenchée de manière dynamique, une fois le chargement initial de la page terminé ?
La première requête de la cascade d'annonces
concerne toujours le document HTML,
Exemple : v2.html. Toutes les requêtes ultérieures seront diffusées (comme
cascade !) de cette requête de navigation initiale, en fonction des images, scripts,
et définit le style du document HTML auquel il fait référence.
La cascade d'annonces montre que dès que le chargement de v2.html est terminé, les requêtes
pour les éléments auxquels elle fait référence (également appelés sous-ressources). La
un navigateur peut demander plusieurs sous-ressources en même temps.
représentées par les barres qui se chevauchent dans la colonne Waterfall pour main.css et
logo.svg Enfin, comme vous pouvez le voir sur la capture d'écran, main.js démarre
se charge en dernier, et le chargement se termine une fois que les trois autres URL sont
.