js事件循环机制

1、JavaScript是单线程的

JavaScript 是一种单线程的编程语言，只有一个调用栈，决定了它在同一时间只能做一件事。在代码执行的时候，通过将不同函数的执行上下文压入执行栈中来保证代码的有序执行。在执行同步代码的时候，如果遇到了异步事件，js 引擎并不会一直等待其返回结果，而是会将这个事件挂起，继续执行执行栈中的其他任务。因此JS又是一个非阻塞、异步、并发式的编程语言。

2、同步和异步

同步和异步的关系就类似于我们在餐厅排队吃饭的时候，每个人必须挨个的排队来进行买饭这个操作，而在这个过程中十分无聊，这时候我们可以边排着队边玩下手机，不需多久就排到了我们买饭。这个排队过程就是JS中的一个同步操作，玩手机就像一个异步操作。同步和异步的差别就在于排队买饭和玩手机这两个任务的执行顺序的不同。
同步：

JS是一门单线程的语言，这是因为它运行在浏览器的渲染主线程中，而渲染主线程只有一个。
而渲染主线程承担着诸多的工作，渲染页面、执行 JS 都在其中运行。
如果使用同步的方式，就极有可能导致主线程产生阻塞，从而导致消息队列中的很多其他任务无法得到执行。这样一来，一方面会导致繁忙的主线程白白的消耗时间，另一方面导致页面无法及时更新，给用户造成卡死现象。
所以浏览器采用异步的方式来避免。具体做法是当某些任务发生时，比如计时器、网络、事件监听，主线程将任务交给其他线程去处理，自身立即结束任务的执行，转而执行后续代码。当其他线程完成时，将事先传递的回调函数包装成任务，加入到消息队列的末尾排队，等待主线程调度执行。
在这种异步模式下，浏览器永不阻塞，从而最大限度的保证了单线程的流畅运行。

异步：

指的是不进入主线程，某个异步任务可以执行了，该任务才会进入主线程执行。执行完函数或方法后，不必阻塞性地等待返回值或消息，只需要向系统委托一个异步过程，那么当系统接收到返回值或消息时，系统会自动触发委托的异步过程，从而完成一个完整的流程。

3.事件循环机制

事件循环又叫做消息循环，是浏览器渲染主线程的工作方式。
在 Chrome 的源码中，它开启一个不会结束的 for 循环，每次循环从消息队列中取出第一个任务执行，而其他线程只需要在合适的时候将任务加入到队列末尾即可。
过去把消息队列简单分为宏队列和微队列，这种说法目前已无法满足复杂的浏览器环境，取而代之的是一种更加灵活多变的处理方式。
根据 W3C 官方的解释，每个任务有不同的类型，同类型的任务必须在同一个队列，不同的任务可以属于不同的队列。不同任务队列有不同的优先级，在一次事件循环中，由浏览器自行决定取哪一个队列的任务。但浏览器必须有一个微队列，微队列的任务一定具有最高的优先级，必须优先调度执行。

async function async1() {
    console.log("async1 start")  //顺序2
    await async2()
    console.log("async1 end") //顺序6
}

async function async2() {
    console.log("async2")  //顺序3
}

console.log("script start") //顺序1

setTimeout(function () {
    console.log("setTimeout")  //顺序8
}, 0)

async1()

new Promise(function (resolve) {
    console.log("promise1")//顺序4
    resolve(123)
}).then(function () {
    console.log("promise2")  //顺序7
})

console.log("script end") //顺序5

执行顺序为什么会是这样的呢？不应该是async2执行完成后去执行async1 end吗？，接下来就给你一一解答。
首先，js是一个单线程语言，优先执行同步任务，所以会先执行script start，然后setTimeout是一个宏任务，但是js的事件执行顺序中，宏任务队列中的代码执行优先级会低于同步任务，所以setTimeout会被加入到宏任务队列，等待同步任务执行完成，紧接着，代码会去执行async1函数，所以执行顺序2是async1 start。
然后，重头戏来了，async/await是Promise的语法糖，所以上面async1中的代码可以写成这样

async function async1() {
    console.log("async1 start")
    new Promise(async2()).then(()=>{
    	console.log("async1 end")
    })
}

按照Promise的特性，Promise内部是同步执行的，但是它的.then是异步的，所以在执行完async2之后js会去执行下一个同步代码，自然会去执行后面的同步代码。
同步代码执行完之后promise的.then回调，最后执行宏任务列表中的setTimeout。