浏览器的eventloop（事件环）

EventLoop（浏览器下的事件环）

1.任务分类

• 宏任务（macrotask）

  • UI渲染，setTimeOut，setInterval，setImmediate，I/O等

  • 优先级：主代码>setImmediate>MessageChannel>setTimeOut/setInterval

• 微任务（microtask）

  • Promise，async，nextTick（vue中），MutaionObserver

  • 优先级：nextTick>Promise>MutationObserser;async跟浏览器版本有关系，11版本async相当于两个then,11一下相当于一个then和Promise一样

2.执行流程

• 1. 浏览器加载代码到执行栈

  2. 执行栈自上而下执行代码，同步代码直接执行，执行过程中遇到异步Api，将其添加到回调队列中，并且将微任务添加到微任务队列，宏任务添加到宏任务队列，直到当前执行栈中代码自上而下执行完毕，这次宏任务执行完毕

  3. 开始执行微任务，将当前微任务队列中的事件，按照先进先出的原则，一次执行，清空所有的微任务

  4. 执行宏任务，从宏任务队列中取出第一个进入的宏任务，将其放到任务栈中执行，再次执行中如果遇到宏任务或者微任务，将其一次添加到宏任务或者微任务队列中，直至执行栈中代码执行完成

  5. 再去看微任务队列是否有微任务，如果有，再次清空所有的微任务

  6. 再从宏任务中取出一条宏任务放入执行栈中执行，一次轮回，这就是事件环

  注意：

  • 宏任务，每次是从队列中拿出一条放入执行栈中执行

  • 微任务每次都是清空微任务队列中的所有任务