JS中的事件循环机制(Event Loop)

1、执行机制

js 是单线程的,主线程在执行时会不断循环往复的从同步队列中读取任务、执行任务,当同步队列执行完毕后再从异步队列中依次执行。宏任务与微任务都属于异步任务,在执行优先级上微任务的优先级高于宏任务,因此每一次都会先执行完微任务在执行宏任务。

  • 微任务有:promise的回调,MutationObserver 的回调,process.nextTick。
  • 宏任务有:包括整体代码script、定时器(setTimeout、setInterval),Dom事件,ajax事件。

微任务先于宏任务执行(除了一开始的整体代码 script)。

 

1.1、执行优先级

  • 同步代码执行顺序优先级高于异步代码执行顺序优先级
  • process.nextTick() > Promise.then() > setTimeout > setImmediate(nodejs的方法)

(注意:process.nextTick 是 node 中的方法,而在浏览器中执行时(比如在vue项目中),会退化成setTimeout,所以在浏览器中 process.nextTick 会比 Promise.then() 慢)

 

1.2、总结

总得来说,在 JS 中,先是执行整体的同步任务代码,遇到微任务就会将其放在微任务事件队列,遇到宏任务就会放在宏任务事件队列中。

然后整体的同步任务代码执行完后,就会先执行微任务队列中的任务,等待微任务队列中的所有任务执行完毕后,此时才会从宏任务队列中找到第一个任务进行执行。该任务执行过程中,如果遇到微任务就会放到微任务队列中,等到该任务执行完后,就会查看微任务队列中有没有微任务,如果有就先执行完微队列中的任务,否则执行第二个宏任务。以此类推。

详细参考:https://juejin.im/post/59e85eebf265da430d571f89

posted @ 2019-12-12 16:53  wenxuehai  阅读(2682)  评论(0编辑  收藏  举报
//右下角添加目录