vue事件循环机制

443 阅读2分钟

一、事件循环机制介绍

JS是单线程的语言,浏览器和Node.js定义了各自的Event Loop(事件循环机制)用来解决异步问题。将程序分为“主线程(执行栈)”与“Event Loop线程”,“主线程”自上而下依次执行同步任务,“Event Loop线程”将异步任务推入宏任务队列与微任务队列去执行。

事件循环机制从整体上告诉了我们 JavaScript 代码的执行顺序 Event Loop 即事件循环,是指浏览器或Node 的一种解决javaScript 单线程运行时不会阻塞的一种机制,也就是我们经常使用异步的原理。“Event Loop线程”先执行宏任务队列,然后执行微任务队列,若微任务在执行过程中产生了新的微任务,则继续执行微任务,微任务执行完毕后,再回到宏任务中进行下一轮循环。即继续先执行宏任务队列,再执行 微任务队列。
宏任务: 当前调用栈中执行的代码成为宏任务 (主代码块 定时器等等)

script/setTimeout/setInterval/setImmediate/ I/O / UI Rendering

微任务: 当前(此次事件循环中)宏任务执行完, 在下一个宏任务开始之前需要执行的任务,可以理解成回调事件 (promise proness nextTick等)

process.nextTick()/Promise/Async、Await/MutationObserver(html5新特性)

二、经典面试题实例讲解

image.png
按照执行顺序 首先是 输出’script start’ 然后在执行 async1()方法 async2是个promise(微任务)先执行 输出’async2 end’,此时回到宏任务,按照执行顺序继续往下 输出’promise’ 然后 输出’script end’ 然后在执行输出 异步的 ‘async1 end’ 和 ‘promise1’,‘promise2’ 最后执行 宏任务 也就是 ‘settimeout’

结果就是 script start, async2 end, promise, script end, async1 end, promise1, promise2, settimeout