讲师中心 微信公众号

工具推荐

视频效率加速
AniShort
AniShort

AI短剧协同制作平台

剧云
剧云

中文短剧剧本制作平台

updream

一键生成高质量推广成片

立刻MV
立刻MV

低成本歌曲 MV、视频生成

JavaScript事件循环与微任务队列

云敏君_2611

云敏君_2611

发布时间:2025-10-30 18:59:02

|

974人浏览过

|

来源于php中文网

原创

JavaScript通过事件循环实现异步,先执行同步代码,再处理回调;宏任务(如setTimeout)每轮取一个,微任务(如Promise.then)在宏任务后立即清空。输出顺序为1→4→3→2,因微任务优先级高;但滥用微任务可能阻塞UI更新或引发“微任务风暴”,需合理选择执行时机。

javascript事件循环与微任务队列

JavaScript 是单线程语言,通过事件循环(Event Loop)实现异步操作的处理。理解事件循环和微任务队列是掌握 JavaScript 异步执行机制的关键。

事件循环的基本原理

JavaScript 引擎在执行代码时,会先运行同步任务,这些任务在主线程上按顺序执行。当遇到异步操作(如 setTimeout、Promise、DOM 事件等),它们会被挂起并交给浏览器的其他模块处理。一旦这些异步任务完成,对应的回调函数就会被放入任务队列中,等待事件循环调度执行。

事件循环持续检查调用栈是否为空。如果为空,就从任务队列中取出一个任务推入调用栈执行。这个过程不断重复,形成“循环”。

宏任务与微任务的区别

在事件循环中,任务分为两类:宏任务(macrotask)和微任务(microtask)。

立即学习“Java免费学习笔记(深入)”;

  • 宏任务 包括:整体 script 代码、setTimeout、setInterval、I/O、UI 渲染等。
  • 微任务 包括:Promise.then/catch/finally 回调、MutationObserver、queueMicrotask 等。

每次事件循环迭代中,只会从宏任务队列中取一个任务执行。但在该宏任务执行结束后,会清空当前所有的微任务队列——也就是说,所有已存在的微任务会连续执行,直到微任务队列为空,才会进行下一轮宏任务。

CDP浏览器大师
CDP浏览器大师

CDP浏览器大师:通过Chrome DevTools Protocol驱动已登录浏览器实现自动化任务,解决反爬封号、选择器失效、SPA路由难导航、固定sleep不准四大痛点。核心能力包括UA伪装、WebGL/Canvas指纹混淆、智能等待、动态选择器以及可视化调试。

下载

微任务队列的执行时机

微任务的关键特性是在**每个宏任务执行完后立即执行**。这意味着微任务具有更高的优先级。

例如:

console.log('1');

setTimeout(() => {
  console.log('2');
}, 0);

Promise.resolve().then(() => {
  console.log('3');
});

console.log('4');

输出顺序是:1 → 4 → 3 → 2。

解释:

  • '1' 和 '4' 是同步代码,最先输出。
  • Promise 的 then 回调是微任务,在当前宏任务结束后立即执行。
  • setTimeout 是宏任务,要等到下一个事件循环周期才执行。

实际应用中的注意事项

由于微任务执行时机早于下一个宏任务,滥用微任务可能导致问题:

  • 长时间清空微任务队列会阻塞 UI 更新,因为渲染属于宏任务。
  • 递归使用 queueMicrotask 或 Promise 可能导致“微任务风暴”,使页面无响应。
  • 在某些场景下,想让代码“稍后执行但不阻塞渲染”,应使用 setTimeout 而非微任务。

基本上就这些。搞清楚宏任务和微任务的执行顺序,就能更好预测异步代码的行为。

热门AI工具

更多
DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

花生AI
花生AI Hot

一款AI视频创作工具,主要用于B站推出的AI视频创作工具,适合需要提升相关任务效率的用户。

PixPix
PixPix Hot

PixPix是一款面向电商视觉生产的AI商品图生成工具。

小橡皮AI

