一、前言

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

二、进程与线程

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

三、浏览器内核

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

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

1、GUI渲染线程
2、JS引擎线程
3、定时器触发线程
4、事件触发线程
5、异步HTTP请求线程

1、GUI渲染线程

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

2、JS引擎线程

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

3、定时器触发线程

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

4、事件触发线程

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

5、异步HTTP请求线程

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

四、任务队列

单线程就意味着，所有任务的执行都需要排队，前一个任务结束，后一个任务才能执行，如果一个任务耗时很长，后一个任务不得不一直等待着。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')，最后导致内存溢出，无法执行下面的代码了

五、事件循环(Event Loop)

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

事件循环的运行机制：

一开始执行栈空,我们可以把执行栈认为是一个存储函数调用的栈结构，遵循先进后出的原则。微任务队列空，宏任务队列里有且只有一个script脚本（整体代码）。
全局上下文（script 标签）被推入执行栈，同步代码执行。在执行的过程中，会判断是同步任务还是异步任务，通过对一些接口的调用，可以产生新的宏任务与微任务，它们会分别被推入各自的任务队列里。同步代码执行完了，全局script脚本会被移出宏队列，这个过程本质上是队列的宏任务的执行和出队的过程。
上一步我们出队的是一个宏任务，这一步我们处理的是微任务。但需要注意的是：当宏任务出队时，任务是一个一个执行的；而微任务出队时，任务是一队一队执行的。因此，我们处理微任务队列这一步，会逐个执行队列中的任务并把它出队，直到队列被清空。

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

六、宏任务(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)

最终打印结果依次为Promise1、setTimeout2、Promise2、setTimeout1

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