前端开发：JS的事件循环执行机制详解

前言

在前端开发中，涉及到JS原生的使用原理是非常重要的知识点，尤其是在实际工作过程中会遇到各种复杂的业务需求场景，以及具体开发中可能会遇到一些涉及基于JS原理的使用，这都要求开发者能够很好的了解和掌握JS原生的常用原理。JS执行是单线程的，它是基于事件循环的，那么本篇博文就来分享一下关于JS的事件循环执行机制，该内容不仅在日常前端开发中是比较重要核心的知识点，而且在前端求职面试时候面试官必考的知识点，尤其是关于异步执行代码时候的事件循环，总结记录一下，方便后期查阅使用。

JS语言的特点

在分享本篇博文之前，首先再来回顾一下JS的语言特点。众所周知，JS是单线程的，所有同步任务都在主线程上执行，即执行栈 execution context stack，主线程之外还存在一个任务队列(也有人称之为消息队列)。也就是只能在同一个时间内做一件事情，意味着所有任务都需要排队执行，前面一个任务结束之后才会执行后面一个任务，JS代码是从上到下一行一行执行的，如果某一行报错，则停止执行下面的代码；先执行同步代码，再执行异步代码。这样做会导致最大的问题就是如果执行的时间比较长，就会引起页面渲染不连贯，导致页面渲染加载阻塞。

JS中同步和异步的使用

为了解决上面说的JS的单线程引起的页面渲染阻塞问题，结合多核计算机的计算能力，HTML5提出了允许JS脚本创建多个线程的操作，至此同步和异步出现了。由于JS是单线程的，浏览器在执行JS代码时会先执行同步代码，再执行异步代码。

同步：指的就是前一个任务结束之后再执行后一个任务，程序执行的顺序与任务排