Identifier les ressources chargées à partir du réseau

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.

Outils pour les développeurs Chrome réseau.

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.

Outils pour les développeurs Chrome panneau Network (Réseau) affichant quatre fichiers en cours de chargement.

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.

Outils pour les développeurs Chrome en cascade.

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 .