EventLoop事件循环以及异步代码执行过程

1.EventLoop事件循环

首先我们需要了解JavaScript是一门什么类型的语言，以及同步代码，异步代码的执行过程。

1.1JS

JavaScript 是一门单线程执行的语言，简单来说就是，同一时间只能做一件事情。

1.2JS执行环境

Js需要在宿主环境中执行（浏览器，nodejs），浏览器内部有执行js代码的引擎(V8引擎)。一般讨论的是JS在浏览器中的事件循环。

 JS为了代码的执行不阻塞，又分为同步代码和异步代码，同步代码会在执行栈中立即执行，异步代码会委托浏览器执行，将回调函数放入到任务队列中。

当事件（用户的点击，图片的成功加载）发生时，将其回调添加到任务队列；主线程上的任务完成之后，执行过程不会停止，任务队列中的回调函数会依次调入主线程中执行，主线程执行任务又在任务队列拿任务的过程称为‘事件循环’。

2.异步代码执行过程

2.1微任务，宏任务

异步代码不会立即执行，而是会被宿主环境将回调函数放入到任务队列中排队，等待主线程执行完同步代码，任务队列中的异步代码才会被执行。

任务队列又分微任务队列，宏任务队列

微任务：1.promise.then() 2.async,await

宏任务：1.<script>  2.定时器 3.DOM事件 4.ajax

主线程执行完同步代码，优先从任务队列拿去微任务执行，也就是说，异步代码执行中，微任务可以插宏任务的队。

3.练习题

<script>
    console.log(1);
    async function fnOne() {
      console.log(2);
      await fnTwo(); // 右结合先执行右侧的代码, 然后等待
      console.log(3);
    }
    async function fnTwo() {
      console.log(4);
    }
    fnOne();
    setTimeout(() => {
      console.log(5);
    }, 2000);
    let p = new Promise((resolve, reject) => { // new Promise()里的函数体会马上执行所有代码
      console.log(6);
      resolve();
      console.log(7);
    })
    setTimeout(() => {
      console.log(8)
    }, 0)
    p.then(() => {
      console.log(9);
    })
    console.log(10);
</script>

 <script>
    console.log(11);
    setTimeout(() => {
      console.log(12);
      let p = new Promise((resolve) => {
        resolve(13);
      })
      p.then(res => {
        console.log(res);
      })
      console.log(15);
    }, 0)
    console.log(14);
  </script>

执行过程梳理：