JS执行机制-宏任务微任务的理解

橘子味的冰淇淋~

已于 2024-03-19 16:53:56 修改

阅读量168

点赞数 1

分类专栏： JS 文章标签： javascript 面试

于 2023-02-16 17:06:50 首次发布

本文链接：https://blog.csdn.net/m0_73531461/article/details/129065626

版权

JS 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

一些概念

1.同步任务和异步任务的由来

JS的一大特点是单线程，也就是说同一时间只能做一件事，也就意味着所有任务需要排队进行。当有一段代码需要执行很久，就会影响后面代码的执行，就会导致页面卡顿，用户体验差。为了避免这个问题，就出现了异步编程，通过回调函数来存放并执行异步代码，任务也就划分为：同步任务和异步任务。

2. 同步任务，异步任务的解释

同步任务：在主线程上排队执行的任务，只有前一个任务执行完毕，才能继续执行下一个任务。

异步任务：不进入主线程，而是进入任务队列的任务，只有等主线程任务全部执行完毕，任务队列的任务才会进入主线程执行。异步任务又分为宏任务和微任务。

3. 宏任务和微任务

宏任务：script(整体代码)、setTimeout、setInterval、setImmediate(Node.js 环境)、UI事件、I/O（Node.js）

微任务：promise中的.then和.catch，process.nextTick()

(Promise并不是完全的同步，在Promise中是同步任务，执行resolve或者reject回调的时候，此时是异步操作，会先将then/catch等放到异步任务中的微任务队列)

4. 执行过程

先执行所有同步任务，碰到异步任务放到任务队列中

同步任务执行完毕，开始执行当前所有的异步任务

先执行任务队列里面所有的微任务

然后执行一个宏任务

然后再执行所有的微任务

再执行一个宏任务，再执行所有的微任务·······依次类推到执行结束。

3-6的这个循环称为事件循环Event Loop

事件循环是JavaScript实现异步的一种方法，也是JavaScript的执行机制

实例理解


console.log('1');
setTimeout(function() {
    console.log('2');
    process.nextTick(function() {
        console.log('3');
    })
    new Promise(function(resolve) {
        console.log('4');
        resolve();
    }).then(function() {
        console.log('5')
    })
})
process.nextTick(function() {
    console.log('6');
})
async function fn() {
    await fn2();
    console.log(13);
}
function fn2() {
    console.log(14);
}
fn()
new Promise(function(resolve) {
    console.log('7');
    resolve();
}).then(function() {
    console.log('8')
})
setTimeout(function() {
    console.log('9');
    process.nextTick(function() {
        console.log('10');
    })
    new Promise(function(resolve) {
        console.log('11');
        resolve();
    }).then(function() {
        console.log('12')
    })
})

这是一道经典的面试题，现在一步一步来分析。