宏任务、微任务，so easy！

宏任务和微任务，是JavaScript单线程任务的两大分类，理解它们对理解JavaScript的运行机制非常重要。

宏任务

宏任务，是指需要花费较长时间的任务，例如：

• DOM操作： 操作HTML元素，如createElement、getElementById等。
• 定时器： setTimeout、setInterval等。
• 网络请求： AJAX请求、fetch等。
• 脚本执行： 一个JavaScript脚本文件。

宏任务是按部就班地执行，必须等到上一个任务完成，再进行下一个任务。

微任务

微任务，是指不需要花费很长时间的任务，例如：

• Promise.then： Promise的回调函数。
• MutationObserver： DOM变动监听函数。
• requestAnimationFrame： 一个动画请求回调函数。
• process.nextTick： Node.js独有的微任务。

微任务可以先于宏任务执行，且可以打断宏任务的执行。

执行过程

JavaScript的单线程任务按照以下步骤执行：

1. 执行所有同步任务。
2. 执行所有微任务。
3. 如果有宏任务，则执行一个宏任务。
4. 重复步骤2和3，直到所有任务完成。

案例

为了更好地理解宏任务和微任务，我们来看一个例子：

console.log('start');
setTimeout(() => {
  console.log('setTimeout');
}, 0);
Promise.resolve().then(() => {
  console.log('promise');
});
console.log('end');

输出结果：

start
end
promise
setTimeout

在这个例子中，宏任务有setTimeout和脚本执行，微任务有Promise.resolve().then(() => { console.log('promise'); });。

首先执行同步任务，因此console.log('start')和console.log('end')先输出。

然后执行所有微任务，因此Promise.resolve().then(() => { console.log('promise'); });先输出。

最后执行宏任务，因此setTimeout(() => { console.log('setTimeout'); }, 0);后输出。

总结

宏任务和微任务是JavaScript单线程任务的两大分类，理解它们对理解JavaScript的运行机制非常重要。

宏任务按部就班地执行，必须等到上一个任务完成，再进行下一个任务。

微任务可以先于宏任务执行，且可以打断宏任务的执行。

JavaScript的单线程任务按照以下步骤执行：

1. 执行所有同步任务。
2. 执行所有微任务。
3. 如果有宏任务，则执行一个宏任务。
4. 重复步骤2和3，直到所有任务完成。

希望这篇文章能够帮助大家理解宏任务和微任务。如果您有任何疑问，请随时留言。