title: event loop prefers microtask queue over callback queue?
body: <p>I was testing out concepts of asynchronous code in JS . Got confused between callback queue &amp; microtask queue order. Whenever promise objects gets resolved , the fulfillment method { then } is pushed into microtask queue while the callbacks of browser timer functions such as setTimeout is pushed into callback queue. Event loop continuously checks queue and pushes functions from queue into call stack whenever call stack gets empty. Event loop should prefer microtask queue over normal callback queue but in the example :  <a href="https://jsfiddle.net/BHUPENDRA1011/2n89ftmp/" rel="nofollow noreferrer">https://jsfiddle.net/BHUPENDRA1011/2n89ftmp/</a> it's happening otherwise.</p>
  
  <pre><code>function display(data) {
      console.log('hi back from fetch');
  }
  
  function printHello() {
      console.log('hello');
  }
  
  function blockfor300ms() {
      for (let i = 0; i &lt; 300; i++) {
          // just delaying logic
      }
  }
  // this sets the printHello function in callback queue { event loop queue }
  setTimeout(printHello, 0);
  
  const futureData = fetch('https://api.github.com/users/xiaotian/repos');
  // after promise is resolved display function gets added into other queue : Microtask queue { job queue}
  futureData.then(display);
  // event loop gives prefrence to Microtask queue ( untill  its complete) 
  
  blockfor300ms();
  // which runs first 
  console.log('Me first !')
  </code></pre>
  
  <p><em>expected output</em> </p>
  
  <ul>
  <li>Me first !</li>
  <li>hi back from fetch</li>
  <li>hello</li>
  </ul>
  
  <p><em>actual output :</em></p>
  
  <ul>
  <li>Me first !</li>
  <li>hello</li>
  <li>hi back from fetch</li>
  </ul>
  
  <p>Kindly let me know how it's happening over here.</p>
  
  <p>Thanks</p>