浏览器的事件循环机制

浏览器事件循环机制(even loop)

• js语言执行的环境是‘单线程’，所谓的单线程是同一时间只能完成一件任务，其他任务必须排在前一个事件之后执行，很多时候CPU空闲的，因为IO设备很慢，不得不等结果出来再往下执行。
• 这种模式有一个好处，执行起来比较简单，但缺点也很明显，如果一个任务执行时间很长，后面的任务都必须排队等待，整个程序执行就很长时间。浏览器的‘假死’就是因为某一段的js代码执行时间很长，导致其后的任务无法执行
• 为了解决这个问题，所有的任务分为了两种，一种是同步任务，另一个是异步任务。同步任务：是在主线程上排队执行的任务，前一个任务执行完后，再执行后面的任务。异步任务：是指不排在主线程中，而进入任务队列的任务，只有主线程任务执行结束后，再去读取任务队列中的任务。
• 同步任务进入主线程，异步任务进入Event Table并注册函数。当指定的事情完成时，Event Table会将这个函数移入Event Queue。主线程内的任务执行完毕为空，会去Event Queue读取对应的函数，进入主线程执行。上述过程会不断重复，也就是常说的Event Loop(事件循环)。

宏任务(macro task) 微任务(micro task)

而除了同步和异步的事件分类，js任务又分为了宏任务与微任务。

1.宏任务

• script(整体代码)
• setTimeout
• setImmerdiate
• setInterval
• I/O
• UI 渲染

2.微任务

• process.nextTick
• promise

  对于不同的任务会进入相应的Event Queue，而且对于宏任务macrotask的优先级要高于为任务microtask。这里要注意当进入执行代码时就是执行第一个宏任务。
  进入整体代码(宏任务)后，开始第一次循环。接着执行所有的微任务。然后再次从宏任务开始，找到其中一个任务队列执行完毕，再执行所有的微任务。如此下去执行完所有的任务。

代码执行实例

console.log(0)
setTimeout(()=>{
    console.log(1)
},0)
const promise = new Promise((resolve,reject)=>{
    console.log(2)
    resolve()
    console.log(3)
})
promise.then(()=>{
    console.log(4)
})
console.log(5)

执行结果

0
2
3
5
4
1