js中，微任务与宏任务的简单解析

大概整理与记录一下微任务与宏任务

微任务	宏任务
promise	setTimeout
MutationObserver	setInterval
	requestAnimationFrame

 

 

 

 

 

 

其中requestAnimationFrame实际需求中我也没使用过，查阅了资料，解释为请求动画帧的api，应该也是挂window上的方法。

首先，众所周知js是单线程的。但是实际需求中都是会有一些异步操作的，比如网络请求，延时执行之类的。

js的执行大概可以分两类（个人理解；分别叫做主线程、微任务、宏任务更准确些），同步与异步。js执同步任务时，如果遇到了异步操作，就把异步操作丢到待执行的区域，继续执行下面的同步任务。当js发现没有同步任务，便会去执行之前丢在一起的异步任务，这时候异步任务的执行顺序就涉及到宏任务与微任务了,接下来看一段代码：

console.log('start');


    async function f(){
        await Promise.resolve().then(function() {
            console.log('async-promise1');

        })
        return 'asyncEnd'

    }
    f().then(e=>{
        console.log(e)
    })
    setTimeout(function() {

        console.log('setTimeout');

    }, 0);
    Promise.resolve().then(function() {

        console.log('promise1');

    }).then(function() {

        console.log('promise2');});

    console.log('end');

打印顺序: script start => script end => async-promise => promise => promise2 => asyncEnd => setTimeout

总结：

1.同步任务执行优先级最高，无论异步任务进行的多块，都是排在同步任务之后。

2.setTimeout设置的时间其实可以理解为最快执行时间，如这个过程中还有同步操作没处理完，那么则会超过这个时间。

3.微任务的执行顺序优于宏任务。

4.宏任务都是挂在window对象上的方法，而微任务则是es本身提供的方法。