《JavaScript》异步编程（二）Event Loop机制(1)

3. （3）新建线程。因为进程太耗费资源，所以如今的程序往往允许一个进程包含多个线程，由线程去完成任务。（进程和线程的详细解释，请看这里。）

而JS是采用的第一种，这也就解释了，当JS代码过于庞大，任务过于多的时候，网页出现了"假死"现象，未响应，浏览器奔溃。（如果想更多了解机制性原理，请查看阮一峰老师的《什么是 Event Loop》）

​

宏任务和微任务

---

首先，先看一段代码

console.log(1);

setTimeout(() => {

console.log(2);

}, 0);

Promise.resolve().then(() => {

console.log(3);

});

console.log(4);

在这一段代码中，无疑肯定是先打印1，再打印4，之后便是定时器和promise，问题是哪个先执行，哪个后执行，很明显定时器和promise都是异步任务，那么按照理解，异步任务都会放进任务队列，那么自然就是先放进去的先执行，那么就会打印2，再打印3，因此:

猜想的执行顺序：1-> 4 -> 2 -> 3;

将代码放进浏览器运行，实际的结果:1-> 4 -> 3 -> 2，这就奇怪了，为什么呢？其实在异步中，分宏任务和微任务，下面请先看张图

上面这两张图就是分别对应的宏任务和微任务，其中有几个不常用简单说明一下，setImmediate是node的一个方法，作用和setTimeout这些差不多，postMessage是用来进行窗口之间的通信，MutationObserver是监听DOM的变化，当监听的DOM发现变化是触发事件，Object.observe则是用于监听属性的变化；

宏任务和微任务的具体执行流程，大致如下：

1. 执行栈执行最先进入队列的宏任务（一般都是script），将这个宏任务的同步代码全部执行至结束；

2. 检查是否存在微任务，如果存在微任务，则会执行至微任务队列到空为止；

3. 如果宿主为浏览器，可能会渲染页面；

4. 开始下一轮tick，执行宏任务中的异步代码（setTimeout等回调）；

如果不清晰，可以看下放从网上找到的示意图：

到这里，其实能在一定程度上解释什么是Event Loop，Event Loop就是一个任务检查并执行的机制，放在JS里就是循环执行宏任务，并且在每一个宏任务执行完毕后，都会去清空微任务列表；

​​

回到上段代码

console.log(1);

setTimeout(() => {

console.log(2);

}, 0);

Promise.resolve().then(() => {

console.log(3);

});

console.log(4);

使用流程图解释

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！**](https://bbs.csdn.net/topics/618191877)

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！