En este codelab, se explica el proceso de interpretar toda la configuración de red para una aplicación de ejemplo algo compleja. Al final del ejercicio, tendrás las habilidades que necesitas para descifrar cuál es tu propia aplicación web y cuándo se realiza cada solicitud.
Navega al panel de red
Navega al panel Network para ver el tráfico de red de la demostración y mantener la integridad de su aplicación.
Para obtener una vista previa del sitio, presiona Ver app. Luego, presiona Pantalla completa
Presiona `Control + Mayúsculas + J` (o `Command + Option + J` en Mac) para abrir Herramientas para desarrolladores.
Haga clic en la pestaña Red.
Vuelve a cargar la página para ver el tráfico de red.
El panel Network muestra todos los recursos cargados debido a tu navegación:
Cómo interpretar las entradas
Cada fila de tráfico de red registrado representa una sola solicitud y respuesta par.
La primera fila, con el tipo document, es la solicitud de navegación inicial para el
el código HTML de la app web. Esta es la fuente de la cascada; cada uno de los siguientes
flujo de solicitudes de activos adicionales (conocidos como subrecursos del documento principal)
de esta fuente original.
La segunda y tercera fila, que muestran un stylesheet de CSS y un subrecurso script
son solicitudes dependientes que inició el documento principal.
Si observas cuándo se realizan esas solicitudes, el diagrama de cascada muestra que no comienzan hasta el momento de responder al solicitud de navegación.
En conjunto, las solicitudes para el documento HTML, CSS y Se necesita JavaScript para mostrar la página completa durante la durante la navegación inicial.
Crea algunas solicitudes adicionales del entorno de ejecución
Con el panel Network aún abierto y grabando, es momento de simular algo común para muchas aplicaciones web: las solicitudes adicionales a la API utilizadas para agregar más datos a la página después de que se complete la navegación inicial.
Para activar estas solicitudes adicionales, haz clic en Encuéntrame en la app y, luego, Permitir en la ventana emergente que aparece. Esto permitirá que el sitio acceda a tu ubicación actual:
Una vez que la aplicación web tenga una ubicación para trabajar, haz clic en Buscar cercanos Entradas de Wikipedia genera varias solicitudes de red adicionales. Tú debería verse algo como esto:
Interpreta las entradas nuevas
Como antes, cada fila de tráfico de red registrado representa una sola solicitud y respuesta de Google.
La primera fila de las entradas nuevas representa una solicitud con un tipo de fetch.
que corresponden
forma en que la app web solicita datos
de la API de Wikipedia.
Las siguientes filas son imágenes (png o jpeg) asociadas al
Entradas de Wikipedia Aunque es un poco difícil de ver en la captura de pantalla,
en la columna Waterfall fluyen directamente desde la respuesta de la API.
Para todas estas solicitudes adicionales, el cuándo variará en función de cuánto hace tiempo que has tenido la página abierta antes de hacer clic en Buscar Wikipedia de alrededores Entradas. Lo más importante aquí es que when se desconecta de la solicitud de navegación inicial. Esto se puede deducir por la gran brecha que existe la pantalla Waterfall, que representa un período que pasó entre las durante la carga inicial y el momento en que se realiza la solicitud a la API de Wikipedia.
Las solicitudes realizadas después de un período determinado después de una navegación entran en la categoría. de “solicitudes de tiempo de ejecución”, a diferencia del conjunto inicial de solicitudes que se usa la página cuando navegaste a ella por primera vez.
En resumen
Una vez que recorriste los pasos de este codelab, ya conoces el que puedes usar para analizar lo que carga cualquier aplicación web.
El panel Network te ayuda a responder la pregunta sobre qué se carga, mediante las URL en la columna Nombre y los datos en la columna Tipo, junto con when se está cargando, a través de la pantalla de cascada.
También has visto que las solicitudes realizadas por una página web pueden (generalmente) agruparse en una de dos categorías:
- Solicitudes iniciales, realizadas inmediatamente después de navegar a una página nueva, para el HTML, JavaScript, CSS (y posiblemente otros recursos).
- Solicitudes de tiempo de ejecución realizadas como resultado de la interacción del usuario con la página. Esta puede comenzar con una solicitud a una API y, luego, fluir a varias de seguimiento basadas en los datos de API recuperados.