前端百题斩【032】——两个角度一个实战了解事件循环

写该系列文章的初衷是“让每位前端工程师掌握高频知识点，为工作助力”。这是前端百题斩的第32斩，希望朋友们关注公众号“执鸢者”，用知识武装自己的头脑。

111

9.1 任务分类

9.1.1 广义分类

从广义的角度来看，任务主要分为两种：同步任务、异步任务。

1. 同步任务

在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务。

1. 异步任务

不进入主线程，而进入“任务队列”的任务，只有“任务队列”通知主进程，某个异步任务可以执行了，该任务才会进入主线程执行。（注：异步任务解决的是性能问题）

拓展一下：为什么会存在异步任务？

因为js是单线程的，如果只有同步任务，所有任务都是在单线程中执行的，所以每次只能执行一个任务，而其它任务都处于等待状态，从而造成下一个任务等待较长时间，通过异步任务就可以很好的解决这个问题。

9.1.2 精确分类

除了广义上同步任务和异步任务这种分类外，其实有更加精确的分类：宏任务和微任务。

1. 宏任务

宏任务主要指的是任务队列中的这些任务，主要包含以下几类：

（1）整体script代码

（2）setTimeout

（3）setInterval

（4）setImmediate（Node独有）

（5）I/O

1. 微任务

微任务就是一个需要异步执行的函数，执行时机是在主函数执行结束之后、当前宏任务结束之前，主要包含以下几类：（注：微任务解决的是实时性问题）

（1）process.nextTick(Node独有)

将callback添加到下一个时间点的队列；

（2）MutationObserver

使用MutationObserver监控某个DOM节点，当DOM节点发生变化时，就会产生DOM变化记录的微任务。

（3）Promise以及以Promise为基础开发出来的其它技术（注意：当调用Prommise.resolve()或者Promise.reject()的时候也会产生微任务）

扩展一下：为什么需要微任务？它解决了什么问题？

如果不存在微任务，将所有的操作按照同一优先级顺序执行，会造成一些高优先级任务的实时性问题，所以才会出现微任务，通过将对实时性要求较高的任务放到微任务队列中，从而保证高优先级任务的实时性要求。

9.2 事件循环流程

JS使用单线程的“事件循环（Event Loop）”来处理多个任务的执行，下面从两个角度来解释整个流程。

9.2.1 同步和异步角度

从同步和异步任务的角度来看，整个事件循环流程可分为以下步骤：

1. 同步和异步任务分别进入不同的执行场所，同步的进入主线程，异步的进入Event Table并注册函数；

2. 当指定的事情完成是，Event Table会将这个函数移入Event Queue;

3. 主线程的任务执行完毕为空是，会去Event Queue读取对应的函数，进入主线程执行；

4. 上述过程会不断重复，也就是常熟的Event Loop（事件循环）。

cmd-markdown-logo

注：该图来源于网络

9.2.2 宏任务和微任务角度

从宏任务和微任务角度来看，整个事件循环机制可分为以下步骤：

1. 获取一个宏任务开始执行，在执行时先创建一个微任务队列，当遇到微任务的时候将微任务放到微任务队列；

2. 接着获取微任务队列中的所有微任务，然后依次执行（注：在执行微任务的时候产生的微任务将放到微任务的队列的尾部，在本次循环中执行完毕）

3. 循环执行该过程。

image-20210725213408459.png

9.3 实战

事件循环的核心内容就是需要区分清楚任务类型，只要将任务类型划分好之后按照顺序依次执行即可，下面用一段代码演示以下整个的输出内容。

console.log('start');

setTimeout(function() {
    console.log('setTimeout1');
    const promise2 = new Promise((resolve, reject) => {
        console.log('promise2');
        resolve();
    });

    promise2.then(() => {
        console.log('then2');
        const promise3 = new Promise(resolve => {
            console.log('promise3');
            resolve();
        });
        promise3.then(() => {
            console.log('then3');
        });
    });
}, 1000);

setTimeout(function() {
    console.log('setTimeout2');
    const promise4 = new Promise((resolve, reject) => {
        console.log('promise4');
        resolve();
    });

    promise4.then(() => {
        console.log('then4');
    });
}, 1000);
const promise1 = new Promise(resolve => {
    console.log('promise1');
    resolve();
});

promise1.then(() => {
    console.log('then1');
});

console.log('end');

只要了解整个事件循环机制，很容易可以得出答案，答案如下所示：

start
promise1
end
then1
setTimeout1
promise2
then2
promise3
then3
setTimeout2
promise4
then4

1.如果觉得这篇文章还不错，来个分享、点赞、在看三连吧，让更多的人也看到～

2.关注公众号执鸢者，领取学习资料，定期为你推送原创深度好文

3.关注公众号进群，里面大佬多多，一起向他们学习

1. 前端百题斩[001]——typeof和instanceof

2. 前端百题斩【002】——js中6种变量声明方式

3. 前端百题斩【003-004】——从基本类型、引用类型到包装对象

4. 前端百题斩【005】—— js中9种遍历对象的方法

5. 前端百题斩【006】——js中三类字符串转数字的方式

6. 前端百题斩【007】——js中必须知道的四种数据类型判断方法

7. 前端百题斩【008-009】——从JavaScript的代码执行过程到函数执行过程

8. 前端百题斩【010】——通俗易懂的JavaScript执行上下文

9. 前端百题斩【011】——通俗易懂的变量对象

10. 前端百题斩【012】——js中作用域及作用域链的真面目

11. 前端百题斩【013】——用“闭包”问题征服面试官

12. 前端百题斩【014】——js中的这些“this”指向都值得了解

13. 前端百题斩【015】——快速手撕call、apply、bind

14. 前端百题斩【016】——原型、构造函数和实例之间的奇妙关系

15. 前端百题斩【017】——一基础、二主线、双机制理解原型链

16. 前端百题斩【018】——从验证点到手撕new操作符

17. 前端百题斩【019】——数组中方法原理早知道

18. 前端百题斩【020】——竟然有五种方式实现flat方法

19. 前端百题斩【021】——通俗易懂的防抖与节流

20. 前端百题斩【022】——开拓思路之三种方式实现字符串转驼峰

21. 前端百题斩【023】——赋值、浅拷贝、深拷贝大PK

22. 前端百题斩【024】——我从浏览器控制台看到了五种存储方式

23. 前端百题斩【025】——原来跨域也是可以进行分类的

24. 前端百题斩【026】——浏览器出让安全性造就JSONP

25. 前端百题斩【027】——解决跨域的常用利器CORS全解

26. 前端百题斩【028】——浏览器中的请求们

27. 前端百题斩【029】——原来浏览器中存在五类进程

28. 前端百题斩【030】——神奇的浏览器渲染流程

29. 前端百题斩【031】——从渲染流程认识重绘和回流

30. 一文搞懂Cookie、Storage、IndexedDB