浅谈Event Loop

_未名
1,481 阅读6分钟

前言

本文首发于掘金@黑金团队，现搬运到自己帐号

上一篇中@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.nextTick、promise吧，这时候执行顺序会有点儿复杂，往下看。

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

  • 常见的宏任务：script（整体代码）、setTimeout、setInterval、I/O、setImmedidate
  • 常见的微任务：process.nextTick、MutationObserver、Promise.then catch finally

process.nextTick和setImmidate是只支持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

结语

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

看完promise可以做一下题试试水：Eventloop不可怕，可怕的是遇上Promise。

参考文章

最后

以上，如有错漏，恳请指正！

avatar
文章
阅读
粉丝