js异步之宏任务（marcroTask）和微任务（microTask）

• 异步不会阻塞程序的执行，

• 同步会阻塞程序的执行，

前端使用异步的场景：

1. 定时任务：setTimeout，setInverval

2. 网络请求：ajax请求，动态<img>加载

3. 事件绑定

//ajax请求代码示例

console.log(‘start’)

$.get(‘./data1.json’,function(data1){

console.log(data1)

})

console.log(‘end’)

加载示例：

事件绑定示例：

也就是请求处理过程中，你不能闲着，会产生异步的请求，回头再处理，然后继续执行下面的请求。

同步阻塞示例：

console.log(1000)

alert(200)

console.log(3000)

上面就是同步阻塞示例，你不点击alert确认窗口，不会打印3000

js绝大部分都是同步，不过多详解；

同步异步问题

---

首先，你要知道javascript是单线程语言。js任务需要排队顺序执行，如果一个任务耗时过长，后边一个任务也的等着，但是，假如我们需要浏览新闻，但新闻包含的超清图片加载很慢，总不能网页一直卡着直到图片完全出来，所以将任务设计成了两类：

同步任务

异步任务

当我们打开网站时，网页的渲染过程就是一大堆同步任务，像页面骨架和页面元素的渲染，而加载图片、音乐之类的任务就是异步任务，看一下下边导图：

同步和异步任务分别进入不同的执行“场所”，同步进入主线程，异步进入Event Table并注册函数。当指定的事情完成时，Event Table会将这个函数移入任务队列(Event Queue)。主线程内的任务执行完毕为空，就去任务队列（Event Queue）读取对应的函数，进入主线程执行。

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

但是，JS异步还有一个机制，就是遇到宏任务，先执行宏任务，将宏任务放入任务队列（event queue），然后再执行微任务，将微任务放入微任务队列（micro task queue），但是，这两个queue不是一个queue。当你往外拿的时候先从微任务队列里拿这个回调函数，然后再从宏任务的queue拿宏任务的回调函数，如下图：

任务列队和event loop（事件循环）

单线程就意味着，所有的任务都要排队，前一个结束，才会执行后面的任务。如果列队是因为计算量大，CPU忙不过来，倒也算了。但是更多的时候，CPU是闲置的，因为IO设备处理得很慢，例如

ajax读取网络数据。js设计者便想到，主线程完全可以不管IO设备，将其挂起，然后执行后面的任务。等后面的任务结束掉，在反过头来处理挂起的任务。

好，我们来梳理一下：

1）所有的同步任务都在主线程上执行，行成一个执行栈。

2）除了主线程之外，还存在一个任务列队，只要异步任务有了运行结果，就在任务列队中植入一个时间标记。

3）主线程完成所有任务(执行栈清空），就会读取任务列队，先执行微任务队列在执行宏任务队列。

4）重复上面三步。

只要主线程空了，就会读取任务列队，这就是js的运行机制，也被称为 event loop（事件循环）。

三、执行顺序

---

1.主线程上宏任务、微任务执行顺序

console.log(‘—start—’);//第一轮主线程

setTimeout(() => {

console.log(‘setTimeout’); // 将回调代码放入个宏任务队列，第二轮宏任务执行

}, 0);

new Promise((resolve, reject) => {

console.log(‘—Promise第一轮微任务同步执行—’);//第一轮微任务同步执行

resolve()

}).then(()=>{

console.log(‘Promise.then实例成功回调执行’); // 将回调代码放入微任务队列，第一轮宏任务执行完后立即执行

});

console.log(‘—end—’);//第一轮主线程结束

执行顺序：主线程 >> 主线程上创建的微任务 >> 主线程上创建的宏任务

2.宏任务中包含微任务

// 宏任务队列 1

setTimeout(() => {

// 宏任务队列 2.1

console.log(‘timer_1’);

setTimeout(() => {

// 宏任务队列 3

console.log(‘timer_3’)

}, 0)

new Promise(resolve => {

resolve()

console.log(‘new promise’)

}).then(() => {

// 微任务队列 1

console.log(‘promise then’)

})

}, 0)

setTimeout(() => {

// 宏任务队列 2.2

console.log(‘timer_2’)

}, 0)

console.log(‘========== Sync queue ==========’)

执行顺序：主线程 >> 主线程上的宏任务队列1 >> 宏任务队列1中创建的微任务

========== Sync queue ==========

1 timer_1

2 new promise

3 promise then

最后

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

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

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

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

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

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

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

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

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