Why nested postMessage will cause rAF fired before setTimeout?

Code:

var mc = new MessageChannel();
var count = 1;
var t = +new Date;


console.log('start')

Promise.resolve().then(() => console.log('promise'))
requestAnimationFrame(() => console.log('animationframe'))

setTimeout(() => console.log('timeout'))

mc.port1.onmessage = (...arr) => {
  console.log('ommessage')

  // this will cause the setTimeout fired **before** rAF
  if (count === 1) { mc.port2.postMessage(null); count = 2 }

  // I guess maybe because we spend too much time so the rAF be deffered? But that's not true because if I remove the upper code and use below code won't happen that
  // while(+new Date - t < 3000) {}
  // or
  // Promise.resolve().then(() => while(+new Date - t < 3000))
}

mc.port2.postMessage(null);

console.log('end')

If the remove the nested postMessage, that will works correctly. So, why nested poseMessage will change the event loop execution order?

By the way, increase the delay of setTimeout will make it works correctly too, that means it's still a time we spend question?

from Why nested postMessage will cause rAF fired before setTimeout?