Event Loop

javaScript是一门单线程的语言，在执行任务的时候，所有任务必须排队，然后一个一个的执行，这样所导致的问题是：如果JS执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞的觉。为了解决这个问题，JS中出现了同步和异步。
在javascript中有分同步代码，和异步代码，顾名思义，同步代码，就是依此执行的代码，异步代码可能不会立即执行，得等到某一特定事件触发时才会执行，javascript有个任务队列，用来存放异步代码，任务队列中的任务又有优先级之分，微任务(microtask)的优先级大于宏任务(macrotask)，在javascript中代码的执行顺序为，主线程会先执行完同步代码，并将异步代码放到任务队列中，当同步代码执行完毕，就轮询任务队列，先询问微任务，如果有则执行微任务，如果没有询问宏任务。

• 1.进入到script标签,就进入到了第一次事件循环.
• 2.遇到同步代码，立即执行
• 3.遇到宏任务,放入到宏任务队列里.
• 4.遇到微任务,放入到微任务队列里.
• 5.执行完所有同步代码
• 6.执行微任务代码
• 7.微任务代码执行完毕，本次队列清空
• 寻找下一个宏任务，重复步骤1
• 以此反复直到清空所以宏任务，这种不断重复的执行机制，就叫做事件循环
• 

注意：async 下面是同步的  await下面代码是异步的

他的异步和多线程的实现是通过Event Loop事件循环机制实现。

大体由三部分组成：调用栈（call stack）、消息队列（Message Queue）、微任务队列（Microtask Queue）

Event Loop开始执行时会从全局代码开始，一行一行执行。遇到函数调用，会压入调用栈中

被压入的函数叫做帧（Frame）

 会从调用栈中弹出

 如上图用代码，首先把func2()压入调栈中，执行func2()中的代码

遇到console.log(2) ，压入执行栈中，执行并打印2，弹出

遇到func1(),压入执行栈中，console.log（1）被压入执行栈中，执行并打印出1，弹出，func1()执行完毕，弹出

最后console.log(3)被压入栈中，执行并打印3，func2执行完毕，弹出，整个调用栈清空

javaScript中的异步操作

宏任务

fetch,setTimeout,setInterval中的回调函数会入队到消息队列中，称为消息。

加上setTimeout

  当setTimeout压入到执行栈中,他里面的回调函数会被进入消息队列中

 消息会在调用栈清空时执行

遇到func1(),压入执行栈，遇到console.log(1),压入执行栈，执行并打印1，弹出

遇到console.log(3)，压入调用栈，执行并打印3，弹出。执行完毕后，func2()弹出，调用栈为空。

消息队列中的消息会被压入到调用栈中，并执行，打印2

 微任务

 使用Promise,async创建的异步操作会加入到微任务队列中，在调用栈被清空的时候，立即执行。并且处理期间新加入的微任务也会一同执行。

加入promise

Promise构造函数首先被压入到执行栈中

 之后console.log(4),resolve(5),分别压入栈中，并执行，打印4.最后弹出promise函数

剩下的过程和之前一样，调用fun2,setTimeout中的匿名回调，console.log（2）入队到消息队列，调用func1（），打印1，弹出func1(),console.log(3),打印3，之后promise两个then的回调函数，入队到微任务队列，之后弹出func2()

 此时调用栈为空，执行微任务队列中的任务，把他们压入调用栈中，并执行，打印出5和6

最后压入并执行消息队列的消息，打印2 

异步任务

1. setTimeout、setInterval

2. Ajax请求一般采用异步，当然也可以设置为同步

3. promise.then

4. 回调函数可以理解为异步，但不是严格的异步操作

5.事件监听。即监听某个事件，当事件发生时，再执行相应的操作（比如点击、mouseover等）

• 宏任务：包括script整体代码、setTimeout、setInterval、I/O操作等‌。
• 微任务：如Promise回调、