Js事件循环机制EventLoop
js特点为单线程、但通过事件循环机制配合回调函数实现异步多线程的效果
事件循环机制三个关键
调用栈: 执行主线程代码
消息队列:执行fetch、setTimeout、setInterval的异步代码
微任务队列:执行promise、async、await的异步代码
宏任务与微任务:
宏任务:(macro)task,由宿主发起、可以理解是每次调用栈执行的代码就是一个宏任务(包括每次从事件队列中获取一个事件回调并放到执行栈中执行)。
宏任务包含:
script(整体代码)
setTimeout
setInterval
I/O
UI交互事件
postMessage
MessageChannel
setImmediate(Node.js 环境)
微任务:由JavaScript自身发起的任务、可以理解是在当前宏任务执行结束后立即执行的任务
微任务包含:
Promise.then
Object.observe
MutationObserver
process.nextTick(Node.js 环境)
执行顺序:
1、调用栈(宏任务执行)
2、微任务队列(调用栈加入的微任务会立马执行、但其异步操作会在微任务队列中、待调用栈清空后执行)
3、消息队列(待调用栈、微任务队列清空执行)
代码测试
let p = new Promise(resolve => {// 此处为 调用栈加入的微任务会立马执行
console.log(4) // 此处会立马执行
resolve(5) // 此处会立马执行、但此处异步操作会放入微任务队列、待调用栈清空执行
})
function f1() {
console.log(1)
}
function f2() {
setTimeout(()=>{
console.log(2)// 处异步操作会放入消息队列、待调用栈清空执行
},0)
f1()
console.log(3)
p.then(result =>{
console.log(result)
})
}
f2()
答案
4 1 3 5 2