js事件循环

引入案例

在解释什么是事件循环以前还请大家看下这段代码，请问一下这段代码的运行结果是什么

console.log(1)
console.log(2)
setTimeout(function () {
    console.log(3)
}, 0)
console.log(4)

3
2
1
结果是：

很意外对吗，setTimeout的间隔是0秒，那不应该是立即执行的吗，为何4会在3的前面？
在解释这个现象之前，我们还得将目光移到浏览器上

线程与进程

在浏览器启动运行时，会创建多个进程，这其中会创建一个名叫渲染进程的进程，在渲染进程启动后它就会启动且只会启动一个名叫渲染主线程的线程，这个渲染主线程负责渲染html css js代码，布局图形，执行计时器以及事件函数等等

消息队列

既然事情这么多，为了保证每件事情都能不冲突，渲染主线程就会将这些事情排队执行
所有任务都会放到一个名叫消息队列的地方，按照放入的顺序依次取出交给渲染主线程执行，渲染主线程会开启一个死循环，每次循环都会查看消息队列里是否有任务，其它线程都可以向消息队列里添加任务。
这一整个流程就叫做事件循环。

阻塞

某些任务，如setTimeout，addEventListener等等
这些任务无法立即执行，但当这些任务进入消息队列中，但定时器没有达到规定的延时时间，用户没有执行规定的动作（如click，mouseenter）等等，渲染主线程就会一直等待任务被触发执行，等待任务触发执行的这段时间被称为阻塞

异步

为了解决阻塞这个问题，js提出了一个新概念异步
渲染主线程在取出以上这些可能会导致阻塞的任务后，就会将这个任务交给其他线程执行
当定时器到达规定的延时时间，或者用户执行了规定的动作（如click，mouseenter）时，那个线程就会将这个任务（指上文可能会造成阻塞的任务）的回调函数包装成任务再次放入消息队列中等待渲染主线程的执行
这一整个流程就叫做异步

优先级

渲染主线程会执行许多任务，那么这些任务中有哪些先执行，哪些后执行呢
任务与任务间其实没有优先级一说，在消息队列中都是先进先出
但消息队列与消息队列间是有优先级的

消息队列从来都不只有一个

根据W3C的解释：
每个任务都有一个任务类型，不同的任务类型放在不同的消息队列中
具体有多少任务类型W3C没有规定，由浏览器自行决定
但W3C要求浏览器必须要有一个微队列，微队列中的任务必须要优先于其他消息队列中的任务执行