目录

1.宏任务和微任务的概念是什么 ?

宏任务:

是指消息队列中的等待被主线程执行的事件,宏任务执行时都会重新创建栈,然后调用宏任务中的函数,栈也会随着变化,但宏任务执行结束时,栈也会随之销毁。包括整体代码script,setTimeout,setInterval new Promise*

微任务:

可以把微任务看成是一个需要异步执行的函数,执行时机是在主函数执行结束之后、当前宏任务结束之前Promise.then,process.nextTick(node中)*。微任务是基于消息队列、事件循环、UI 主线程还有堆栈而来的

2.宏任务(macrotasks)和微任务(microtasks)??包含什么?

3.关于宏任务?(代码)

4.微任务(代码)重点**

5.宏任务和微任务的执行顺序

 6 经常遇到的面试题(要求手写)


了解:js可分为同步任务和异步任务,对于同步的任务,我们当然知道按照顺序进行执行,但是对于异步的操作,会有一个优先级的执行顺序,分别为宏任务和微任务

1.宏任务和微任务的概念是什么 ?

宏任务:

是指消息队列中的等待被主线程执行的事件,宏任务执行时都会重新创建栈,然后调用宏任务中的函数,栈也会随着变化,但宏任务执行结束时,栈也会随之销毁。
包括整体代码script,setTimeout,setInterval new Promise*


微任务:


可以把微任务看成是一个需要异步执行的函数,执行时机是在主函数执行结束之后、当前宏任务结束之前
Promise.then,process.nextTick(node中)*。
微任务是基于消息队列、事件循环、UI 主线程还有堆栈而来的
 

2.宏任务(macrotasks)和微任务(microtasks)??包含什么?

1

2

macrotasks: setTimeout, setInterval, setImmediate, I/O, UI rendering

microtasks: process.nextTick, Promises, Object.observe(废弃), MutationObserver

3.关于宏任务?(代码)

// 宏任务
// script代码  setInterval  setTimeout  setImmediate

// 同步   异步

// 先执行同步任务   在执行异步任务

console.log("start")
function fn() {
    console.log("1234567")
}
setTimeout( function() {
    console.log("qqqqqqqq");
}, 2000)
fn()
console.log("end")

// 执行结果
/* 
    start
    1234567
    end
    qqqq
*/

4.微任务(代码)重点**

// 微任务

// 原生Promise.then()、process.nextTick、MutationObserver

function fn() {
    console.log("start")
    new Promise( resolve => {
        console.log("111111");
        resolve();
        console.log("222222");
    }).then( () => {
        console.log("333333")
    })
    console.log('end')
}
fn()
/* 
    start
    111111111
    222222222
    end
    333333333
*/

5.宏任务和微任务的执行顺序

function fn() {
    console.log(111111111)
    setTimeout( () => {
        console.log(2222222222)
    }, 0)
    console.log(333333333)
    new Promise( resolve => {
        console.log(4444444444)
        resolve()
        console.log(5555555555)
    }).then( () => {
        console.log(6666666666)
        setTimeout( () => {
            console.log(77777777777)
        }, 0)
        console.log(88888888888888)
    })
}
fn()

// 宏任务   setTimeout setInterval
// 微任务   promise.then()  process.nextTick

// 先执行  同步    宏任务 同步  1   3   4   5    异步  2
// 后执行  异步    微任务 同步  6   8            异步  7

执行结果:

 6 经常遇到的面试题(要求手写)

new Promise(function (resolve) {
    console.log('1');
    resolve();
}).then(function () {
    console.log('2')
})
process.nextTick(function () {
    console.log('3');
})
setImmediate(() => {
    console.info('4')        //    1   5   3   2   6   7   10   9   11  4   8   
})
new Promise(function (resolve) {
    console.log('5');
    resolve();
}).then(function () {
    console.log('6')
})
setTimeout(function () {
    console.log('7');
    setImmediate(() => {
        console.info('8')
    })
    process.nextTick(function () {
        console.log('9');
    })
    new Promise(function (resolve) {
        console.log('10');
        resolve();
    }).then(function () {
        console.log('11')
    })
});
// 先执行  宏任务当中的同步任务 --> 微任务当中的同步任务 -->  微任务当中的异步任务  -->  宏任务中的异步任务

// 宏任务  setTimeout  setInterval  setImmediate   也有先后顺序  先执行setTimeout  后执行 setImmediate   I/O   UI
// 微任务  promise.then()   process.nextTick       有先后顺序   promise.then() 后执行
// 同步  异步

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