JS宏任务和微任务

宏任务

分类：

• script全局执行代码 

• 定时器任务: setTimeout,setInterval 

• setImmediate

• I/O操作

• UI渲染

1、宏任务所处队列就是宏任务队列

2、第一个宏任务队列中只有一个任务：执行主线程的js代码（同步代码）

3、宏任务队列可以有多个

4、当宏任务队列中的任务全部执行完以后会检查任务队列中是否有微任务队列， 如果有则优先执行微任务队列中的所有微任务。

执行完之后才会执行下一个宏任务队列中的任务。

微任务

分类:

• Promise.then()回调
• Object.observe(): 监听对象变化的方法
• MutationObserve: 监听DOM结构变化的API 
• postMessage: windows用来通信的方法

1、微任务所处的队列就是微任务队列

2、只有一个微任务队列

3、在上一个宏任务执行完毕后，如果有微任务队列就会执行微任务队列中的所有微任务。

例：经典面试题

console.log("start");
setTimeout(function(){
    console.log("setTimeout");
},0);

new Promise((resolve, reject)=>{
    for(var i = 0; i < 5; i++){
        console.log(i);
    }
    resolve();
}).then(()=>{
    console.log("promise回调成功执行");
})

console.log("end");

//输出结果为：
start
0
1
2
3
4
end
promise回调成功执行
setTimeout

分析：

第一个宏任务执行后，执行微任务，再执行第二个宏任务，所以会有上述输出。

特殊的任务

window.requestAnimationFrame() 告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行

所以，requestAnimationFrame处于渲染阶段，所以不属于宏任务，但也不是微任务，排在微任务之后。