JavaScript 引擎执行过程

学习&参考资料:

这一次，彻底弄懂 JavaScript 执行机制

10分钟理解JS引擎的执行机制

微任务、宏任务与Event-Loop

JavaScript 异步、栈、事件循环、任务队列

前言

写了2个月的前端，照葫芦画瓢可以写页面了，但是JavaScript是个什么鬼，怎么执行的，同事说es5，es6的执行过程有可能不同，what！我看的这些资料又是以哪个为标准......内心很崩溃，写此文搞清楚JavaScript引擎的执行过程。

JavaScript 的特点

JavaScript是单线程语言
在浏览器中一个页面永远只有一个线程在执行js脚本代码（在不主动开启新线程的情况下）
JavaScript 是单线程语言，但是代码解析却十分的快速，不会发生解析阻塞。
JavaScript是异步执行，通过事件循环(Event Loop)的方式实现。

为什么JavaScript是单线程的？
js是为浏览器端设计的脚本语言，主要任务是操作Dom，如果设计成多线程，势必是需要牵扯多个线程争夺Dom资源，为了解决资源争夺问题必然要引入，这样的实现会非常臃肿。

为什么需要异步？
主要是用户友好，不让用户感觉到等待，如果浏览器处理一个任务时间很长，你能忍！？！设计成单线程，加上异步执行，就可以减少用户等待时间，俗称用户体验。

单线程如何实现异步？
通过event loop实现异步，理解了event loop机制,就理解了JS的执行机制

JavaScript Event Loop（事件循环）

上面说了，JavaScript单线程异步操作是通过Event Loop实现的，那么我们就需要了解Event Loop到底是个撒。

JavaScript是单线程的，当遇到需要超长时间才能执行完成的任务怎么办？为了解决单个任务执行时间超长的问题，JS根据当前任务是否可以立即执行完毕，将任务分为：

同步任务（可以立即执行）
异步任务（不等待，先去做其他任务）

    console.log(1);

    setTimeout(function() {
      console.log(2)
    }, 3000);

    console.log(3)

按照同步任务、异步任务划分，以上代码的执行过程：1，3，2。

代码加载进来，按照顺序执行，第一行代码 console.log(1)同步任务，立即执行，打印 1

然后遇到setTimeout()函数，是异步任务，不等待，继续往后执行下面的代码

遇到 console.log(3)同步任务，立即执行，打印 3

回到异步任务 setTimeout()函数，打印 2

image.png

项目中的代码哪有这么简单，一般项目中的代码复杂度都是下面这样的

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('代码执行结束');

那么按照之前的同步和异步任务划分，代码运行的结果应该是：

懵逼了。。。。
... 怎么判断是同步任务还是异步任务？
... 同步任务执行完后，剩下的异步任务是什么顺序调用呢？

怎么判断是同步任务还是异步任务？

一般来说满足一定条件后,才去执行的,这类代码,我们叫异步代码，被视作异步任务。有一些常见的异步操作有：setTimeout() ，Promise的then, catch 等callback 函数 ...
当你写的代码越多，对编程理解的不断深入，就会很清晰的知道哪些是异步任务。

那么，多个异步任务的调用顺序是怎么样的?

我们先假设异步任务的调用顺序是按照添加到任务队列的先后顺序执行的。
当我们知道 setTimeout() ，Promise的 then 函数 是异步任务的时候，我们按照现有的同步和异步任务处理过程，模拟出代码的执行结果是：

setTimeout 是异步任务，先放一放，不执行

Promise 的 then 函数 是异步任务，先放一放，不执行，只执行马上执行for循环啦
此时，按照假设，Promise 的 then 函数任务放在setTimeout任务后面。

打印代码执行结束, 此时，同步任务执行完毕，按顺序执行异步任务

定时器开始啦

执行then函数啦

但是，将代码放在chrome上运行的时候，真正的结果不是按照之前的假设执行的，而是先执行的 Promise 的 then 函数, 然后执行的setTimeout。
此时，我们可以认为异步任务按照添加顺序执行的假设不成立。

image.png

知识的匮乏，会让我们在接触到新问题时忘记问一下为什么。

为什么js的异步任务不是按照添加的顺序执行？
为什么js的Event Loop 会设计出两个新概念：宏任务&微任务来控制任务的执行过程？

理解完了宏任务和微任务的原理，也没有想明白，上面这两个为什么？需再思考思考。

宏任务&微任务

可以阅读微任务、宏任务与Event-Loop的这篇文章来理解宏任务和微任务的概念。

自己的理解

宏任务是