浏览器 事件循环

js

梗概:

不同的代码会按照功能被划分 并按照以下顺序先后执行(执行完一个才能执行下一个):

• 当前执行栈中所有同步代码
  • 传入new promise的回调函数会被同步执行
  • 异步函数中的内容也会被同步执行
• 从微任务队列中取所有回调函数来执行
  • 新产生的微任务也会被执行
• 从宏任务队列中取一个回调函数来执行
• child::渲染网页

实际应用

• 减少js同步执行耗时，因为它会阻塞页面的渲染
  • 把轮询改成异步

实例

之一：

async function promise1() {
    console.log('promise1')
}
async function sleep(delay, msg) {
    return new Promise((resolve, reject) => {
        console.log(msg)
        setTimeout(() => {
            resolve()
        }, delay)
    })
}
async function fun1() {
    console.log('fun1 start');
    await promise1();
    console.log(`micro1`)
    await sleep(1000, 'sleep1')
    console.log('micro2')
    await sleep(0, 'sleep2')
    console.log('micro3')
}
console.log('script start')
fun1()
setTimeout(() => {
    console.log('timeout1')
}, 1500);
setTimeout(() => {
    console.log('timeout2')
}, 0);
console.log('script end')

输出

script start
fun1 start
promise1
script end
micro1
sleep1
timeout2
micro2
sleep2
micro3
timeout1

解释

• 首先执行当前任务栈，输出script start、fun1 start、promise1
• await立马完成，后面的所有代码都被加入微任务队列
• 跳出fun1，继续往下执行，添加了两个宏任务，并最后输出script end
• 当前任务所有执行完毕，从微任务中取出所有任务执行，输出micro1，sleep1，并把sleep1后面的所有代码都跳过
• 执行完微任务，从宏任务中取一个已完成的，即输出timeout2
• 执行了一个宏任务，查看微任务队列，为空
• 等待
• sleep1微任务最先完成，之后新加入微任务立马执行，所以输出micro2，sleep2，立马完成加入新的微任务，所以继续输出micro3
• 接下来最后到达的是timeout1，输出timeout1

之一

async function promise1() {
    console.log('promise1')
}
async function sleep(delay, msg) {
    return new Promise((resolve, reject) => {
        console.log(msg)
        setTimeout(() => {
            resolve()
        }, delay)
    })
}
async function fun1() {
    console.log('fun1 start');
    await promise1();
    console.log(`micro1`)
    await sleep(1000, 'sleep1')
    console.log('micro2')
    await sleep(0, 'sleep2')
    console.log('micro3')
}
(async function main() {
    console.log('script start')
    await fun1()
    setTimeout(() => {
        console.log('timeout1')
    }, 1500);
    setTimeout(() => {
        console.log('timeout2')
    }, 0);
    console.log('script end')
})()

输出

script start
fun1 start
promise1
micro1
sleep1
micro2
sleep2
micro3
script end
timeout2
timeout1

解释

• script start、fun1 start、promise1，promise1马上完成，加入后面的所有代码为微任务
• 跳过fun1后的所有代码
• 执行所有的微任务，输出micro1，sleep1，跳过后面的代码
• 等待
• sleep1完成，加入后面的代码为微任务
• 执行所有的微任务，输出micro2，sleep2，继续执行新加入的微任务，输出micro3
• fun1完成，加入后面的代码为微任务
• 执行所有的微任务，加入了两个宏任务，然后输出script end
• 拿一个宏任务执行，输出timeout2
• 等待
• 没有微任务，拿一个宏任务执行，输出timeout1