摘录和再编：彻底弄懂JS执行机制

网文： https://juejin.im/post/59e85eebf265da430d571f89

并发模型和事件循环：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/EventLoop

Node.js事件循环，Timers, process.nextTick()

---

javascript是一门单线程语言，在最新的HTML5中提出了Web-Worker，但javascript是单线程这一核心仍未改变。所以一切javascript版的"多线程"都是用单线程模拟出来的。

javascript事件循环

网页渲染的过程，如页面骨架，页面原生的渲染，都是同步的。

而image，音乐等资源加载需要占用大量资源，所以使用异步任务。

1. 同步任务，直接进入主线程，异步任务进入事件表格并注册函数。
2. 当指定的事情完成时，Event Table会将这个函数移入Event Queue。
3. 主线程内的任务执行完毕为空，会去Event Queue读取对应的函数，进入主线程执行。
4. 上述过程会不断重复，也就是常说的Event Loop(事件循环)。

setTimeout和setInterval(fn, ms)函数

这两个函数会再间隔时间到了后，把要执行的函数放入Event Queue。

Promise与process.nextTick(callback)

nextTick是Node.js中Process模块的函数方法。它的定义：

process.nextTick()

adds callback to the "next tick queue". This queue is fully drained after the current operation on the JavaScript stack runs to completion and before the event loop is allowed to continue.

nextTick()把回调函数加到"next tick queue"下一个tick队列。

在当前JS栈运行的操作完成后，并且在事件循环被允许继续之前，这个时间段就叫做next tick。此时执行的队列queue，即next tick queue。

也就是说process.nextTick()中的回调函数会在这个时间段被执行。

所以说除了广义的同步任务，和异步任务，还有更为精细的定义：

• 宏任务：整体代码script（这是第一轮宏任务）, setTimeout, setInterval
• 微任务：Promise, process.nextTick。

不同的任务进入对应的事件队列Event Queue。

事件循环的顺序，决定js代码的执行顺序。

1. 进入整体代码(第一轮宏任务)后，开始第一次事件循环。这个过程包括：
   • 同步代码立即执行。
   • 异步代码，根据任务类型，放入不同的event queue
     • 宏任务
     • 微任务
     • 其他。。。
2. 接着执行event queue的所有的微任务。本例是执行 next tick queue中的微任务。然后继续下一轮事件。
3. 再次从宏任务开始，找到其中一个任务队列执行完毕，再执行所有的微任务。
4. 如此反复执行2-3，完成所有的事件。

总结：

javascript是一门单线程语言，不管什么新框架新语法糖的异步，都是用同步的方法模拟的。

Event Loop是js实现异步的一种方法，也是js的执行机制mechanism。

执行机制和运行是不同的。js在不同的环境下node, browser等执行机制可能不同，但运行大多是指js解析引擎，是统一的。

微任务和宏任务还有很多类型。

---