彻底搞懂JavaScript执行机制

首先我们大家都了解的是，JavaScript 是一门单线程语言，所以我们就可以得出：

JavaScript 是按照语句顺序执行的

首先看：

let a = '1' console.log(a)

let b = '2' console.log(b) 这个显然大家都知道结果，依次输出1，2

然而换一种：

setTimeout(function() { console.log(1) })

new Promise(function(resolve) { console.log(2) for(var i = 0;i< 10;i++){ i === 10 && resolve() } }).then(function() { console.log(3) }) console.log(4) 这个时候再看代码的顺序执行，输出1，2， 3， 4。好了放到浏览器运行一下，什么？输出居然是 2， 4， 3，1。说好的按顺序执行呢？下面就需要去了解一下 JavaScript 的执行机制问题了。

单线程 首先JavaScript 是一门单线程的语言，在最新的HTML5 推出的 Web-worker，但是 JavaScript 是一个单线程的语言这一个核心还是没有改变。所以，JavaScript 的多线程都是基于单线程模拟出来的。所以牢记 JavaScript 是单线程语言。

事件循环 任务分为两类：

同步任务 异步任务 当我们打开页面时，页面的渲染就是一大堆同步任务，而像加载图片和音频资源耗时的任务，就是异步任务。时间循环的主要内容就是：

当任务进入执行栈的时候，判断是同步任务还是异步任务，如果是同步任务，进入主线程进行执行，异步进入 Event Table 进行注册函数。 当指定的事件完成后，Event Table 将这个函数移入到事件队列 主线程中的任务执行完毕后，去任务队列读取对应的函数，进入主线程执行 上述的过程不断重复，也就构成了事件循环 其中js引擎存在一个监控进程，不断检查主线程执行栈是否为空，一旦为空，就会去时间队列那检查有没有等待被调用的函数。

例如：

setTimeout( function() { console.log(1) }, 0) console.log(2) 首先 setTimeout进入Event Table 执行console.log(2) setTimeout执行的函数进入事件队列 主线程从事件队列读取函数执行 这也就是为什么即使设置setTimeout(fn, 0)函数也不会立即执行的原因。不过即使主线程为空，0ms也是达不到的，根据HTML标准，最低是4ms。

setInterval 还有一个与setTimeout类似的函数，对于setInterval来说，是循环执行。对于执行顺序来说，setInterval会每隔指定的时间将注册的函数置入Event Queue，如果前面的任务耗时太久，那么同样需要等待。

但是需要注意的一点是，对于setInterval(fn, ms)来说，他并不是每过ms执行一次 ，而是每过 ms 会有fn进入任务队列。也就是说如果setInterval 的回调函数的执行事件如果超过延迟ms,那么就看不出来事件间隔了。

Promise 和 process.nextTick(callback) 除了广义的同步任务和异步任务之外，还有对任务更精细的划分，分为:

macro-task（宏任务）：包括整体代码script、setTimeout、setInterval micro-task（微任务）：Promise、process.nextTick 事件循环的顺序，决定js代码的执行顺序。进入整体代码(宏任务)后，开始第一次循环。接着执行所有的微任务。然后再次从宏任务开始，找到其中一个任务队列执行完毕，再执行所有的微任务。

用一段代码来说明：

setTimeout(function() { console.log('1'); })

new Promise(function(resolve) { console.log('2'); resolve() }).then(function() { console.log('3'); })

console.log('4'); 这段代码作为宏任务，开始第一次循环 先遇到setTimeout，那么它的回调函数进入到宏任务事件队列中 遇到Promise,Promise立即执行，输出2，then任务进入到微任务事件队列中 下面遇到console，输出4 第一个宏任务结束，看微任务事件队列，执行then，输出3 第一轮循环结束，看宏任务队列中存在setTimeout的回调函数执行，输出1 所有结果为：2，4，3，1 好了了解了基本的原理之后，我们来看一个更复杂的：

console.log('1');

setTimeout(function() { console.log('2'); process.nextTick(function() { console.log('3'); }) new Promise(function(resolve) { console.log('4'); resolve(); }).then(function() { console.log('5') }) }) process.nextTick(function() { console.log('6'); }) new Promise(function(resolve) { console.log('7'); resolve(); }).then(function() { console.log('8') })

setTimeout(function() { console.log('9'); process.nextTick(function() { console.log('10'); }) new Promise(function(resolve) { console.log('11'); resolve(); }).then(function() { console.log('12') }) }) 不知道大家答案是什么？接下来我们来进行分析一下：

第一轮：

首先整段代码作为一个宏任务进入主线程，首先遇到console.log()输出1 遇到第一个setTimeout()进入宏任务队列 遇到Process.nextTick()进入微任务队列 然后遇到Promise，立即执行，输出7，then被添加到微任务队列 遇到第二个setTimeout,进入宏任务队列 然后执行两个微任务 执行Process.nextTick()输出6 执行then，输出8 这样第一轮循环就彻底结束了，进行第二轮事件循环，也就是第一个setTimeout

首先遇到console.log()，输出2 遇到Process.nextTick()，进入微任务队列 遇到Promise立即执行输出4，then进入微任务队列 然后执行第一个微任务，输出3 执行then，输出5 这样第二轮事件循环就结束了，最后执行第二个setTimeout，第二个setTimeout和上面原理类似，也就不重复说明了。所以最终结果是：1,7,6,8,2,4,3,5,9,11,10,12

加Java架构师群获取Java工程化、高性能及分布式、高性能、深入浅出。高架构。性能调优、Spring，MyBatis，Netty源码分析和大数据等多个知识点高级进阶干货的直播免费学习权限 都是大牛带飞 让你少走很多的弯路的 群..号是：855801563 对了 小白勿进 最好是有开发经验

注：加群要求

1、具有工作经验的，面对目前流行的技术不知从何下手，需要突破技术瓶颈的可以加。

2、在公司待久了，过得很安逸，但跳槽时面试碰壁。需要在短时间内进修、跳槽拿高薪的可以加。

3、如果没有工作经验，但基础非常扎实，对java工作机制，常用设计思想，常用java开发框架掌握熟练的，可以加。

4、觉得自己很牛B，一般需求都能搞定。但是所学的知识点没有系统化，很难在技术领域继续突破的可以加。

5.阿里Java高级大牛直播讲解知识点，分享知识，多年工作经验的梳理和总结，带着大家全面、科学地建立自己的技术体系和技术认知！

转载于:https://juejin.im/post/5be8108e6fb9a049ba41172d

总结

以上是生活随笔为你收集整理的彻底搞懂JavaScript执行机制的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。