原来JavaScript是这样运行的

1、前言

你们都知道JavaScript是单线程的，单线程就意味着同一时间只能作一件事，那么有同窗会问，为何JavaScript的做者不把它设计成多线程的呢，那样性能不是更好。为了回答这个问题，咱们得从JavaScript的用途上来解释了，因为JavaScript是一门脚本语言，被用于与用户进行交互和操做DOM有关，若是是多线程的话， 会出现不少复杂的同步问题，让JavaScript的操做变得难以控制。假如如今有一个线程A在dom上新增一个节点a，另外一个线程又在dom上删除了节点a，那么咱们该以哪一个线程为标准呢。因此，对于JavaScript单线程这一特色，将来也不会改变。对于一些JavaScript开发者来讲，JavaScript的运行机制一直困扰着一些同窗，好比异步请求的执行问题，为何js代码会形成页面渲染的阻塞，做用域中的变量提高等等到底作了什么，看完下面的文章你应该会对这些问题有清楚的了解。

2、进程与线程

咱们常常说，JavaScript是单线程的，那到底什么是线程呢。官方的说法是，进程是CPU资源分配的最小单位，而线程是CPU调度的最小单位。你们看到这句话可能有些懵。那以浏览器为例，当咱们在浏览器中打开一个新的标签页Tab的时候，CPU会为浏览器分配一个新的进程，去渲染咱们的网页，而渲染网页的工做是经过这个进程中的多个线程来配合完成的，包括浏览器的渲染线程、JS引擎线程、http异步请求线程等等。因此，一个进程由多个线程组成，每一个线程是进程的不一样执行路线。而进程与进程之间是相对独立的，如：在浏览器打开两个标签页Tab，就是两个进程，这两个标签页的运行是互不影响的。

3、浏览器内核

说到浏览器内核，就不得不提到五大主流浏览器IE(IE内核)，Chrome浏览器(之前是Webkit内核，如今是Blink内核)，Safari(Webkit内核)，Firefox(Gecko内核)，Opera(最开始是Pestro内核，而后是Webkit内核，最后是Blink内核)，也正是由于不一样浏览器的内核不一样，致使有些相同html元素在不一样浏览器上的表现不一样，这主要是因为浏览器内核中的GUI渲染线程不一样所致使。

浏览器内核是多线程的，在内核的控制下，多个线程相互配合以保持同步，一个浏览器内核一般由如下几个线程组成：

一、GUI渲染线程
二、JS引擎线程
三、定时器触发线程
四、事件触发线程
五、异步HTTP请求线程

一、GUI渲染线程

• 该线程主要负责解析HTML，CSS，构建DOM树，布局和绘制等
• 当页面须要重绘或者引发回流时，将会执行该线程
• 注意，该线程是与JS引擎线程互斥的，当执行JS引擎线程时，GUI渲染线程将会被挂起(冻结)，等到任务队列为空的时候，主线程才会去执行GUI渲染线程

二、JS引擎线程

• 主要负责处理JavaScript脚本，执行代码
• 也负责执行准备好执行的事件，如定时器计时结束或异步请求成功并正确返回时，将依次进入任务队列，等待JS引擎线程的执行
• 固然，该线程是与GUI渲染引擎线程互斥的，当JS引擎执行JavaScript代码时间过长时会形成页面的阻塞，也就是为何咱们要把script标签在body的最后面引入

三、定时器触发线程

• 负责执行定时器一类函数的进程，如settimeout、setInterval
• 当主线程依次执行代码时，遇到计时器，会将计时器交给该线程处理，当计时完毕以后，定时器触发线程会将计时完毕后的事件加入到事件队列的尾部，等待JS引擎线程的执行

四、事件触发线程

• 主要负责将准备好执行的事件交给JS引擎线程执行，如计时器计时完毕后的事件，AJAX请求成功返回并触发的回调函数和用户触发点击事件时，事件触发线程会将回调函数加入到任务队列的尾部，等待JS引擎线程的执行

五、异步HTTP请求线程

• 负责执行异步请求一类的函数，如ajax，fetch，axios等
• 当主线程依次执行代码时，遇到异步请求，会将函数交给改线程处理，当监听状态码变动时，若是有回调函数，会将回调函数加入到任务队列的尾部，等待JS引擎线程的执行

4、任务队列

