1，要弄懂事件循环首先要了解线程和进程
通常在一个进程中可以包含若干个线程，它们可以利用进程所拥有的资源，在引入线程的操作系统中，通常都是把进程作为分配资源的基本单位，而把线程作为独立运行和独立调度的基本单位，由于线程比进程更小，基本上不拥有系统资源，故对它的调度所付出的开销就会小得多，能更高效的提高系统内多个程序间并发执行的程度。
2， 浏览器是一个多进程多线程的应用程序，内部工作很复杂，它的进程主要包含 浏览器进程 网络进程 渲染进程
① 浏览器进程: 负责BOM界面展示以及操作，监听浏览器前进后退等操作， 其他进程都是依靠浏览器进程做启动 以及其他依赖线程的启动
② 网络进程: 主要负责网络通信 网络资源加载 等
③ 渲染进程: 启动后会首先启动一个渲染主线程 前端所有代码都在渲染主线程执行。浏览器会给所有标签页都开启一个渲染进程（进程隔离，这也是为什么谷歌浏览器特别占用内存的原因，有兴趣可以看看谷歌官方文档，据说以后可能会一个站点一个进程从而减少进程数量。）以此来保证所有标签页互不影响，渲染主线程是浏览器中最繁忙的线程，需要它处理的任务包括但不限于 解析HTML，解析CSS，计算样式，布局，处理图层，每秒把页面画 60次，执行全局JS代码，执行事件处理函数，执行计时器的回调函数等 。
这时候可能大家都会想，既然渲染进程需要处理这么多东西，为什么不开多个线程呢？我也不知道。没查到为什么，可能存在一定的技术壁垒吧，大家知道的可以给我留言沟通交流
3，渲染进程需要处理这么多东西，具体是如何调度任务的呢？
比如当前正在执行一个JS函数执行到一半的有十行代码运行到第五行了，这个时候用户点击的某一个按钮怎么办，是暂停这个代码的执行，马上去执行用户的点击事件吗，还是说把这个这一块函数执行完了之后，再去执行那个点击事件呢？关于这个其实浏览器做了一个非常巧妙的处理那便是 排队 有秩序的 一个任务一个任务排队执行，由此就诞生了message queue消息队列 也叫事件队列，因此事件循环主要就发生在渲染主线程。如图:
通过Chrome浏览器源码可以很容易明白渲染逻辑，在最开始的时候，渲染主线程的启动函数里写的 for（; ;）说明循环条件永远都为true
浏览器源码截图
每次循环都会调用next_work_info检查消息队列中是否有任务存在，如果有的话，就取出第一个任务执行，执行完过后进入下一次循环，如果说没有任务的话就进入休眠状态，这便是事件循环核心内容。
ps: 谷歌称它为消息循环，message loop，W3C标准里把这些称为事件循环event loop，实际上是一个东西。
4，但是光知道这些东西呢，还是不够的，你还要知道事件循环里边的一些细节，接下来我会进一步讲解这些小细节，也许会让你对事件循环有进一步的理解
①同步
在代码的执行过程中，会遇到一些无法立即执行的任务例如setTimeout(fn,3000)，AJAX ，AddEventListener等无法立即执行的任务都会导致主线程处于阻塞的状态，如果主线程一直等待这些任务一个一个执行的话，会造成很多问题，像html css绘制 其他js加载资源加载都会被阻塞，导致浏览器崩溃，这就是常说的同步。
②异步
由于渲染主线程承担这及其重要的任务，永远不能够阻塞，浏览器为了防止阻塞所以选择了异步解决
要知道实际上任务是没有优先级区分的，在消息队列中按照先进先出原则，但是消息队列有优先级
根据W3C标准解释
① 每个任务都有一个任务类型，同一个类型的任务必须在一个队列，不同的任务可以分属于不同的队列。
②在每一次事件循环中，浏览器可以根据实际情况从不同的队列中取出任务执行。
随着浏览器的复杂度急剧提升，W3C不在使用宏队列的说法，其中添加到微队列的主要方式是使用Promise ，MutationObserver。
例如:
//立即把一个函数添加到微队列
Promise.resolve().then(fn)1. 首先先执行渲染主线程，其实就是在调用调用栈里面的同步代码，系统会先予以执行
2. 等到渲染主线程将调用栈里面的全部同步任务执行完毕后，事件循环此时开始执行
3. 渲染主线程发现调用栈为空后，会进行事件循环来观察要执行的事件回调。这个时候会进入微队列当中，而事件循环检测到微队列当中有事件，就进行我们最上面说到的操作，然后就取出相关事件任务放入调用栈中，由主线程执行。
4.等微队列执行完毕之后，再开始调用延时队列里的任务，最后检查交互队列是否存在任务，有便执行，没有就进入休眠状态。
总结 JS 的事件循环
事件循环又叫做消息循环，是浏览器渲染主线程的工作方式在Chrome 的源码中，它开启一个不会结束的 for 循环，每次循环从消息队列中取出第一个任务执行，而其他线程只需要在合适的时候将任务加入到队列末尾即可。
过去把消息队列简单分为宏队列和微队列，这种说法目前已无法满足复杂的浏览器环境，取而代之的是一种更加灵活多变的处理方式。根据 W3C官方的解释，每个任务有不同的类型，同类型的任务必须在同一个队列，不同的任务可以属于不同的队列。不同任务队列有不同的优先级，在一次事件循环中，由浏览器自行决定取哪一个队列的任务。但浏览器必须有一个微队列，微队列的任务一定具有最高的优先级、必须优先调度执行。
相关面试题
如何理解JS的异步
参考答案：
JS是一门单线程的语言，这是因为它运行在浏览器的渲染主线程中，而渲染主线程只有一个并且渲染主线程承担着诸多的工作，渲染页面、执行 JS ，解析htmlcss，执行事件回调等都在其中运行。如果使用同步的方式，就极有可能导致主线程产生阻塞，从而导致消息队列中的很多其他任务无法得到执行。这样一来，一方面会导致繁忙的主线程白白的消耗时间，另一方面导致页面无法及时更新，给用户造成卡死现象。
所以浏览器采用异步的方式来避免。具体做法是当某些任务发生时，比如计时器、网络、事件监听，主线程将任务交给其他线程去处理，自身立即结束任务的执行，转而执行后续代码。当其他线程完成时，将事先传递的回调函数包装成任务，加入到消息队列的末尾排队，等待主线程调度执行。在这种异步模式下，浏览器永不阻塞，从而最大限度的保证了单线程的流畅运行。
JS中的计时器能做到精确计时吗?为什么?
参考答案:
不行，因为:
1 .计算机硬件没有原子钟，无法做到精确计时。
2 .操作系统的计时函数本身就有少量偏差由于 JS 的计时器最终调用的是操作系统的函数，也就携带了这些偏差
3.按照 W3C 的标准，浏览器实现计时器时，如果嵌套层级超过 5 层，则会带有 4 毫秒的最少时间，这样在计时时间少于4毫秒时又带来了偏差
4. 受事件循环的影响，计时器的回调函数只能在主线程空闲时运行，因此又带来了偏差