Pulsar botón
Sigue una acción simple hasta el servidor y de vuelta a la pantalla.
Etapas
- Navegador
- DOM
- JS
- Estado
- HTTP
- DNS
- TLS
- CDN
- Gateway
- Servidor
- Respuesta
- Renderizado
Ejemplos
Ejemplos
Cada ejemplo es un escenario real que puedes ejecutar en FlowTrace. Lanza la simulación para ver la petición viajar por cada etapa en 3D.
Enviar formulario
Sigue la petición por la validación, el gateway, la autenticación, el servidor, la base de datos y de vuelta al renderizado.
Etapas
- Navegador
- DOM
- JS
- Estado
- HTTP
- DNS
- TLS
- CDN
- Gateway
- Autenticación
- Servidor
- Base de datos
- Respuesta
- Renderizado
Iniciar sesión
Autentica a un usuario y busca su registro en la base de datos.
Etapas
- Navegador
- DOM
- JS
- HTTP
- DNS
- TLS
- Gateway
- Autenticación
- Servidor
- Base de datos
- Respuesta
- Renderizado
Dar me gusta
Una actualización optimista que toca la caché y escribe en la base de datos.
Etapas
- Navegador
- DOM
- JS
- Estado
- HTTP
- TLS
- CDN
- Gateway
- Autenticación
- Servidor
- Caché
- Base de datos
- Respuesta
- Renderizado
Consulta de búsqueda
Una lectura que comprueba la caché antes de llegar a la base de datos.
Etapas
- Navegador
- DOM
- JS
- HTTP
- DNS
- TLS
- CDN
- Gateway
- Servidor
- Caché
- Base de datos
- Respuesta
- Renderizado
Guardar registro
Una escritura que pasa parte del trabajo a una cola en segundo plano.
Etapas
- Navegador
- DOM
- JS
- Estado
- HTTP
- TLS
- Gateway
- Autenticación
- Servidor
- Cola
- Base de datos
- Respuesta
- Renderizado
Simular error
Una petición que falla en el servidor para que veas cómo aparecen los errores.
Etapas
- Navegador
- DOM
- JS
- HTTP
- TLS
- Gateway
- Autenticación
- Servidor (error)
- Respuesta
- Renderizado
Acierto de caché
Una respuesta servida desde el borde y la caché sin tocar la base de datos.
Etapas
- Navegador
- DOM
- JS
- HTTP
- TLS
- CDN
- Gateway
- Caché
- Respuesta
- Renderizado
¿Tienes curiosidad por lo que significa cada etapa? Ver cómo funciona