Clicar num botão
Segue uma ação simples até ao servidor e de volta ao ecrã.
Etapas
- Navegador
- DOM
- JS
- Estado
- HTTP
- DNS
- TLS
- CDN
- Gateway
- Servidor
- Resposta
- Renderização
Exemplos
Exemplos
Cada exemplo é um cenário real que podes executar no FlowTrace. Lança a simulação para ver o pedido a viajar por cada etapa em 3D.
Enviar formulário
Segue o pedido pela validação, pelo gateway, pela autenticação, pelo servidor, pela base de dados e de volta à renderização.
Etapas
- Navegador
- DOM
- JS
- Estado
- HTTP
- DNS
- TLS
- CDN
- Gateway
- Autenticação
- Servidor
- Base de dados
- Resposta
- Renderização
Iniciar sessão
Autentica um utilizador e procura o seu registo na base de dados.
Etapas
- Navegador
- DOM
- JS
- HTTP
- DNS
- TLS
- Gateway
- Autenticação
- Servidor
- Base de dados
- Resposta
- Renderização
Gostar de publicação
Uma atualização otimista que toca na cache e escreve na base de dados.
Etapas
- Navegador
- DOM
- JS
- Estado
- HTTP
- TLS
- CDN
- Gateway
- Autenticação
- Servidor
- Cache
- Base de dados
- Resposta
- Renderização
Consulta de pesquisa
Uma leitura que verifica a cache antes de chegar à base de dados.
Etapas
- Navegador
- DOM
- JS
- HTTP
- DNS
- TLS
- CDN
- Gateway
- Servidor
- Cache
- Base de dados
- Resposta
- Renderização
Guardar registo
Uma escrita que passa parte do trabalho para uma fila em segundo plano.
Etapas
- Navegador
- DOM
- JS
- Estado
- HTTP
- TLS
- Gateway
- Autenticação
- Servidor
- Fila
- Base de dados
- Resposta
- Renderização
Simular erro
Um pedido que falha no servidor para que vejas como os erros surgem.
Etapas
- Navegador
- DOM
- JS
- HTTP
- TLS
- Gateway
- Autenticação
- Servidor (erro)
- Resposta
- Renderização
Acerto de cache
Uma resposta servida a partir do limite e da cache sem tocar na base de dados.
Etapas
- Navegador
- DOM
- JS
- HTTP
- TLS
- CDN
- Gateway
- Cache
- Resposta
- Renderização
Curioso sobre o que cada etapa significa? Vê como funciona