一款AI工具,主要用于小橡皮一键去AI味,将机器味重的内容改得更有活人感,防止因为 AI 内容被平台打上 AI 标签,以及限流,适合需要提升相关任务效率的用户。

Seko
Seko Hot

一款AI视频创作工具,主要用于商汤科技推出的创编一体的AI短视频创作Agent,适合需要提升相关任务效率的用户。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

讯飞智文

一款面向学习和办公场景的AI文档创作工具,可辅助生成PPT与Word文档,提高资料整理和内容制作效率。

二狗PPT
二狗PPT Hot

一款AI演示文稿工具,主要用于专为中式职场打造的AI PPT生成工具,适合需要提升相关任务效率的用户。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

相关专题

更多
堆和栈的区别
堆和栈的区别

堆和栈的区别:1、内存分配方式不同;2、大小不同;3、数据访问方式不同;4、数据的生命周期。本专题为大家提供堆和栈的区别的相关的文章、下载、课程内容,供大家免费下载体验。

6847

2023.07.18

堆和栈区别
堆和栈区别

堆(Heap)和栈(Stack)是计算机中两种常见的内存分配机制。它们在内存管理的方式、分配方式以及使用场景上有很大的区别。本文将详细介绍堆和栈的特点、区别以及各自的使用场景。php中文网给大家带来了相关的教程以及文章欢迎大家前来学习阅读。

2828

2023.08.10

线程和进程的区别
线程和进程的区别

线程和进程的区别:线程是进程的一部分,用于实现并发和并行操作,而线程共享进程的资源,通信更方便快捷,切换开销较小。本专题为大家提供线程和进程区别相关的各种文章、以及下载和课程。

4778

2023.08.10

DOM是什么意思
DOM是什么意思

dom的英文全称是documentobjectmodel,表示文件对象模型,是w3c组织推荐的处理可扩展置标语言的标准编程接口;dom是html文档的内存中对象表示,它提供了使用javascript与网页交互的方式。想了解更多的相关内容,可以阅读本专题下面的文章。

6541

2024.08.14

promise的用法
promise的用法

“promise” 是一种用于处理异步操作的编程概念,它可以用来表示一个异步操作的最终结果。Promise 对象有三种状态:pending(进行中)、fulfilled(已成功)和 rejected(已失败)。Promise的用法主要包括构造函数、实例方法(then、catch、finally)和状态转换。

4860

2023.10.12

html文本框类型介绍
html文本框类型介绍

html文本框类型有单行文本框、密码文本框、数字文本框、日期文本框、时间文本框、文件上传文本框、多行文本框等等。详细介绍:1、单行文本框是最常见的文本框类型,用于接受单行文本输入,用户可以在文本框中输入任意文本,例如用户名、密码、电子邮件地址等;2、密码文本框用于接受密码输入,用户在输入密码时,文本框中的内容会被隐藏,以保护用户的隐私;3、数字文本框等等。

4703

2023.10.12

Postman身份认证怎么配置
Postman身份认证怎么配置

本专题从实际API接口调试场景出发,讲解Postman身份认证的完整配置流程,包括常见认证协议介绍、授权参数设置、访问令牌填写、OAuth 2.0授权及认证失败排查,帮助用户正确完成接口授权与访问验证。

60

2026.11.06

Postman请求头Headers怎么设置
Postman请求头Headers怎么设置

围绕Postman HTTP请求头配置展开,讲解Headers选项的具体使用方式,包括Key和Value参数填写、请求头信息添加、常见Header字段设置及请求头修改方法,帮助用户解决接口调试过程中遇到的请求头配置问题。

20

2026.11.06

Postman接口请求发送教程
Postman接口请求发送教程

详细介绍Postman接口请求的创建与发送方法,涵盖GET和POST请求、URL配置、请求参数、Headers请求头、Body请求体设置以及响应结果查看,帮助用户掌握Postman接口请求的完整操作流程。

40

2026.11.06

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
WebStorm 官方调试文档
WebStorm 官方调试文档

共0课时 | 0人学习

React 教程
React 教程

共58课时 | 12.5万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 6.8万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn