JS线程、Event Loop、事件循环、任务队列、宏任务

·  阅读 6242

1. 前言

很多文章在介绍线程以及线程之间的关系,都存在着脱节的现象。还有的文章过于广大,涉及到了内核,本文希望以通俗易懂的话去描述晦涩的词语,可能会和实际有一丢丢的出入,但是更易理解。

我们都知道JS是单线程的,即js的代码只能在一个线程上运行,也就说,js同时只能执行一个js任务,但是为什么要这样呢?这与浏览器的用途有关,JS的主要用途是与用户互动和操作DOM。设想一段JS代码,分发到两个并行互不相关的线程上运行,一个线程在DOM上添加内容,另一个线程在删除DOM,那么会发生什么?以哪个为准?所以为了避免复杂性,JS从一开始就是单线程的,以后也不会变。

2. 浏览器

既然JS是单线程的,那么诸如onclick回调,setTimeout,Ajax这些都是怎么实现的呢?是因为浏览器或node(宿主环境)是多线程的,即浏览器搞了几个其他线程去辅助JS线程的运行。

浏览器有很多线程,例如:

  1. GUI 渲染线程

  2. JS 引擎线程

  3. 定时器触发线程 (setTimeout)

  4. 浏览器事件线程 (onclick)

  5. http 异步线程

  6. EventLoop轮询处理线程

    ...

其中,1、2、4为常驻线程

接下来,我们对这些线程进行分类。

3. 线程与进程

什么是进程?

我们可以在电脑的任务管理器中查看到正在运行的进程,可以认为一个进程就是在运行一个程序,比如用浏览器打开一个网页,这就是开启了一个进程。但是比如打开3个网页,那么就开启了3个进程,我们这里只研究打开一个网页即一个进程。

一个进程的运行,当然需要很多个线程互相配合,比如打开QQ的这个进程,可能同时有接收消息线程、传输文件线程、检测安全线程......所以一个网页能够正常的运行并和用户交互,也需要很多个进程之间相互配合,而其主要的一些线程,刚才在上面已经列出来了,分类:

类别A:GUI 渲染线程

类别B:JS 引擎线程

类别C:EventLoop轮询处理线程

类别D:其他线程,有 定时器触发线程 (setTimeout)、http 异步线程、浏览器事件线程 (onclick)等等。

注意: 类别A和类别B是互斥的,原因不用说了,不知道的看我上一篇文章。所以我们下面的讨论,就不涉及类别A了,只讨论类别B、C、D之间的关系。

类别B:

JS 引擎线程,我们把它称为主线程,它是干嘛的?即运行JS代码的那个线程(不包括异步的那些代码),比如:

1 var a = 2;
2 setTimeout()
3 ajax()
4 console.log()
复制代码

第1、4行代码是同步代码,直接在主线程中运行;第2、3行代码交给其他线程运行。

主线程运行JS代码时,会生成个执行栈,可以处理函数的嵌套,通过出栈进栈这样,这里不做过多介绍,很多文章。

消息队列(任务队列)

可以理解为一个静态的队列存储结构,非线程,只做存储,里面存的是一堆异步成功后的回调函数字符串,肯定是先成功的异步的回调函数在队列的前面,后成功的在后面。

注意:是异步成功后,才把其回调函数扔进队列中,而不是一开始就把所有异步的回调函数扔进队列。比如setTimeout 3秒后执行一个函数,那么这个函数是在3秒后才进队列的。

类别D:

定时器触发线程 (setTimeout)、http 异步线程、浏览器事件线程 (onclick)

主线程执行JS代码时,碰到异步代码,就把它丢给各自相对应的线程去执行,比如:

1 var a = 2;
2 setTimeout(fun A)
3 ajax(fun B)
4 console.log()
5 dom.onclick(func C)
复制代码

主线程在运行这段代码时,碰到2 setTimeout(fun A),把这行代码交给定时器触发线程去执行

碰到3 ajax(fun B),把这行代码交给http 异步线程去执行

碰到5 dom.onclick(func C) ,把这行代码交给浏览器事件线程去执行

注意: 这几个异步代码的回调函数fun A,fun B,fun C,各自的线程都会保存着的,因为需要在未来的某个时候,将回调函数交给主线程去执行啊。。。

所以,这几个线程主要干两件事:

  1. 执行主线程扔过来的异步代码,并执行代码
  2. 保存回调函数,在未来的某个时刻,通知EventLoop轮询处理线程过来取相应的回调函数然后执行(下面会讲)

类别C:

EventLoop轮询处理线程

上面我们已经知道了,有3个东西

  1. 主线程,处理同步代码
  2. 类别D的几个异步线程,处理异步代码
  3. 消息队列,存储着异步成功后的回调函数,一个静态存储结构

这里再对消息队列说一下,其作用就是存放着未来要执行的回调函数,比如

setTimeout(() => {
    console.log(1)
}, 2000)
setTimeout(() => {
    console.log(2)
}, 3000)
复制代码

在一开始,消息队列是空的,在2秒后,一个 () => { console.log(1) } 的函数进入队列,在3秒后,一个 () => { console.log(2) }的函数进入队列,此时队列里有两个元素,主线程从队列头中挨个取出并执行。

