Macrotask Queue, Microtask Queue and Event Loop

Para detalhes sobre Call Stack e Heap, ver

📃

Call Stack, Execution Context and Heap.

Web APIs

• Browser APIs: servem para expor dados do navegador ou do ambiente de execução. Por exemplo, temos a Audio API para manipular áudio, volume, efeitos e etc. Outro exemplo é a Geolocation API, para obter dados de localização. Por baixo dos panos o navegador está usando algum código de baixo nível, como C++ para processar o áudio ou se comunicar com o GPS do dispositivo. Outro exemplo muito comum é a API fetch(), utilizada para efetuar requisições.

• APIs de terceiros: não fazem parte do navegador, e geralmente é necessário efetuar download do código. Por exemplo, a api do Twitter permite exibir tweets na página.

Macrotask Queue

Microtask Queue

const hello = () => console.log('hello')
const bye = () => console.log('bye')

const fn = () => {
  console.log('fn')

  setTimeout(hello, 0)

  Promise.resolve('after "bye", before "hello"')
		.then(value => console.log(value))

  bye()
}

fn()

fn
bye
after "bye", before "hello"
hello

Event Loop

1. Executa uma macrotask
1. Obtém o item mais antigo da macrotask queue e envia para a call stack

2. Executa uma microtask
1. Obtém o item mais antigo da microtask queue e envia para a call stack

3. Renderiza uma atualização no navegador (caso necessário) e então retorna para a fase 1
1. Esse passo só acontece caso seja o event loop referente ao objeto window. Em outras palavras, event loops de service workers não passam por essa fase.

function fn() {
	console.log('hello')
	setTimeout(() => console.log('timeout'), 1000)
	Promise.resolve().then(() => console.log('promise'))
}

fn()

hello
promise
timeout

1. A função fn() é adicionada na call stack

2. A função fn() é executada

3. A função console.log("hello") é adicionada na call stack

4. A função console.log("hello") é executada

5. A função console.log("hello") é removida da call stack

6. A função setTimeout é executada fora da call stack através do navegador por ser uma Web Api

7. O callback da função Promise.resolve().then é adicionado na microtask queue

8. A função fn() é removida da call stack

9. Passados 1000ms, o timer envia o callback do setTimeout para a message queue

• A call stack está vazia

• A message queue possui o callback da função setTimeout

• A job queue possui o callback da função Promise.resolve().then

• Primeiro tick:
• O callback da microtask queue é enviado para a call stack, pois tem prioridade.
• O callback da microtask queue é executado, o que adiciona a função console.log na call stack. A função console.log é executada e removida da call stack. Em seguida o callback da microtask também é removido.
• Uma nova renderização é efetuada no navegador

• Segundo tick:
• O callback da macrotask queue é enviado para a call stack
• O callback da macrotask queue é executado, o que adiciona a função console.log na call stack. A função console.log é executada e removida da call stack. Em seguida o callback da macrotask também é removido
• Uma nova renderização é efetuada no navegador

console.log('Hello')
setTimeout(() => {
	console.log('Callback')
}, 0)
console.log("Bye")

Playground

Referências