浏览器-EventLoop-完整流程
JS 是单线程的，JS 中的代码都是串行的，前面没有执行完毕后面不能执行
执行顺序
- 程序运行会从上至下依次执行所有的同步代码
- 在执行的过程中如果遇到异步代码会将异步代码放到
事件循环中 - 当所有同步代码都执行完毕后，JS 会不断检测
事件循环中的异步代码是否满足条件 - 一旦满足条件就执行满足条件的异步代码
完整执行顺序
- 从上至下执行所有同步代码
- 在执行过程中遇到宏任务就放到宏任务队列中，遇到微任务就放到微任务队列中
- 当所有同步代码执行完毕之后，就执行微任务队列中满足需求所有回调
- 当微任务队列所有满足需求回调执行完毕之后，就执行宏任务队列中满足需求所有回调
- ... ...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
// 1.定义一个宏任务
setTimeout(function () {
console.log("setTimeout1");
}, 0);
// 2.定义一个微任务
Promise.resolve().then(function () {
console.log("Promise1");
});
console.log("同步代码Start");
Promise.resolve().then(function () {
console.log("Promise2");
});
setTimeout(function () {
console.log("setTimeout2");
}, 0);
console.log("同步代码End");
</script>
</body>
</html>
注意点：每执行完一个宏任务都会立刻检查微任务队列有没有被清空，如果没有就立刻清空：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
// 定义一个宏任务
setTimeout(function () {
console.log("setTimeout1");
// 定义一个微任务 p1
Promise.resolve().then(function () {
console.log("Promise1");
});
// 定义一个微任务 p2
Promise.resolve().then(function () {
console.log("Promise2");
});
}, 0);
// 定义一个宏任务
setTimeout(function () {
console.log("setTimeout2");
// 定义一个微任务 p3
Promise.resolve().then(function () {
console.log("Promise3");
});
// 定义一个微任务 p4
Promise.resolve().then(function () {
console.log("Promise4");
});
}, 0);
</script>
</body>
</html>
如下是我给出了一个小小的额外练习题吧算是，自行去分析运行的结果代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
// 定义一个宏任务
setTimeout(function () {
console.log("setTimeout1");
// 定义一个微任务 p2
Promise.resolve().then(function () {
console.log("Promise2");
});
// 定义一个微任务 p3
Promise.resolve().then(function () {
console.log("Promise3");
});
}, 0);
// 定义一个微任务 p3
Promise.resolve().then(function () {
console.log("Promise1");
// s2
setTimeout(function () {
console.log("setTimeout2");
});
// s3
setTimeout(function () {
console.log("setTimeout3");
});
});
</script>
</body>
</html>
