基本理念
JavaScript是单线程语言。
事件循环Event Loop是浏览器和NodeJS处理JavaScript代码的一种机制。
异步的实现是通过Event Loop。
常见异步有:DOM事件、定时器触发事件、AJAX、fetch、XMLHttpRequest、Promise then等。
Event Loop常见概念
Call Stack 调用栈(或执行栈Execution Context Stack)
Task Quene 宏任务队列
Microtask Quene 微任务队列
微任务
Promise.then()/async/await 、process.nextTick(Node独有)
宏任务
script(整体代码)、定时器触发事件setTimeout/setInterval、DOM事件、AJAX、 fetch、setImmediate(node独有)、requestAnimationFrame(浏览器独有)、I/O、UI rendering(浏览器独有)
Event Loop过程
同步任务进入主线程,放入执行栈一行一行执行;
遇到异步暂停,异步的进入Event Table并注册函数,当指定的事情完成时,Event Table会将这个函数移入Event Queue。
等调用栈(Call Stack)清空时,会去Event Queue读取对应的函数,任务队列按照顺序入队,执行其中的任务。
上述过程会不断重复。
事件循环中,宏任务和微任务的关系如图所示:
第一次执行的时候,整体script代码作为第一个宏任务会先开始。
举例1
console.log('script start');
async function async1(){
console.log('async1 start')
await async2();
console.log('微任务1开始')
}
async