js 宏任务和微任务

目录

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() 后执行
// 同步  异步