面试题2、讲一讲JS运行机制、微任务、宏任务、事件循环

1、JS代码从上往下执行,所有同步任务都会在主线程中执行,形成一个执行栈

2、主线程之外,还有一个任务队列,当发现一个异步任务,就塞一个事件(回调函数)到任务队列中等待;

3、一旦执行栈中所有同步代码执行完毕,系统就会读取任务队列,看看里面有哪些事件(回调函数)。于是结束等待状态,进入执行栈,开始执行。

4、主线程不断重复第三步,形成事件循环

===============================================================================

学习背景:事件循环 是 JavaScript 管理异步任务的核心机制,它遵循 "宏任务 → 清空所有微任务 → 渲染(如有需要)→ 下一轮宏任务" 的循环顺序执行,从而保证了代码的有序性和渲染的高效性。

js中,解释下宏任务与微任务,我没区分开这两个东西

**注意:微任务与宏任务都是异步任务**

终极一句话总结(面试满分)
1、同步优先,微任务插队,宏任务最后;
2、必须清空所有微任务,才会执行宏任务。
JS 执行顺序:同步先跑 → 微任务全清空 → 才跑下一个宏任务。

1. 什么是微任务(microtask)

可以理解成:JS 引擎自身的 "小任务",优先级更高。

常见微任务:

  1. Promise.then / catch / finally
  2. async/await(本质就是 Promise)
  3. queueMicrotask()
  4. MutationObserver

特点:会一次性全部执行完;只要有微任务,必须清空队列,才允许执行下一个宏任务;

2. 什么是宏任务(macrotask)

可以理解成:来自浏览器 / 宿主环境的 "大任务"。

==常见宏任务:

  1. setTimeout
  2. setInterval
  3. I/O 操作(ajax、fetch)
  4. UI 渲染
  5. requestAnimationFrame
  6. 事件队列(click、load 等)

特点:每次只执行一个;执行完必须等微任务全部清空,才会执行下一个宏任务。

3. 最关键的执行顺序(必考)

先执行 同步代码(立刻跑)

执行当前所有 微任务(全部清空)

然后 才执行下一个宏任务(一个)

再清空微任务 → 再下一个宏任务... 循环

4. 超级经典示例(一看就懂)

js 复制代码
console.log('1 同步')

setTimeout(() => {
  console.log('2 宏任务')
}, 0)

Promise.resolve().then(() => {
  console.log('3 微任务')
})

console.log('4 同步')

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

  • 1、4 是同步 → 最先执行
  • 3 是微任务 → 同步完立刻执行
  • 2 是宏任务 → 最后执行

5. 最容易搞混的点(我帮你点破)

await 后面的代码 = 微任务

setTimeout 永远比 Promise.then 慢

微任务可以插队宏任务!

微任务没清空,绝对不会执行下一个宏任务

相关推荐
神探小白牙3 小时前
eCharts 多系列柱状图增加背景图
javascript·ecmascript·echarts
薛定猫AI10 小时前
【深度解析】Gemma Chat 本地 AI 编程 Agent:Electron + MLX + 开源模型的离线 Vibe Coding 实战
javascript·人工智能·electron
全栈前端老曹10 小时前
【前端地图】多地图平台适配方案——高德、百度、腾讯、Google Maps SDK 差异对比、封装统一地图接口
前端·javascript·百度·dubbo·wgs84·gcj-02·bd09
笑虾10 小时前
Win10 修改注册表 让鼠标悬停PNG上时 tip 始终显示分辨率
开发语言·javascript·ecmascript
雾岛听风69110 小时前
JavaScript基础语法速查手册
开发语言·前端·javascript
用户23678298016811 小时前
从零实现 GIF 制作工具:LZW 压缩与 Median Cut 色彩量化
前端·javascript
棉猴11 小时前
Python海龟绘图之绘制文本
javascript·python·html·write·turtle·海龟绘图·输出文本
Highcharts.js11 小时前
线形比赛积分增长或竞赛图|Highcharts企业图表代码示列
开发语言·前端·javascript·折线图·highcharts·竞赛图
让学习成为一种生活方式12 小时前
大肠杆菌合成扑热息痛--对乙酰氨基酚--文献精读227
开发语言·前端·javascript
多秋浮沉度华年12 小时前
electron 初始使用记录
javascript·arcgis·electron