js异步之微任务与宏任务

1.js中什么是微任务和宏任务

在 JavaScript 引擎中，任务分为两种类型：微任务（microtask）和宏任务（macrotask）。 
微任务是指在当前任务执行结束后立即执行的任务，它可以看作是在当前任务的“尾巴”添加的任务。
常见的微任务包括 Promise 回调和 process.nextTick。 
宏任务是指需要排队等待 JavaScript 引擎空闲时才能执行的任务。
常见的宏任务包括 setTimeout、setInterval、I/O 操作、DOM 事件等。
JavaScript 引擎会先执行当前任务中的所有微任务，然后再执行宏任务队列中的第一个任务。
这个过程会不断重复，直到宏任务队列中的任务被全部执行完毕。

2.JS区分微任务和宏任务的意义

JavaScript 之所以要区分微任务和宏任务，是因为微任务和宏任务的执行顺序不同，这对 Web 开发中一些异步操作的实现有着重要的影响。 
在 JavaScript 中，微任务会优先于宏任务执行。
这意味着在当前任务执行结束后，所有微任务都会被立即执行，而宏任务只有在所有微任务执行完毕后才会执行。
这种执行顺序保证了微任务的优先级，可以避免一些问题的出现，比如处理 Promise 对象时可能会出现的竞态条件。 
举个例子，当我们使用 Promise 对象时，它会返回一个 Promise 实例并将回调函数放入微任务队列中。当 Promise 的状态发生改变时，它会立即执行微任务队列中的回调函数，而不是等待当前任务结束后再执行。
这种特性可以保证 Promise 回调函数的执行顺序，避免出现竞态条件，从而使代码更加可靠。 
另一方面，宏任务的执行是在当前任务结束后才会执行的，这意味着可以将一些耗时的操作放入宏任务队列中，从而避免阻塞当前任务的执行。
比如，我们可以将一些需要等待一段时间才能执行的代码放入 setTimeout 的回调函数中，这样可以使页面在执行这些代码的同时仍然保持响应，提高用户体验。 
因此，JavaScript 之所以要区分微任务和宏任务，是为了保证异步操作的正确性和性能。

3.JS中微任务和宏任务执行顺序

首先执行当前代码（同步任务），直到遇到第一个宏任务或微任务。
如果遇到微任务，则将它添加到微任务队列中，继续执行同步任务。
如果遇到宏任务，则将它添加到宏任务队列中，继续执行同步任务。
当前任务执行完毕后，JavaScript 引擎会先执行所有微任务队列中的任务，直到微任务队列为空。
然后执行宏任务队列中的第一个任务，直到宏任务队列为空。
重复步骤 4 和步骤 5，直到所有任务都被执行完毕。

4.js微任务和宏任务有哪些

微任务：Promise 回调函数、process.nextTick、Object.observe（已废弃）、MutationObserver。
宏任务：setTimeout、setInterval、setImmediate（Node.js 独有）、requestAnimationFrame、I/O 操作、UI 渲染。

5.js微任务和宏任务执行顺序代码

 async function async1() {
            console.log('async1 start'); //2
            await async2();
            console.log('async1 end'); //6
        }

        async function async2() {
            console.log('async2'); //3
        }

        console.log('script start'); //1

        setTimeout(function () {
            console.log('setTimeout'); //8
        }, 0)

        async1();

        new Promise(function (resolve) {
            console.log('promise1'); //4
            resolve();
        }).then(function () {
            console.log('promise2'); //7
        });
        console.log('script end'); //5
        //输出：
        //script start
        //async1 start
        //async2
        //promise1
        //script end
        //async1 end
        //promise2
        //setTimeout