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

最新推荐文章于 2025-12-20 12:23:55 发布

原创最新推荐文章于 2025-12-20 12:23:55 发布 · 151 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html5 #node.js

面试专栏收录该内容

12 篇文章

订阅专栏

本文深入探讨JavaScript中的异步执行机制，重点讲解宏任务（如setTimeout、setInterval、Ajax和DOM事件）和微任务（如Promise、async/await）。微任务在宏任务执行完后立即执行，确保了异步操作的高效和及时响应。在前端开发中，异步处理对于解决如图片加载等耗时任务至关重要，避免阻塞主线程。理解宏任务和微任务的执行顺序对于优化JavaScript代码性能具有重要意义。

什么是微任务以及宏任务?

宏任务包括：setTimeout setInterval Ajax DOM事件
微任务：Promise async/await
微任务比宏任务的执行时间要早

异步和单线程

异步和单线程是相辅相成的，js是一门单线程脚本语言，所以需要异步来辅助

异步和同步的区别:

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

前端使用异步的场景：

定时任务：setTimeout，setInverval
网络请求：ajax请求，动态<img>加载
事件绑定

//ajax请求代码示例
console.log('start')
$.get('./data1.json',function(data1){
	console.log(data1)
})
console.log('end')

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

同步任务
异步任务

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