导读： 学过 JavaScript（下文简称 JS）的都晓得它是一门单线程的、非阻塞的脚本语言。单线程意味着，JS 代码在执行的任何时候，都只有一个主线程来解决所有的工作，这也就意味着 JS 无奈进行多线程编程，然而 JS 当中却有着无处不在的异步概念，咱们如何了解呢？了解异步和非阻塞靠的就是 Event Loop（事件循环），本文就围绕 JS 线程、同步异步、工作队列等方面解说事件循环 (Event Loop)。
JS 线程
为了咱们更不便容易理解事件循环，在此之前咱们先简略理解下什么叫做 JS 线程。如浏览器的渲染过程是多线程的，次要有以下几个线程：
JS 引擎线程（主线程）： 负责解析 JS 脚本，运行代码。
GUI 渲染线程： 负责渲染浏览器界面，解析 HTML、CSS、构 DOM 树和 RenderObject 树，布局和绘制等，当界面须要重绘（Repaint）或因为某种操作引发回流 (reflow) 时，该线程就会执行。
定时器触发线程 (setTimeout)： 浏览器定时计数器并不是由 JS 引擎计数的，因为 JS 引擎是单线程的, 如果处于阻塞线程状态就会影响记计时的精确，因而通过独自线程来计时并触发定时，在计时结束后，增加到事件队列中，期待 JS 引擎闲暇后执行。
http 申请线程（ajax）：XMLHttpRequest 连贯后，通过浏览器新开一个线程申请，当检测到状态变更时，如果同时设置有回调函数，异步线程就产生状态变更事件，将这个回调再放入事件队列中，再由 JS 引擎执行。
浏览器事件触发线程 (onclick)： 归属于浏览器而不是 JS 引擎，用来管制事件循环，能够这么了解：JS 引擎本人都忙不过来，须要浏览器另开线程帮助。
主线程和渲染线程互斥 :JS 引擎线程与 GUI 渲染线程是互斥的，当 JS 引擎执行时 GUI 线程会被挂起（相当于被解冻了），GUI 更新会被保留在一个队列中等到 JS 引擎闲暇时立刻被执行。
浏览器内核
EventLoop 轮询解决线程： 咱们能够把它了解为一个中介，在主线程、异步线程与音讯队列三者之间进行交换与沟通。如下图所示：从主线程那里顺时针的看，整个的流程是周而复始的。只有当主线程的同步代码都执行完了，才会去队列里看看还有什么要执行的。
主线程把 setTimeout、ajax、dom.onclick 别离给三个线程，他们之间有些不同。
1、对于 setTimeout 代码，定时器触发线程在接管到代码时就开始计时，工夫到了将回调函数扔进音讯队列。
2、对于 ajax 代码，http 异步线程立刻发动 http 申请，申请胜利后将回调函数扔进音讯队列。
3、对于 dom.onclick，浏览器事件线程会先监听 dom，直到 dom 被点击了，才将回调函数扔进音讯队列。
同步与异步
JS 分为同步工作和异步工作：
同步工作：立刻执行的工作队列，比方一个简略的函数；
异步工作：申请接口发送 ajax，发送 promise，或工夫计时器等等；
工作队列（Event Queue）
什么是工作队列呢？能够了解为一个动态的队列存储构造，遵循先进先出准则：同步工作会立即执行，进入到主线程当中；异步工作会被放到工作队列（Event Queue）当中。
宏工作队列和微工作队列
宏工作（MacroTask）：整体代码 Script、UI 渲染、setTimeout、setInterval、setImmediate(Node.js 环境)。
微工作（MicroTask）：Promise.then()、catch、finally。
不同点：event loop 里 MacroTask 队列可能有多个，MicroTask 队列只有一个。
MicroTask 优先于 MacroTask 执行，所以如果有须要优先执行的逻辑，放入 MicroTask 队列会比 MacroTask 更早的被执行。
上面几个代码例子能够让咱们充沛的理解各个工作之间的执行程序：
执行栈
MacroTask 和 MicroTask 都是推入栈中执行的。JS 是单线程，也就是说只有一个主线程，主线程有一个栈，每一个函数执行的时候，都会生成新的执行上下文，执行上下文会蕴含一些以后函数的参数、局部变量之类的信息，它会被推入栈中，正在执行的上下文始终处于栈的顶部。当函数执行完后，它的执行上下文会从栈弹出。
总结
同步和异步工作别离进入不同的执行环境，先执行同步工作，把异步工作放入循环队列当中，期待同步工作执行完，再执行队列中的异步工作。异步工作先执行宏观工作，再执行宏观工作。始终这样循环，重复执行，就是咱们说的 Event Loop (事件循环)。
事件循环是 JS 这门语言中十分重要且根底的概念。让咱们能够分明的理解事件循环的执行程序和每一个阶段的特点，能够使咱们对一段异步代码的执行程序有一个清晰的意识，从而缩小代码运行的不确定性。正当的应用各种提早事件的办法，有助于代码更好的依照其优先级去执行。
如果在浏览期间您发现了文章中的一些问题，欢送在留言中提出，感谢您浏览此文章。
作者介绍
倪萌，网易云信 web 前端开发工程师，目前在从事云信金融线业务相干开发工作。