深入理解js引擎的执行机制
最近在反省，很多知识都是只会用，不理解底层的知识。所以在开发过程中遇到一些奇怪的比较难解决的bug，在思考的时候就会收到限制。所以，在这里一点一点补充基础知识吧。
在阅读之前，请先记住两点：
- js是单线程语言
- js的Event Loop是js的执行机制。深入理解js的执行，就等与深入理解js的Event Loop
好啦，下面进入正题
1. 灵魂三问：js为什么是单线程的？为什么需要异步？单线程又是怎么实现异步的呢？
技术的出现，都跟现实世界里的场景密切相关。同样的，我们就结合现实场景，来回答这三个问题。
（1）js为什么是单线程的？
js是一种脚本语言，脚本语言是为了缩短传统的编写-编译-链接-运行过程而创建的计算机编程语言，脚本语言不需要编译，可以直接用，由解释器来负责解释。
js最初被设计用在浏览器中，那么想象一下，如果浏览器中的js是多线程的。。。场景描述： 现在有两个进程：process1和process2，由于是多线程的js，所以它们对同一个DOM同时进行操作process1删除了该DOM，而process2编辑了该DOM，同时下达了两个矛盾的命令，你这让浏览器怎么执行呢？ 这样一想，是不是就理解了js为什么被设计成单线程了吧~~~（2）js为什么是异步的？
场景描述：
如果js不存在异步，只能自上而下执行，如果上一行执行时间很长，比如说没有网了，那么下面的代码就会被阻塞，对于用户来说，阻塞就意味着“卡死”，这样导致用户体验很差。由于这个“缺陷”，导致JavaScript的所有网络操作，浏览器事件，都必须是异步执行。 所以，js是存在异步执行的，比如setTimeout、setInterval、ajax、promise（3）单线程是怎么实现异步的？
场景描述：
通过Event Loop（事件循环），所以说，理解了Event Loop机制，也就理解了js的执行机制啦。2. js中的Event Loop第一课
举个栗子：观察下它的执行机制
console.log(1)setTimeout(function(){ console.log(2)},0);console.log(3) 毫无疑问：运行结果是1 3 2
也就是说：setTimeout里的函数并没有立即执行，而是延迟了一段时间，满足一定条件后才去执行的，我们叫做异步代码。
所以这里我们首先知道了js里的一种分类方式，就是将任务分为：同步任务和异步任务。
按照这种分类方式：js的执行机制是
- 首先判断js是同步的还是一步的，同步的就进入主进程，异步的就进入event table（事件表）
- 异步任务在Event table中注册函数，当满足触发条件后，被推入event queue（事件队列）
- 同步任务进入主线程后一直执行，直到主线程空闲时，才会去event queue中查看是否有可执行的异步任务，如果有就推入主进程中
以上三步循环执行，这就是Event Loop
所以上面的栗子，你是否可以描述它的执行顺序了呢？console.log(1) //是同步任务，放进主进程里setTimeout(function(){ //是异步任务，放进event table，0s之后被推入event queue里 console.log(2)},0);console.log(3) //是同步任务，放进主进程里//当1、3在浏览器控制台被打印后，主线程去event queue中查看是否有可执行的函数，执行setTimeout里的函数。 3. js中的Event Loop第二课
所以，上面关于Event Loop就是我对js执行机制的理解，是不是很简单呢。。。。
慢着！看看下面的这段代码又一个栗子：setTimeout(function(){ console.log("定时器开始啦~~~");})new Promise(function(resolve){ console.log("马上执行for循环啦"); for(var i=0;i<10000;i++){ i==99&&resolve(); }}).then(function(){ console.log("执行then函数啦")});console.log("表演完毕！"); 有没有很熟悉，好像面试过程中经常碰见这种问题呀~~~
现在，我们按照上面学到的js执行机制去分析一下下setTimeout(function(){ //是异步任务，被放进event table中 console.log("定时器开始啦~~~");})new Promise(function(resolve){ //是同步任务，被放进主进程中，直接执行 console.log("马上执行for循环啦"); for(var i=0;i<10000;i++){ i==99&&resolve(); }}).then(function(){ //是异步任务，被放进event table中 console.log("执行then函数啦")});console.log("表演完毕！"); //是同步任务，被放进主进程中，直接执行 运行结果是：【马上执行for循环啦----表演完毕！----执行then函数啦----定时器开始啦~~~】
那么，难道是异步任务的执行顺序不是前后顺序，而是另有规定？事实上，按照同步和异步的划分方式，并不准确。
所以这里我们首先知道了js里的一种分类方式，就是将任务分为：同步任务和异步任务。
叨叨了半天，原来都是一些“假大空”的东西，搞什么搞嘛，哼！！！
准确的划分方式是：
- macro-task（宏任务）：包括整体代码script、setTimeout、setInterval
- micro-task（微任务）：Promise、process.nextTick
按照这种分类方式：js的执行机制就是
执行一个宏任务，执行过程中如果遇到微任务，就将其放在微任务的event queue里
当前宏任务执行完成后，会查看微任务的event queue，并将里面的全部微任务依次执行完。重复以上两个步骤，结合Event Loop第一课和Event Loop第二课，就是更为准确的js执行机制了。尝试按照刚才学到的执行机制，去分析第二个栗子：setTimeout(function(){ console.log("定时器开始啦~~~");})new Promise(function(resolve){ console.log("马上执行for循环啦"); for(var i=0;i<10000;i++){ i==99&&resolve(); }}).then(function(){ console.log("执行then函数啦") });console.log("表演完毕！"); //首先执行script中的宏任务;//遇到setTimeout，放进宏任务的event queue中;//遇到new Promise直接执行，打印“马上执行for循环啦”;//遇到then方法,是微任务，被放进微任务的event queue//执行打印“表演完毕！”，本轮宏任务执行完毕;//查看本轮微任务，发现then方法里的函数，执行打印“执行then函数啦”//到此，本轮Event Loop全部完成//下一轮循环里，先执行一个宏任务，发现宏任务的event queue中有一个setTimeout中的函数，打印“定时器开始啦” 运行结果是：【马上执行for循环啦----表演完毕！----执行then函数啦----定时器开始啦~~~】
4.谈谈setTimeout
下面这段setTimeout代码是什么意思？我们一般说：“3s后，会执行setTimeout里的函数”
setTimeout(function(){ console.log("执行了");},3000) 但是这种说法并不严谨，准确的解释是：
3s后，setTimeout里的函数会被推入到event queue中，而event queue（事件队列）里的任务，只有在主线程空闲时才会执行。所以：只有在满足- 3s后
- 主线程空闲
这两个条件同时满足，才会在3s后执行该函数。如果主线程执行内容很多，执行时间超过3s，比如执行了10s，那么这个函数只有在10s后执行啦
到此，js引擎的执行机制解读完啦，前端的水很深，慢慢摸着吧
感谢文章的提供者：ziwei3749