JavaScript Execution — Guia Consolidado¶
Esta nota agrupa os tópicos de JavaScript Execution em um único material, reduzindo repetição e mantendo os pontos comuns em contexto.
Índice rápido¶
Call Stack¶
O que é¶
Call Stack é a pilha de execução de funções JavaScript ativas naquele instante.
Por que isso existe¶
Ela explica erros de recursão, travamentos da UI e ordem de execução síncrona.
Como funciona internamente¶
- Cada chamada empilha um frame.
- Retornos desempilham frames na ordem LIFO.
- Loops/recursão profunda podem estourar limite da stack.
- Enquanto stack não esvazia, render e outros callbacks aguardam.
Exemplo prático¶
curl -i https://example.com
GET / HTTP/1.1
Host: example.com
Relação com outros conceitos¶
Relaciona-se com: - Event Loop - Task Queue - Promises no navegador
Event Loop¶
O que é¶
Event Loop coordena execução de callbacks, render e tarefas assíncronas na thread principal do navegador.
Por que isso existe¶
Sem esse modelo, scripts longos bloqueariam UI sem previsibilidade de ordem e prioridade.
Como funciona internamente¶
- Código síncrono entra no Call Stack.
- Tarefas assíncronas são agendadas em filas (task/microtask).
- Microtasks drenam antes do próximo frame.
- Render ocorre entre ciclos quando a thread está livre.
Exemplo prático¶
curl -i https://example.com
GET / HTTP/1.1
Host: example.com
Relação com outros conceitos¶
Relaciona-se com: - Call Stack - Task Queue - Microtask Queue
Microtask Queue¶
O que é¶
Task Queue recebe macrotasks como timers, eventos de UI e callbacks de rede.
Por que isso existe¶
Separa trabalho futuro da execução imediata e evita bloquear o fluxo síncrono.
Como funciona internamente¶
- Eventos assíncronos entram na fila de tasks.
- Event Loop pega uma task quando stack está vazia.
- Após cada task, microtasks são drenadas.
- Somente então browser considera renderizar novo frame.
Exemplo prático¶
curl -i https://example.com
GET / HTTP/1.1
Host: example.com
Relação com outros conceitos¶
Relaciona-se com: - Event Loop - Microtask Queue - Web APIs
Promises no navegador¶
O que é¶
Promises representam valores assíncronos e padronizam composição de operações no navegador.
Por que isso existe¶
Substituem cascatas de callbacks e integram com microtasks para previsibilidade.
Como funciona internamente¶
- Promise inicia pendente.
- Resolve/reject agenda handlers no microtask queue.
- then/catch encadeiam transformações e tratamento de erro.
- async/await é açúcar sintático sobre promises.
Exemplo prático¶
curl -i https://example.com
GET / HTTP/1.1
Host: example.com
Relação com outros conceitos¶
Relaciona-se com: - Microtask Queue - Event Loop - Web APIs
Task Queue¶
O que é¶
Task Queue recebe macrotasks como timers, eventos de UI e callbacks de rede.
Por que isso existe¶
Separa trabalho futuro da execução imediata e evita bloquear o fluxo síncrono.
Como funciona internamente¶
- Eventos assíncronos entram na fila de tasks.
- Event Loop pega uma task quando stack está vazia.
- Após cada task, microtasks são drenadas.
- Somente então browser considera renderizar novo frame.
Exemplo prático¶
curl -i https://example.com
GET / HTTP/1.1
Host: example.com
Relação com outros conceitos¶
Relaciona-se com: - Event Loop - Microtask Queue - Web APIs
Web APIs¶
O que é¶
Web APIs são interfaces do navegador (fetch, timers, DOM, storage) fora do motor JS puro.
Por que isso existe¶
Permitem que JS interaja com rede, interface e sistema sem bloquear a linguagem.
Como funciona internamente¶
- JS chama uma API do navegador.
- A implementação ocorre em subsistemas nativos.
- Quando termina, callback/promise retorna via filas do event loop.
- Permissões e políticas de segurança definem o que é permitido.
Exemplo prático¶
curl -i https://example.com
GET / HTTP/1.1
Host: example.com
Relação com outros conceitos¶
Relaciona-se com: - Event Loop - Browser JavaScript Engine - Como o navegador resolve DNS
Pontos comuns da família (backend/devops)¶
- Crítico para bugs de ordem de execução, starvation de fila e travamentos de interface.
- Explica impacto de promises/microtasks/timers na responsividade e no ciclo de render.
- Ajuda a reduzir long tasks e melhorar métricas de interação em produção.
Problemas comuns da família¶
- Assumir fluxo linear em código assíncrono e ignorar prioridade entre filas.
- Superlotar microtasks/callbacks e bloquear render sem perceber.
- Depurar apenas pelo resultado final sem mapear a sequência de agendamento/executação.