到这里我们就知道了,这3个东西大概的作用、关系和流程,但是,它们3个互相怎么交流的?这需要一个中介去专门去沟通它们3个,而这个中介,就是EventLoop轮询处理线程

既然叫轮询了,那么肯定是不断的循环的去交流和沟通

图画的有点丑,但是大概是这个意思,从主线程那里顺时针的看。

注意整个的流程是循环往复的。

注意只有主线程的同步代码都执行完了,才会去队列里看看还有啥要执行的没

小区别

在异步线程类别D那里,还有一些小区别:

主线程把setTimeout、ajax、dom.onclick分别给三个线程,他们之间有些不同

  • 对于setTimeout代码,定时器触发线程在接收到代码时就开始计时,时间到了将回调函数扔进队列

  • 对于ajax代码,http 异步线程立即发起http请求,请求成功后将回调函数扔进队列

  • 对于dom.onclick,浏览器事件线程会先监听dom,直到dom被点击了,才将回调函数扔进队列

4. 总体实例

var a = 111;


setTimeout(function() {
    console.log(222)
}, 2000)

fetch(url)  // 假设该http请求花了3秒钟
.then(function() {
    console.log(333)
})

dom.onclick = function() {  // 假设用户在4秒钟时点击了dom
    console.log(444)
}


console.log(555)


// 结果
555
222
333
444

复制代码

步骤1:

主线程只执行了var a = 111;和console.log(555)两行代码,其他的代码分别交给了其他三个线程,因为其他线程需要2、3、4秒钟才成功并回调,所以在2秒之前,主线程一直在空闲,不断的探查队列是否不为空。

此时主线程里其实已经是空的了(因为执行完那两行代码了)

步骤2:

2秒钟之后,setTimeout成功了

步骤3:

步骤4:

注意

图里的队列里都只有一个回调函数,实际上有很多个回调函数,如果主线程里执行的代码复杂需要很长时间,这时队列里的函数们就排着,等着主线程啥时执行完,再来队列里取

所以从这里能看出来,对于setTimeout,setInterval的定时,不一定完全按照设想的时间的,因为主线程里的代码可能复杂到执行很久,所以会发生你定时3秒后执行,实际上是3.5秒后执行(主线程花费了0.5秒)

之后我会再写如何解决定时误差的内容。。。

借两个经典的图

setTimeout、setInterval

关于这两个的延迟和解决办法,看这篇文章,也是经常考的一个知识点!!!

关于setInterval()你所不知道的地方

进阶

如上就是广义的事件循环机制,接下来我们再深入细化一下

上面的任务消息队列,可以再细分为两种:

宏任务:

  • setTimeout,setInterval,setImmediate,requestAnimationFrame
  • UI交互事件
  • 网络请求等等

注意:一个setTimeout就相当于一个宏任务,所以队列里一堆回调函数都可以改叫为一个一个的任务

微任务:

  • Promise.then
  • process.nextTick(Node.js 环境)

注意:new Promise执行本身时是属于同步代码,只有.then才是微任务

广义轮询

所以我们之前所讲的,其流程应为:

执行同步代码 ==> 去宏任务队列里 ==> 执行宏任务1 ==> 执行宏任务2 ...

微任务

加入微任务后,流程变为

执行同步代码 ==> 检查微任务并执行 ==> 执行宏任务1 ==> 检查微任务并执行 ==> 执行宏任务2 ==> 检查微任务并执行 ==> 执行宏任务3 ......

也就是说,之前说的所有异步都放进一个任务消息队列里,现在也就是分为两个任务队列了,比较容易理解。

面试题:

console.log('1');

setTimeout(function() {
    console.log('2');
    process.nextTick(function() {
        console.log('3');
    })
    new Promise(function(resolve) {
        console.log('4');
        resolve();
    }).then(function() {
        console.log('5')
    })
})
process.nextTick(function() {
    console.log('6');
})
new Promise(function(resolve) {
    console.log('7');
    resolve();
}).then(function() {
    console.log('8')
})

setTimeout(function() {
    console.log('9');
    process.nextTick(function() {
        console.log('10');
    })
    new Promise(function(resolve) {
        console.log('11');
        resolve();
    }).then(function() {
        console.log('12')
    })
})

// 执行结果为1,7,6,8,2,4,3,5,9,11,10,12
复制代码

只要记住,每次执行完一个宏任务后都要去检查微任务就可以了。

补充个题:

<script>
  console.log('start')
  setTimeout(() => {
    console.log('timer1')
    Promise.resolve().then(() => {
      console.log('promise1')
    })
  }, 0)
  setTimeout(() => {
    console.log('timer2')
    Promise.resolve().then(() => {
      console.log('promise2')
    })
  }, 0)
  setTimeout(() => {
    console.log('timer3')
    Promise.resolve().then(() => {
      console.log('promise3')
    })
  }, 0)
  new Promise(function(resolve) {
    console.log('promise4');
    resolve();
  }).then(function() {
    console.log('promise5')
  })
  console.log('end')
</script>
复制代码

执行结果:start > promise4 > end > promise5 > timer1 > promise1 > timer2 > promise2 > timer3 > promise3

分类:
前端
标签: