Execution Order in Event Loop

Question

why setTimeout(callback), Promise.resolve().then(callback) and requestAnimationFrame(callback) have different priority to execute? Following is a code sample:

setTimeout(()=>console.log(1));
Promise.resolve(2).then(console.log);
requestAnimationFrame(()=>console.log(3));
console.log(4);
window.onclick = ()=>console.log(5);
window.dispatchEvent(new Event('click'));

Answer 1

synchronization

  console.log(4);
  window.onclick = ()=>console.log(5);
  window.dispatchEvent(new Event('click'));

Micro tasks

 Promise.resolve(2).then(console.log);
  requestAnimationFrame(()=>console.log(3));

Macro task

  setTimeout(()=>console.log(1));