js event loop

Sydeny lunch and learn

by rishul matta

HTML

<a href="https://www.i-programmer.info/programming/javascript/11337-javascript-async-microtasks.html" target="_blank">Tasks and Microtask</a>

<ul>
<li><b>Tasks are originally the only thing placed in the event queue, but modern JavaScript and browsers also now support microtasks.</b></li>
<li>Tasks are taken from the queue and run to completion. eg: click events, timer events and so on.
</li>

<li>Microtasks are processed when the current task ends and the microtask queue is emptied before the next task is started.</li>
<li>Newer features that need to be processed rapidly like Promise settling add microtasks to the queue.</li>
<li>Any microtasks that are created while the microtask queue is being processed are added to the queue and processed before moving on to the next task. </li>
<li> No page updates are performed until the next task is processed. This means that microtasks aren’t slowed down by page rendering. <b>It is important to know that breaking up a process into multiple microtasks does not keep the UI responsive.</b></li> </ul>

<a href="https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/"> INSANELY AMAZING BLOG!!</a>

JavaScript

function taskAndMicroTaskEg() {
  setTimeout(function() {
    console.log('Task1');
  }, 0);

  Promise.resolve().then(function() {
    console.log('MicroTask1');
  });
  
  setTimeout(function() {
    console.log('Task2');
  }, 0);
  
  Promise.resolve().then(function() {
    console.log('MicroTask2');
  });
}

taskAndMicroTaskEg()