javascript microtasks and tasks

task.js

/**
 * console order is:
 * main call stack start
 * main callback stack end
 * Promise
 * mutate
 * setTimeout
 *
 * @see https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/
 * callback of Promise, MutationObserver(as microtasks) has higher privilege then setTimeout callback
 */

console.log('main call stack start')

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

Promise.resolve().then(function() {
  console.log('Promise')
})

new MutationObserver(function() {
  console.log('mutate')
}).observe(document.body, {
  attributes: true
})

document.body.setAttribute('data-random', Math.random())

console.log('main callback stack end')