原来JavaScript是这样运行的

6,291 阅读9分钟

一、前言

大家都知道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。