阅读 2673

浅谈Event Loop

前言

上一篇中@TDGarden说:又到了春暖花开、万物复苏的季节,大家都忙着谈恋爱,没时间写博客了。
然后在群里发了一张图给我:

说这个位置适合我。
于是我就懂了。我该写博客了。毕竟我们前端现在只有我有时间写博客。

好了,不瞎扯了,我们进入正题,来聊聊Event Loop。本文算是对这几天来学习Event Loop的总结和梳理,参考了很多大佬的文章,如有错误,恳请指正。

从单线程说起

众所周知,js是一种单线程语言。为什么是单线程呢?我引用一句烂大街的话:假设js同时有两个线程,一个线程想要在某个dom节点上增加内容,另一个线程想要删除这个节点,这时要以哪个为准呢?当然,多线程有多线程的解决办法,加锁啊,但是这样的话,又会引入锁、状态同步等问题。

js是浏览器脚本语言,主要用途是与用户互动,操作dom,多线程会带来很复杂的同步问题。

好吧,那就单线程吧。但是单线程又带来了单线程的问题,只有一个线程啊,任务要排队执行,如果前一个任务执行时间很长(ajax请求后台数据),后面的任务就都得等着。

Event Loop就出现了,来背单线程的锅。

Event Loop

往下看之前你应该知道栈、队列、同步任务、异步任务、执行栈这些基本概念。

关于执行栈有一篇很详细的文章推荐:JavaScript深入之执行上下文栈

请看下图:

  1. js在执行代码时,代码首先进入执行栈,代码中可能包含一些同步任务和异步任务。

  2. 同步任务立即执行,执行完出栈,over。

  3. 异步任务也就是常见的ajax请求、setTimeout等,代码调用到这些api的时候,WebAPIs来处理这些问题,执行栈继续执行。

  4. 异步任务有了运行结果时,(当ajax请求结果返回时),WebAPIs把对应的回调函数放到任务队列。

  5. 执行栈为空时来读取任务队列中的第一个函数,压入执行栈。

步骤5不断重复,执行栈为空时,系统就去任务队列中拿第一个函数压入栈继续执行。这个过程不断重复,这就是事件循环(Event Loop)。

来看一个简单的demo。

console.log(1);

setTimeout(() => {
    console.log(2);
}, 2000);

console.log(3);
复制代码
  • console.log(1) 同步任务,输出1
  • setTimeout异步任务,交给webapis去处理,2s后,console.log(2)进入任务队列
  • console.log(3)同步任务,输出3
  • 执行栈为空,系统读取任务队列里的事件
  • 执行console,log(2),输出2

宏任务&微任务

说到这儿当然还没完。相信你肯定见过process.nextTickpromise吧,这时候执行顺序会有点儿复杂,往下看。

微任务、宏任务与Event-Loop用了很通俗的例子讲了宏任务和微任务的区别,我这里就不啰嗦了。如果你不想了解也没关系,因为常见的宏任务、微任务就那几种,记住就可以了。

  • 常见的宏任务:script(整体代码)setTimeoutsetIntervalI/OsetImmedidate
  • 常见的微任务:process.nextTickMutationObserverPromise.then catch finally

process.nextTicksetImmidate是只支持Node环境的。

还有,process.nextTick是有一个插队操作的,就是说他进入微任务队列时,会插到除了process.nextTick 其他的微任务前面。

所以,我们上面提到的任务队列,是包括一个宏任务队列和一个微任务队列的。每次执行栈为空的时候,系统会优先处理微任务队列,处理完微任务队列里的所有任务,再去处理宏任务。

做两道题

前面叨叨了那么多,下面做两道题试试水吧。

new Promise(resolve => {
    resolve(1);
    Promise.resolve().then(() => console.log(2));
    console.log(4);
}).then(t => console.log(t));
console.log(3);
复制代码

hahahhhhh我搬出了阮老师的题。

  • 首先new Promise执行,resolve(1)表示创建的promise对象的状态变为resolved
  • Promise.resolve()相当于创建了一个promise对象,then里面的匿名回调函数进入微任务队列,此时的微任务队列是[() => console.log(2)]
  • 输出 4
  • new Promise的then函数里面的匿名回调进入微任务队列, 此时的微任务队列是[() => console.log(2), t => console.log(t)]
  • 输出 3

所以,最后输出的顺序是4 3 2 1。

emmmmmmm如果你不懂,那我觉得你可以先去复习一下promise

async function async1() {
  console.log('async1 start');
  await async2();
  console.log('async1 end');
}
async function async2() {
  console.log('async2');
}
console.log('script start');
setTimeout(function() {
  console.log('setTimeout');
}, 0);
async1();
new Promise(function(resolve) {
  console.log('promise1');
  resolve();
}).then(function() {
  console.log('promise2');
});
process.nextTick(() => {
  console.log('nextTick');
})
console.log('script end');
复制代码

这是一道烂大街的面试题。。我不信你没见过。话不多说,我们来分析emmmmm我建议你自己先做一下,再往下看。

看到async/await不必紧张,语法糖而已。async表示函数里有异步操作,await之前的代码该怎么执行怎么执行,await右侧表达式照常执行,后面的代码被阻塞掉,等待await的返回。返回是非promise对象时,执行后面的代码;返回promise对象时,等promise对象resolved时再执行。

所以可以理解成后面的代码放到了promise.then 里面。

  • 输出 script start
  • WebAPIs在0s(哦,好像最短是4ms)之后把setTimeout里面的匿名回调函数丢进宏任务队列,简记为['setTimeout'] (请记得丢进任务队列里的是回调函数,函数!)
  • 输出async1 start
  • 输出async2
  • 要输出async1 end代码被丢进微任务队列,此时的微任务队列为['async1 end']
  • 输出promise1
  • promise对象状态变为resolved
  • promise.then 里的匿名函数进入微任务队列,此时的微任务队列为['async1 end', 'promise2']
  • nextTick插队到微任务队列对首,['nextTick', 'async1 end', 'promise2']
  • 输出script end
  • 执行栈空
  • 输出nextTick
  • 输出async1 end
  • 输出promise2
  • 微任务队列为空
  • 输出setTimeout

结语

如果看完本文你还是没太懂,那我建议你可以多看几篇文章,一个烧饼吃不饱,十个就差不多了。

涉及到promiseasync/awaitNode和浏览器环境下事件循环的区别等问题本文没有细讲,但是这些知识会帮你更好地掌握Event Loop。

看完promise可以做一下题试试水:Eventloop不可怕,可怕的是遇上Promise

参考文章

Author:小夭yao爱吃糖糖糖

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