Cet atelier de programmation vous explique comment interpréter l'ensemble du trafic réseau pour un exemple d'application relativement complexe. À la fin de l'exercice, vous disposerez des compétences nécessaires pour déterminer ce que votre propre application Web charge et à quel moment elle envoie chaque requête.
Accéder au panneau "Network"
Accédez au panneau "Network" (Réseau) pour afficher le trafic réseau de l'application de démonstration.
Pour prévisualiser le site, appuyez sur Afficher l'application, puis sur Plein écran
.Appuyez sur Ctrl+Maj+J (ou Cmd+Option+J sur Mac) pour ouvrir les outils de développement.
Cliquez sur l'onglet Réseau.
Actualisez la page pour afficher le trafic réseau.
Le panneau "Network" (Réseau) affiche tous les éléments chargés en raison de votre navigation initiale:
Interpréter les entrées
Chaque ligne du trafic réseau enregistré représente une seule paire requête/réponse.
La première ligne, de type document, correspond à la requête de navigation initiale pour le code HTML de l'application Web. Il s'agit de la source de la cascade d'annonces. Chacune des demandes ultérieures d'éléments supplémentaires (appelées sous-ressources du document principal) est issue de cette source d'origine.
Les deuxième et troisième lignes, qui affichent un stylesheet CSS et une sous-ressource script en cours de chargement, sont des requêtes dépendantes lancées par le document principal.
En examinant quand ces requêtes sont effectuées, le diagramme en cascade montre qu'elles ne démarrent que très tard dans le processus de réponse à la requête de navigation.
Ensemble, les demandes de documents HTML, CSS et JavaScript sont nécessaires pour afficher la page complète lors de la navigation initiale.
Créer des requêtes d'exécution supplémentaires
Le panneau Network (Réseau) étant toujours ouvert et enregistré, il est temps de simuler un phénomène courant pour de nombreuses applications Web: des requêtes API supplémentaires permettant d'ajouter des données à la page une fois la navigation initiale terminée.
Déclenchez ces requêtes supplémentaires en cliquant sur Find Me (Trouver moi) dans l'application, puis sur Allow (Autoriser) dans la fenêtre pop-up qui s'affiche. Le site pourra ainsi accéder à votre position actuelle:
Une fois que l'application Web dispose d'un emplacement de travail, le fait de cliquer sur Find Nearby Wikipedia Entries (Rechercher des entrées Wikipédia à proximité) entraîne plusieurs requêtes réseau supplémentaires. Un message semblable à celui-ci doit s'afficher:
Interpréter les nouvelles entrées
Comme précédemment, chaque ligne de trafic réseau enregistré représente une seule paire requête/réponse.
La première ligne des nouvelles entrées représente une requête de type fetch, ce qui correspond à la manière dont l'application Web demande les données à l'API Wikipédia.
Les lignes suivantes sont toutes des images (png ou jpeg) associées aux entrées Wikipédia. Bien que cela soit un peu difficile à voir sur la capture d'écran, les entrées correspondantes dans la colonne Waterfall découlent directement de la réponse de l'API.
Pour toutes ces requêtes supplémentaires, le when varie en fonction de la durée d'ouverture de la page avant que vous cliquiez sur Find Nearby Wikipédias (Trouver des entrées Wikipédia à proximité). Le plus important ici est que le when est déconnecté de la requête de navigation initiale. Vous pouvez le constater par le grand écart qui existe dans l'affichage Waterfall, qui représente une période de temps qui s'est écoulée entre le chargement initial et le moment où la requête API Wikipédia est effectuée.
Les requêtes effectuées après un intervalle de temps après une navigation appartiennent à la catégorie "requêtes d'exécution", contrairement à l'ensemble initial de requêtes utilisé pour afficher la page lorsque vous y avez accédé pour la première fois.
En résumé
Après avoir suivi les différentes étapes de cet atelier de programmation, vous connaissez désormais les outils permettant d'analyser le chargement de n'importe quelle application Web.
Le panneau "Network" (Réseau) vous aide à savoir qu'est-ce qui est chargé via les URL de la colonne "Name" et les données de la colonne "Type", ainsi que quand le chargement est en cours, via l'affichage en cascade.
Vous avez également vu que les requêtes effectuées par une page Web peuvent (généralement) être regroupées dans l'une des deux catégories suivantes:
- Requêtes initiales, effectuées juste après avoir accédé à une nouvelle page, pour le code HTML, JavaScript, CSS (et éventuellement d'autres éléments)
- Requêtes d'exécution effectuées à la suite d'une interaction de l'utilisateur avec la page. Cela peut souvent commencer par une requête à une API, puis aboutir à plusieurs requêtes de suivi basées sur les données d'API récupérées.