Event Loop
浏览器的事件循环是一个在javascript引擎和渲染引擎之间协调工作的机制。因为javascript是单线程的,所以所有需要被执行的操作都需要通过一定的机制来协调它们有序的进行。
它的主要任务是监视调用栈(Call Stack)和任务队列(Task Queue)
当调用栈为空时,事件循环会从任务队列中取出任务执行
JavaScript单线程任务被分为同步任务和异步任务,同步任务会在调用栈中按照顺序等待主线程依次执行,异步任务会在异步任务有了结果后,将注册的回调函数放入任务队列中等待主线程空闲的时候(调用栈被清空),被读取到栈内等待主线程的执行。
目前多数浏览器是多进程的,每打开一个tab页面就会开启一个新进程,每个进程中又有多个线程,其中包括执行JavaScript代码的线程。
宏任务是一个比较大的任务单位,可看作是一个独立的工作单元。
当一个宏任务执行完毕后,浏览器可以在两个宏任务之间进行页面渲染或处理其他事务(比如执行微任务)
微任务的执行优先级高于宏任务
MutationObserver:监视DOM变更的API,在Vue2源码中也有使用它来实现微任务的调度
宏任务(MacroTasks):包括脚本(script)、setTimeout、setInterval、I/O、UI rendering等
微任务(MicroTasks):包括Promise.then、MutationObserver、process.nextTick(仅在node中)、queueMicrotask等
- 执行当前宏任务
- 执行完当前宏任务后,检查并执行所有微任务。在微任务执行期间产生的新的微任务也会被连续执行,直到微任务队列清空。
- 渲染更新界面(如果有必要)
- 请求在一个宏任务,重复上述过程
执行栈在执行完同步任务后,查看执行栈是否为空,如果执行栈为空,就会去检查微任务(microTask)队列是否为空,如果为空的话,就执行Task(宏任务),否则就一次性执行完所有微任务。
每次单个宏任务执行完毕后,检查微任务(microTask)队列是否为空,如果不为空的话,会按照先入先出的规则全部执行完微任务(microTask)后,设置微任务(microTask)队列为null,然后再执行宏任务,如此循环。
未完待续
标签:microTask,异步,队列,必备,任务,循环,为空,执行,前端 From: https://www.cnblogs.com/codeyx/p/18636177