阅读 2374

『前端干货篇』: 你不知道的Event Loop

一星期的满课,身心疲惫(×_×)...周末闲下来,仔细研究了下JS的事件轮询机制,看了看阮一峰大大的相关文章,真的收货挺多。

从一道面试题说起

setTimeout(function() {
  console.log(111);
}, 0);   // 这里定时器时间设置为0ms后执行

console.log(222);
复制代码

相信这道题很多人都看过,结果是先输出222,再输出111
可能新手会犯错,认为定时器设置0毫秒就等于立即就执行,所以先输出111。但其实内部涉及一个很重要的JS运行机制,也就是我们今天的主角——事件轮询(Event Loop)

JS的特点

在聊Event Loop之前,有必要先讲讲JS的一些重要特点

JS的单线程

JS的一大特点就是单线程,也就是说,同一个时间只能做一件事。那么,为什么JS不能有多个线程呢?

第一,为了提高效率,减少CPU的开销。在多线程中,CPU需要来回切换线程,就会存在线程切换上的开销。

第二,JS最初设计时,是作为浏览器的脚本语言,主要用途是与用户互动,以及操作DOM。这就决定了它只能是单线程,否则会带来很复杂的同步问题。比如,假定JS同时有两个线程,一个线程在某个DOM节点上添加内容,另一个线程删除了这个节点,这时浏览器应该以哪个线程为准?

JS的异步

说到JS的异步,可能有同学会问啦,JS是单线程的怎么还能异步执行,这不是自相矛盾吗?的确,单线程和异步确实不能同时成为一个语言的特性,所以它本身不可能是异步的。一定是存在一种机制让它能够异步执行,往下看!

任务队列

JS是单线程就意味着,所有任务需要排队,等前一个任务结束,才能执行后一个任务。但前端的某些任务是非常耗时的,例如IO设备(输入输出设备)、Ajax操作(从网络读取数据)、定时器...不得不等着结果出来,再往下执行。如果让他们和别的任务一样,都老老实实的排队等待执行的话,执行效率会非常的低,甚至导致页面的假死,用户体验很差。

这个时候,任务队列就派上用场了。

在JS中,所有任务可以分成两种。一种是同步任务,另一种是异步任务。

同步任务指的是,在主线程上排队执行的任务,只有前一个任务执行完毕,才能执行后一个任务;异步任务指的是,不进入主线程,而进入"任务队列"的任务,只有"任务队列"通知主线程,某个异步任务可以执行了,该任务才会进入主线程执行。

任务队列中的任务事件,一般有个共性就是存在"回调函数"。所谓"回调函数",就是那些会被主线程挂起来的代码。异步任务必须指定回调函数,当主线程开始执行异步任务时,执行就是对应的回调函数。

值得一提的是,任务队列不止一条。由于异步任务有很多种,比如事件监听类,定时器类,Ajax请求类...所以可以有很多条任务队列

这样说大家可能还不太明白,我画个图解释下

Event Loop

主线程从"任务队列"中读取事件,这个过程是循环不断的,所以整个的这种运行机制又称为Event Loop(事件轮询)。
执行流程

(1)所有同步任务都在主线程上执行,形成一个执行栈(每执行一条代码,向栈中压入这条代码)。

(2)主线程之外,还存在一个"任务队列"。存放异步执行的代码,如定时器、事件监听回调函数等,进入等待状态。

(3)一旦主线程中的所有同步任务执行完毕,就会读取"任务队列",看看里面有哪些任务。那些对应的异步任务,于是结束等待状态,进入执行栈,开始执行。

(4)主线程不断重复上面的第三步(轮询)。
复制代码

具体举个例子吧
假如我们有一段代码

var a = 11111
console.log(a)

var btn1 = document.getElementById('btn1')
btn1.onclick = function() {
    console.log(22222)
}

var btn2 = document.getElementById('btn2')
btn2.onclick = function() {
    console.log(33333)
}

setTimeout(function() {
  console.log(44444)
}, 1000)

console.log(55555)
复制代码

以上代码在JS引擎中其实是这样执行的

var a = 11111
console.log(a)
var btn1 = document.getElementById('btn1')
var btn2 = document.getElementById('btn2')
console.log(44444)
复制代码

这五句代码是同步代码,会直接进入主线程,依次执行

btn.onclick = function() {
    console.log(22222)
}

btn2.onclick = function() {
    console.log(33333)
}

setTimeout(function() {
  console.log(33333)
}, 1000)
复制代码

这三块异步代码不会直接进入主线程,而是先在相应的任务队列中注册

当主线程执行完所有同步代码时,就开始不断轮询任务队列是否有任务需要执行,轮询的过程很快。在轮询过程中,要是用户点击了btn1按钮,任务队列会通知主线程,"说我这有异步代码已就绪,需要你来执行"。这时btn1.onclick就从任务队列中弹出,到主线程中执行

同样的,当过了1s时,任务队列会通知定时器需要执行,这时主线程轮询时得到这条"通知",所以就执行定时器中语句

知道这个机制后,我们再回头看看那个面试题

setTimeout(function() {
  console.log(111);
}, 0);   // 这里定时器时间设置为0ms后执行

console.log(222);
复制代码

这里的console.log(222) 首先在主线程中执行,而定时器则是先在任务队列中注册。当主线程中代码执行完(也就是console.log('222')这条语句执行完后),主线程开始轮询任务队列中的异步代码,由于定时器设置的时间是0ms,所以任务队列会立即通知主线程,可以执行。最后定时器就会到主线程中开始执行。这就是为什么打印的结果先是222,后111。

总结

JS的事件轮询的机制,使任务队列、JS主线程、异步操作之间可以相互协作。这正是JS语言与众不同的运行方式,也因此使它具备了其他语言不具备的优势。
最后感谢大家百忙之中辛苦观看,也希望这篇文章可以帮助屏幕前的你更好的理解JS的Event Loop机制!

关注下面的标签,发现更多相似文章
评论