简介
我把JavaScript在浏览器中运行主要分为以下几种类型的任务：
- 同步任务（MainTask） ：同步任务是指JavaScript按照正常顺序执行的代码，比如：函数调用，数值运算等等，只要是执行后立即能够得到结果的就是同步任务。
- 宏任务 （MacroTask）：setTimeout、setInterval、I/O、UI渲染
- 微任务 （MicroTask） ：Promise、Object.obsever、MutationObsever
- 用户交互事件（User Interaction Event）：点击事件onclick、键盘事件onkeywodn、鼠标事件onmouseover等等
执行顺序
具体流程：
- 执行完主逻辑中的同步任务
- 取出微任务队列（MicroTask Queue）中的任务执行，直到队列被完全清空
- 取出宏任务队列（MacroTask Queue）中的一个任务执行。
- 取出微任务队列（MicroTask Queue）中的任务执行，直到队列被完全清空
- 重复 3 和 4，直到宏任务队列（MacroTask Queue）被清空。
demo1：宏任务(MacroTask)和微任务(MicroTask)执行顺序
demo1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo1：宏任务(MacroTask)和微任务(MicroTask)执行顺序</title>
</head>
<body>
<script type="text/javascript">
console.log('同步任务1 start');
setTimeout(function () {
console.log('宏任务1：setTimeout...');
}, 0);
Promise.resolve().then(function () {
console.log('微任务1 Promise.then() 1')
}).then(function () {
console.log('微任务2 Promise.then() 2')
});
setTimeout(function () {
console.log('宏任务2：setTimeout...');
Promise.resolve().then(function () {
console.log('宏任务2：setTimeout => 微任务 Promise.then()')
});
}, 0);
setTimeout(function () {
console.log('宏任务3：setTimeout...');
}, 0);
Promise.resolve().then(function () {
console.log('微任务3 Promise.then() 1')
}).then(function () {
console.log('微任务3 Promise.then() 2')
})
console.log('同步任务2 end');
</script>
</body>
</html>运行结果：
以上代码详细的运行步骤队列图，我已经写成了PPT，大家可以下载打开看效果，可以详细了解每一段代码在队列中的样子：
https://github.com/Jameswain/...
demo2：setInterval —— setTimeout的语法糖
setInterval其实可以说是setTimeout的语法糖，因为setInterval能够实现的功能，setTimeout也能实现，下面通过一个小例子实现使用setTimeout实现setInterval的定时调度功能：
function logic() {
console.log(Date.now());
setTimeout(logic, 1000);
}
logic();demo3：setInterval宏任务和微任务深入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo1：setTimeout与setInterval</title>
</head>
<body>
<div class="demo">demo</div>
<script type="text/javascript">
console.log('同步任务1 start');
setInterval(() => {
console.log('宏任务1：setInterval...');
Promise.resolve().then(function () {
console.log('宏任务1：setInterval => 微任务1 Promise.then()')
});
Promise.resolve().then(function () {
console.log('宏任务1：setInterval => 微任务2 Promise.then()')
});
Promise.resolve().then(function () {
console.log('宏任务1：setInterval => 微任务3 Promise.then()')
});
}, 3000);
setTimeout(function () {
console.log('宏任务2：setTimeout...');
}, 0);
// 微任务：监听DOM属性变化，当属性发生变化时触发回调函数
const demo = document.querySelector('.demo');
new MutationObserver(() => {
console.log('MutationObserver Callback...');
}).observe(demo, { attributes: true });
Promise.resolve().then(function () {
console.log('微任务1 Promise.then() 1')
Promise.resolve().then(() => {
console.log('微任务1-1 Promise.then() 1')
});
Promise.resolve().then(() => {
console.log('微任务1-2 Promise.then() 2')
Promise.resolve().then(() => {
console.log('微任务1-2-1 Promise.then() 1')
});
});
});
// 修改DOM元素属性，将回调变化回调函数放入微任务队列中
demo.setAttribute('data-random', Math.random());
console.log('同步任务2 end');
</script>
</body>
</html>运行结果：
从运行结果可以发现，JavaScript的代码在浏览器中的执行顺序是【同步任务】 => 【清空微任务队列】=>【宏任务】=> 【清空微任务队列】，如果在执行微任务时，又发现了微任务，它会把这个微任务放入到微任务队列的末尾。宏任务也一样，如果在执行宏任务的时候发现了宏任务，它也会把这个宏任务放入宏任务队列的末尾。
上代码详细的运行步骤队列图，我已经写成了PPT，大家可以下载打开看效果，可以详细了解每一段代码在队列中的样子：
https://github.com/Jameswain/...
参考文档：
Tasks, microtasks, queues 和 schedules
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。