09_JS执行顺序（宏任务与微任务）.html

<!-- 

  宏任务 包含1个或多个 微任务
  宏任务有优先级，微任务没有，它只能按顺序调用
  
  JS执行逻辑：
    一个宏任务中的微观任务全部执行完毕后再才执行下一个宏任务

  setTimeout 会生成新的宏任务
  DOM事件 会生成宏任务
  Promise 会生成微任务
 -->

<script>

console.log(1);

async function test(){
  console.log(2);

  await new Promise((resolve) => {
    console.log(3);
    resolve();
  }).then(() => {
    console.log(4);
  })
  console.log(4.1);
}

setTimeout(() => {
  console.log(5);
  
  new Promise((resolve) => {
    console.log(5.1);
    resolve();
  }).then(() => {
    console.log(5.2);
  })
  console.log(5.3);
}, 0);

new Promise((resolve) => {
  console.log(6);
  resolve();
}).then(()=>{
  console.log(7);
});

console.log(8);
test();

// --- 宏任务1
// 1,6,8,2 同步代码

// 3  微任务
// 7  微任务
// 4，4.1  微任务

// --- 宏任务2
// 5,5.1,5.3  同步代码

// 5.2  微任务

// #### 最终执行顺序
// 1, 6, 8, 2, 3, 7, 4, 4.1, 5, 5.1, 5.3, 5.2

//  执行优先级：
// 默认第一个宏任务 -> 所有同步代码 -> 所有微任务 -> 下一个宏任务 -> （如此循环...） 

// 注意点： 
//  1、Promise里面默认是直接执行的，属于同步代码
//  2、Promise的 then 里面是异步回调的，属于微任务

</script>