js之同步异步 || 事件循环 || 宏任务微任务

「这是我参与2022首次更文挑战的第8天，活动详情查看：2022首次更文挑战」。

同步

js是一门单线程编程语言在全局作用域 window 内的功能代码需要从上到下以此执行,但是这样的话会造成很严重的代码执行拥堵,从而降低程序的高效运行

异步

为了解决上述问题 js 提出了异步代码执行,从而解决同步代码依次执行造成的拥堵问题,继而解决了因为同步执行拥堵的性能问题

事件循环

那么什么时候执行异步呢基于这个问题 js 提出了 事件循环机制 eventLoop 那么什么是事件循环?

队列存在的意义

上面复习到 js 为同步代码拥堵执行提出了异步代码执行解决方案为了成功的实现这个概念又提出了事件循环机制那么事件循环机制是如何运行的呢?

• 在 js 代码全局运行时会有一个事件执行过程,我们将它成为事件循环且他是唯一的.
• 为了将事件属性分开管理有了队列的存在,且队列不是唯一的

队列的划分

队列中存在的都是异步事件任务

• 宏任务: setTimeout setInterval
• 微任务: MutationObserver process.nextTick(node.js) promise.then 中的回调函数 async 函数中 await 后面的代码

        console.log(1);
        setTimeout(() => {
            console.log(3);
        }, 0);
        console.log(2);

        setTimeout(function () {
            console.log(1)
        }, 0);
        console.log(5);

        let a = new Promise((resolve, reject) => {
            console.log(2);
            resolve();
            console.log(3);
        });
        console.log(6);
        a.then(() => {
            console.log(4)
        });
        console.log(7);
        let b = new Promise((resolve, reject) => {
            resolve();
        });
        b.then(() => {
            console.log(666)
        });
        同步任务 1 2 5 2 6 7 
        微任务 4 666
        宏任务 3 1 
        最后当期作用域销毁

总结:

作用域代码依次从上到下执行遇到异步事件 放进异步任务队列中

进入任务对列的异步事件 分为 宏任务与微任务从而进如相应的队列中

执行时微任务先执行 宏任务后执行 执行循序为: 先入先出

队里中异步任务销毁时与执行相反先入后出以此规则进行销毁

下期复习内容为 手打 Promise Promise.all 方法