JS代码执行机制

前言：此文章为是通过看其他博主文章和视频讲解js代码执行机制后整理的，概述的可能不是很准确。

js代码执行顺序是自上而下的，且js的代码分为同步任务和异步任务的。

同步任务：是在主线程上排队执行的任务

异步任务：是不进入主线程，进入‘任务队列’中的任务

同步代码是没有优先级的，按照自上而下的顺序执行；但异步代码是分微任务和宏任务的。

宏任务：script、setTimeout、setInterval、DOM事件、AJAX

微任务：promise.then()、async/await...

---- async表示函数里有异步操作，await表示紧跟在后面的表达式需要等待结果

async函数返回一个Promise对象,可以使用then方法添加回调函数。当函数执行的时候，一旦遇到await就先返回，等到异步操作完成，再接着执行函数体后面的语句。（也就是说：当一个函数前加了async，就表示这个函数里很大可能有异步函数，而在第一个await表达式出现之前，异步函数内部的代码都是按照同步方式执行的，await所在表达式是同步的）await会阻塞其所在表达式中后续表达式的执行（在和await在同一个函数内，但在await后面的代码会被阻塞，形成类似微任务的存在）

1、await会阻塞后续代码的执行

<script>
      console.log(1111111);
      async function text() {
        console.log(2222222);
        await fn();
        console.log(333333333);
      }
      function fn() {
        console.log(55555555);
      }
      text();
      console.log(444444444);
</script>

执行结果：

2、promise是属于同步任务，promise.then()是属于异步任务

 <script>
      console.log(1111111);
      new Promise((resolve, reject) => {
        console.log(222222222);
        resolve();
      }).then(() => {
        console.log(33333333);
      });
      console.log(444444);
</script>

总结：执行机制：宏任务（script）---->宏任务中的同步任务---->微任务---->宏任务---->宏任务中的同步任务---->宏任务中的微任务---->宏任务中的宏任务---->....

<script>
      function f2() {
        console.log(1);
        setTimeout(() => {
          console.log(2);
        }, 0);
        console.log(9)
      }
      async function f() {
        console.log(3);
        await f2();
        console.log(4);
      }
      f();
      console.log(5);
      new Promise((resolve) => {
        console.log(6);
        resolve();
      }).then(() => {
        console.log(7);
      });
      console.log(8);
</script>

猜你喜欢