eventloop

105 阅读4分钟

栈:存放基本数据类型

堆:存放引用数据类型,(引用类型的指针是存放在栈内存里,指针实际指向的值存储在堆内存空间)

JS运行机制

Js是单线程语言,它是基于事件循环,事件循环大致分为以下几个步骤:

1.所有同步任务都在主线程上执⾏, 形成⼀个执⾏栈(execution context stack)。

2.主线程之外, 还存在⼀个"任务队列"(task queue) 。只要异步任务有了运⾏结果, 就在"任务队列"之中放置⼀个事件。

3.一旦"执⾏栈"中的所有同步任务执⾏完毕(执行栈清空了), 系统就会读取"任务队列", 看看⾥⾯有哪些事件。那些对应的异步任务, 于是结束等待状态, 进⼊执⾏栈, 开始执⾏。(任务队列里里是先进先出,执行栈是先进后出)

4.不断重复第三步,直至"异步任务队列"全部清除。

同步任务:

同步任务指的是,在主线程上排队执行的任务,只有前一个任务执行完毕,才能执行后一个任务。

异步任务:(分为宏任务和微任务)

异步任务指的是,不进入主线程、而进入"任务队列"(task queue)的任务,只有等主线程任务执行完毕,"任务队列"开始通知主线程,请求执行任务,该任务才会进入主线程执行。(异步任务是非阻塞的 不影响后续代码执行 是放到任务队列里不影响主线程后续执行

宏任务和微任务区别它们之间有以下几个区别:

1.执行时机: 宏任务是在主线程空闲时执行的,而微任务是在当前任务执行结束后立即执行的。

2.执行顺序: 宏任务按照先进先出的顺序执行,而微任务则会在下一个宏任务执行前优先执行。

3.嵌套关系: 在一个宏任务中产生的新的微任务,将会在当前宏任务执行完成后立即执行。而新的宏任务则需要等待当前宏任务执行完毕后才会执行。

4.优先级: 微任务具有更高的优先级,它们会在当前宏任务执行完毕前尽早执行,以保证及时更新UI或处理其他紧急任务。这意味着在同一事件循环中,如果有微任务存在,那么它们会被连续执行,直到所有微任务都执行完毕,才会继续执行下一个宏任务。

5716959-3b9628afac2a19cb.webp

概括:js执行的时候,同步任务会放在主线程(执行栈)执行,异步任务会放到事件队列等待执行(宏任务放到宏任务队列,微任务放到微任务队列)等执行栈清空后(同步代码执行完毕)会将事件队列里此次循环的微任务在执行栈调用,当执行栈任务清空,会调用下一个宏任务(一次事件循环只能处理一个宏任务,一次事件循环可以将此次所有的微任务处理完毕。)

注意: 每个异步宏任务执行完之后,都会检查是否存在待执行的微任务;如果有,则执行完所有的微任务之后,再继续执行下一个宏任务。(每一次事件循环都会清空当前宏任务里的微任务,再进行下一次宏任务执行)

 console.log(1);
    setTimeout(function() {
        console.log(2);
        let promise = new Promise(function(resolve, reject) {
            console.log(3);
            setTimeout(function() {
                console.log('0 - 0');
            }, 0)
            resolve();
        }).then(function() {
            console.log(4);
        });
    }, 1000);
    setTimeout(function() {
        console.log(5);
        let promise = new Promise(function(resolve, reject) {
            console.log(6);
            setTimeout(function() {
                console.log('1 - 1');
            }, 0)
            resolve();
        }).then(function() {
            console.log(7);
        });
    }, 0);
    let promise = new Promise(function(resolve, reject) {
        console.log(8);
        resolve()
    }).then(function() {
        console.log(9);
    }).then(function() {
        console.log(10)
    });
    console.log(11)

二、宏任务和微任务有哪些?

宏任务:整体代码script、setTimeout、setInterval、setImmediate、i/o操作(输入输出,比如读取文件操作、网络请求)、ui render(dom渲染,即更改代码重新渲染dom的过程)、异步ajax等

微任务:Promise(then、catch、finally)、async/await、process.nextTick、Object.observe(⽤来实时监测js中对象的变化)、 MutationObserver(监听DOM树的变化)

参考链接:juejin.cn/post/688660… code:blog.csdn.net/lq313131/ar…

image.png

async await

www.jianshu.com/p/8dccfa90b…