En este codelab, se explica el proceso de interpretación de todo el tráfico de red de una aplicación de ejemplo un poco compleja. Al final del ejercicio, tendrás las habilidades que necesitas para descubrir qué carga tu propia aplicación web y cuándo realiza cada solicitud.
Navega al panel de red
Navega al panel de redes para ver el tráfico de red de la aplicación de demostración.
- Presiona "Control + Mayúsculas + J" (o "Comando + Opción + J" en Mac) para abrir las Herramientas para desarrolladores.
- Haga clic en la pestaña Red.
- Vuelve a cargar la página para ver el tráfico de red.
En el panel de redes, se muestran todos los recursos cargados debido a tu navegación inicial:
Cómo interpretar las entradas
Cada fila del tráfico de red registrado representa un solo par de solicitud y respuesta.
La primera fila, con el tipo document, es la solicitud de navegación inicial para el
HTML de la app web. Esta es la fuente de la cascada; cada una de las solicitudes posteriores de recursos adicionales (conocidos como recursos secundarios del documento principal) fluye desde esta fuente original.
La segunda y la tercera fila, que muestran la carga de un subrecurso stylesheet y script de CSS, son solicitudes dependientes que inició el documento principal.
Si observas cuándo se realizan esas solicitudes, el diagrama de cascada muestra que no se inician hasta muy tarde en el proceso de respuesta a la solicitud de navegación.
En conjunto, las solicitudes del documento HTML, CSS y JavaScript son necesarias para mostrar la página completa durante la navegación inicial.
Crea algunas solicitudes de tiempo de ejecución adicionales
Con el panel Red aún abierto y grabando, es hora de simular algo común para muchas apps web: solicitudes adicionales a la API que se usan para agregar más datos a la página después de que se completa la navegación inicial.
Para activar estas solicitudes adicionales, haz clic en Find Me en la app y, luego, en Allow en la ventana emergente que aparece. Esto permitirá que el sitio acceda a tu ubicación actual:
Una vez que la app web tiene una ubicación con la que trabajar, hacer clic en Find Nearby Wikipedia Entries genera varias solicitudes de red adicionales. Deberías ver algo como esto:
Interpreta las entradas nuevas
Como antes, cada fila del tráfico de red registrado representa un solo par de solicitud y respuesta.
La primera fila de las entradas nuevas representa una solicitud con un tipo de fetch,
que corresponde a la
forma en que la app web solicita datos
de la API de Wikipedia.
Las siguientes filas son imágenes (png o jpeg) asociadas con las
entradas de Wikipedia. Aunque es un poco difícil de ver en la captura de pantalla, sus
entradas en la columna Cascada fluyen directamente desde la respuesta de la API.
Para todas estas solicitudes adicionales, el cuándo variará según el tiempo que hayas tenido abierta la página antes de hacer clic en Buscar entradas de Wikipedia cercanas. Lo más importante aquí es que el cuándo se desconecta de la solicitud de navegación inicial. Puedes notar esto por la gran brecha que existe en la pantalla de cascada, que representa un período que transcurrió entre la carga inicial y el momento en que se realiza la solicitud a la API de Wikipedia.
Las solicitudes que se realizan después de un intervalo de tiempo posterior a una navegación se incluyen en la categoría de "solicitudes de tiempo de ejecución", a diferencia del conjunto inicial de solicitudes que se usan para mostrar la página cuando navegaste a ella por primera vez.
En resumen
Después de seguir los pasos de este codelab, ya conoces las herramientas que puedes usar para analizar lo que carga cualquier aplicación web.
El panel Red te ayuda a responder la pregunta de qué se carga, a través de las URLs de la columna Nombre y los datos de la columna Tipo, junto con cuándo se carga, a través de la pantalla en cascada.
También viste que las solicitudes que realiza una página web se pueden agrupar (por lo general) en una de dos categorías:
- Son las solicitudes iniciales, que se realizan justo después de navegar a una página nueva, para el HTML, JavaScript, CSS (y, posiblemente, otros recursos).
- Son las solicitudes de tiempo de ejecución que se realizan como resultado de la interacción del usuario con la página. Esto suele comenzar con una solicitud a una API y, luego, fluye hacia varias solicitudes de seguimiento basadas en los datos de la API recuperados.