单线程就意味着，全部任务的执行都须要排队，前一个任务结束，后一个任务才能执行，若是一个任务耗时很长，后一个任务不得不一直等待着。JavaScript的做者意识到这个问题，将全部任务划分为两种，一种是同步任务，一种是异步任务。同步任务是指在主线程上排队执行的任务，前一个任务结束，后一个任务才能执行。异步任务是指不进入主线程执行，而进入“任务队列”的任务，只有当“任务队列”通知主线程能够执行了，该任务才会进入主线程。异步任务分为两种，宏任务和微任务(后面会重点介绍)。接下来经过两个例子来讲明同步任务和异步任务的主要区别：

console.log('a')
while (true) {
    console.log('这里是while')
}
console.log('b')复制代码

最后打印的结果是a，由于上述代码均属于同步任务，由上到下依次执行，当主线程执行完console.log('a')以后，开始执行while循环出现死循环，无限执行console.log('这里是while')，致使内存溢出，致使while循环后面的任务就没法执行了。

console.log('a')
settimeout(function () {
    console.log('settimeout1')
},0)
while (true) {
    console.log('这里是while')
} 复制代码

最后的打印结果仍是a，由于这段代码中同时存在同步任务和异步任务，异步任务要等到主线程上全部的同步任务执行完成以后才能执行。上述代码中的console.log('a')和while循环均属于同步任务，而settimeout属于异步任务(在后面的事件循环中会介绍哪些事件属于异步任务),因此当执行完console.log('a')以后，主线程将执行while循环，无限执行console.log('这里是while')，最后致使内存溢出，没法执行下面的代码了

5、事件循环(Event Loop)

下图为一个完整的事件循环的过程：

事件循环的运行机制：

• 一开始执行栈空,咱们能够把执行栈认为是一个存储函数调用的栈结构，遵循先进后出的原则。微任务队列空，宏任务队列里有且只有一个script脚本（总体代码）。
  

• 全局上下文（script 标签）被推入执行栈，同步代码执行。在执行的过程当中，会判断是同步任务仍是异步任务，经过对一些接口的调用，能够产生新的宏任务与微任务，它们会分别被推入各自的任务队列里。同步代码执行完了，全局script脚本会被移出宏队列，这个过程本质上是队列的宏任务的执行和出队的过程。

• 上一步咱们出队的是一个宏任务，这一步咱们处理的是微任务。但须要注意的是：当宏任务出队时，任务是一个一个执行的；而微任务出队时，任务是一队一队执行的。所以，咱们处理微任务队列这一步，会逐个执行队列中的任务并把它出队，直到队列被清空。

主线程从“任务队列”读取事件这个过程，是循环不断的，因此整个这种运行机制就叫作Event Loop(事件循环)。每当主线程为空时，就会去读取“事件队列”，这就是JavaScript的运行机制

6、宏任务(Macrotask)和微任务(Microtask)

咱们在上面提到，异步任务分为宏任务和微任务：

• 宏任务包括：全局script任务、setTimeout、setInterval、setImmediate、I/O操做、UI rendering
• 微任务包括：new Promise.then()、MutationObserver(HTML5新特性)等

当主线程上的全部同步任务执行完以后，是先执行宏任务仍是先执行微任务呢？

• 因为代码入口都是全局任务script，而全局任务script属于宏任务，因此当栈为空或者同步代码执行完以后，会先执行微任务队列里的任务
• 当微任务队列里的全部任务都执行完成以后，主线程会读取宏任务最前面的任务
• 执行宏任务的过程当中，遇到微任务，依次加入微任务队列
• 当前主线程上的调用栈为空时，再次读取微任务队列的任务，以此类推

如下经过一个例子来理解异步任务的运行机制：

Promise.resolve().then(() => {
    console.log('Promse1')
    setTimeout(function () {
        console.log('setTimeout1')
    }, 0)
})
setTimeout(function () {
    console.log('setTimeout2')
    Promise.resolve().then(() => {
        console.log('Promise2')
    })
}, 0)复制代码

最终打印结果依次为Promise一、setTimeout二、Promise二、setTimeout1

• 一开始执行栈全部的同步任务执行完成，主线程会去读取微任务队列(此时微任务队列有且只有一个微任务)，执行微任务中的任务打印出Promise1，同时也会生成一个宏任务setTimeout1
• 当执行栈为空时，主线程又会去读取宏任务队列最前面的任务。此时，宏任务队列依次排列着[setTimeou2, setTimeout1]，因此setTimeout2执行打印setTimeout2,同时生成一个微任务Promise2加入微任务队列
• 当主线程执行完宏任务setTimeout2以后，调用栈为空，去读取微任务队列，此时，微任务队列只有一个微任务Promise2，执行微任务中的任务打印Promise2
• 当主线程执行完微任务Promise2以后，调用栈为空，去读取宏任务队列，此时，宏任务队列就只剩下setTimeout1了，执行setTimeout1打印setTimeout1。