JS的执行顺序

JS执行顺序

基本

1.所有代码放入执行栈中自上而下执行

2.遇到异步函数，则将回掉函数添加到任务队列中（定时器，DOM事件，ajax，Promise，process.nextTick）

3.执行栈中代码执行结束，开始 循环任务队列中函数

4.将任务队列中函数放入执行栈中执行

5.如此往复，称之为事件循环

任务队列

1.任务队列分为宏任务和微任务

2.任务队列将任务放到执行栈中执行

宏任务

宏任务，macrotask ,也叫tasks, 异步任务的回调会依次进入macro task queue，等待后续被调用

宏任务包括：(定时器)

• setTimeout
• setInterval
• setImmediate (Node独有)
• requestAnimationFrame (浏览器独有)
• I/O
• UI rendering (浏览器独有)

微任务

微队列，microtask，也叫jobs。异步任务的回调会依次进入micro task queue，等待后续被调用，
这些异步任务包括 ：（Promise）

• process.nextTick (Node独有)
• Promise
• Object.observe
• MutationObserver

完整的事件循环

• 执行全局Script 同步代码，这些代码有一些是同步语句，有一些是异步语句（比如setTimeout等）
• 全局Script代码执行完毕后，执行栈Stack会清空
• 从微队列中取出位于队首的回调任务，放入执行栈（stack）中执行，执行完成后微队列长度减1
• 继续循环取出位于微队列的任务，放入执行栈Stack中执行，一次类推，知道把微任务执行完毕，注意，如果在执行微任务的过程中，又产生了微任务，那么回加入到微队列的末尾，也会在这个周期被调用执行
• 微队列中的所有微任务都执行完毕，此时微队列为空队列，执行栈Stack也为空
• 取出宏队列中的任务，放入执行栈Stack中执行
• 执行完毕后，执行栈Stack为空
• 重复第三到第七个步骤