Sua dúvida envolve um pouco da compreensão do funcionamento do JavaScript.
Você está correto quando diz que a linguagem é single threaded (ao menos na implementação dos browsers).
Quanto às chamadas assíncronas que você menciona, peço que me acompanhe a seguir numa explicação bem resumida do que acontece por baixo dos panos em uma execução de código JavaScript. Depois de compreender esta parte, a sua pergunta será facilmente respondida.
Vamos lá.
O que ocorre é que a linguagem, no navegador, roda dentro de um contexto de execução (runtime): cada página/aba/iframe possui seu próprio ambiente isolado. E este contexto de execução envolve três aspectos: pilha (stack), fila de mensagens (queue) e memória (heap).

De uma maneira bem simplista, podemos dizer que a pilha é exatamente o que está sendo processado, enquanto que a fila de mensagens é o que está esperando para ser processado.
O exemplo mais comum de uma mensagem que vai para a fila de mensagens é a ocorrência de um evento que estava sendo monitorado. Por exemplo, quando executamos um botao.addEventListener('click', function() { });
, o navegador entende esta instrução como: "cada vez que alguém clicar neste botão, vou colocar esta função que você me passou na fila de mensagens."
Outro uso comum para a fila de mensagem é o retorno de uma chamada XHR . Ou ainda, a função passada como argumento do setTimeout
, ou setInterval
(ainda que o tempo informado seja zero, como vamos ver mais adiante).
Onde quero chegar é que um dos princípios deste fluxo é que a próxima mensagem não é colocada na pilha de execução enquanto a pilha não estiver vazia. Ou seja, em outras palavras, todas as funções em execução (uma função que chamou a outra que chamou a outra, por exemplo) devem finalizar para a próxima mensagem ser colocada nesta pilha. A mensagem só sai da fila de mensagens quando a pilha estiver completamente vazia.
Assim, ainda que o callback pudesse teoricamente ser executado imediatamente, a função tem que terminar para ele ser processado. Considere o código abaixo:
console.log("início");
setTimeout(function() {
console.log("dentro do setTimeout()")
}, 0);
console.log("fim");
Resultado:
//início
//fim
//dentro do setTimeout()
Ainda que o setTimeout
esteja com tempo zero, ele NUNCA será executado antes da função terminar, por que ele foi para a fila. Assim que a pilha terminar, a próxima mensagem será chamada (note que se a fila estiver cheia de mensagens, pode ser que demore bem mais que zero para a execução iniciar. Por isso a especificação do setTimeout
fala que o tempo informado no parâmetro é o mínimo, e não o tempo garantido: pois a fila pode estar com mensagens na frente.).
Toda esta conceituação acredito que serve para responder sua dúvida. Pois, independente de onde vier o código (seja de um setTimeout
, ou de um callback de uma chamada XHR etc), quando ele for para a pilha ser executado, e esta função nunca encerrar (um loop infinito, por exemplo), o runtime trava. Aquela função nunca encerrará, a pilha não será limpa, e a próxima mensagem não será invocada nunca.
A título de exemplo, observe este código:
setTimeout(function() {
while (true) {};
}, 3000);
console.log("olá!");
O que acontece quando este código é executado:
- Na invocação da função
setTimeout
, o navegador foi instruído a, assim que passar 3 segundos, colocar aquela função anônima no final da fila de mensagens.
- Logo em seguida, ele imprime um "olá!".
- A função foi encerrada e a pilha é limpa.
- O
event loop
está checando por novas mensagens. Por enquanto, nada.
- Assim que se passar 3 segundos, o navegador colocou aquela função anônima na fila de mensagens.
- O event loop viu que teve mensagem nova e a removeu da fila e a colocou na pilha para ser executada.
- O
while (true) {};
causou um loop infinito e travou a função. Ela nunca retornará, o navegador trava e nenhum evento mais é executado.
Dito isto, indo mais a fundo na sua dúvida, se houver algum problema na implementação do navegador para suas funções internas (por exemplo, o código faz um request XHR e o navegador se perde e nunca coloca o callback na fila - seja de erro ou sucesso -, ou tenta carregar uma imagem e ocorre um erro não tratado neste carregamento), tudo isto é considerado BUG do navegador e nada tem a ver com fluxo de execução JavaScript, pois o código nativo é normalmente C++ (o v8 da Google, pelo menos). Os resultados para o usuário variam de acordo com a natureza e a dimensão do erro: o fluxo do script pode ser interrompido se houver um crash, o navegador pode retornar um resultado não esperado, um callback nunca ser invocado etc.