Event Loop

81 阅读2分钟

在我们学习nextTick 之前需要先了解Event Loop 事件循环机制

JS 执行机制 在我们学js 的时候都知道js 是单线程的如果是多线程的话会引发一个问题在同一时间同时操作DOM 一个增加一个删除JS就不知道到底要干嘛了,所以这个语言是单线程的但是随着HTML5到来js也支持了多线程webWorker 但是也是不允许操作DOM

单线程就意味着所有的任务都需要排队,后面的任务需要等前面的任务执行完才能执行,如果前面的任务耗时过长,后面的任务就需要一直等,一些从用户角度上不需要等待的任务就会一直等待,这个从体验角度上来讲是不可接受的,所以JS中就出现了异步的概念。

同步任务 代码从上到下按顺序执行

异步任务 1.宏任务

script(整体代码)、setTimeout、setInterval、UI交互事件、postMessage、Ajax

2.微任务

Promise.then catch finally、MutaionObserver、process.nextTick(Node.js 环境)

运行机制

所有的同步任务都是在主进程执行的形成一个执行栈,主线程之外,还存在一个"任务队列",异步任务执行队列中先执行宏任务,然后清空当次宏任务中的所有微任务,然后进行下一个tick如此形成循环。

WeChat4934d892b68e942f68cce60242b89743.png

    //eventloop练习
    async function Prom(){
        console.log('Y');
        await Promise.resolve().then(() => { //awiat 算是一个微任务
            console.log('X');
        })
    }

    setTimeout(() => {
        console.log(1);
        Promise.resolve().then(() => {
            console.log(2);
        })
    })
    setTimeout(() => {
        console.log(3);
        Promise.resolve().then(() => {
            console.log(4);
        })
    })

    Promise.resolve().then(() => {
        console.log(5)
    })
    Promise.resolve().then(() => {
        console.log(6)
    })
    Promise.resolve().then(() => {
        console.log(7)
    })
    Promise.resolve().then(() => {
        console.log(8)
    })

    Prom()
    console.log(0);
    
    //进来执行Prom()后,优先执行同步任务,同步任务先走后,在执行异步任务
    // Y 0 
    // 查看是否有执行的微任务 ,await 也算一个微任务
    // 5 6 7 8 X
    // 执行下一个宏任务 
    // 1 2
    // 执行下一个宏任务
    // 3 4
    // 结果 Y 0 5 6 7 8 1 2 3 4