浏览器执行机制的疑惑？

Question

如有以下代码：假如页面上有一个DOM元素box

setTimeout(() => {
  console.log('a')  
})

//执行1000Ms同步任务

box.style.backgroundColor = 'red'

console.log(2)

想知道一下，这种是浏览器先渲染box的颜色还是先打印2。为什么？

Answer 1

修改背景色,
输出 2,
输出 a

附

微任务在前,宏任务在后

宏任务: script, setTimeout, setInterval, setImmediate, I/O, UI rendering;
微任务: process.nextTick, Promise, Object.observe, MutationObserver;