面试必会js事件循环机制（ JavaScript事件循环机制详解与面试输出题分析）

最新推荐文章于 2025-09-26 06:30:00 发布
原创 最新推荐文章于 2025-09-26 06:30:00 发布 · 1k 阅读 · 14 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
GEO检测

JavaScript事件循环机制详解与面试题分析

写在前面

一面挂*n，好几次输出题死在此类题目上，每次都以为学会了每次都错出新花样，终于是觉得自己不会再错了，于是想写一篇来谈谈这块内容（并且给出一些面试题，自测是否熟练掌握这个知识点，不要像我一样再死在这知识点了）

概念

JavaScript 是单线程语言，通过 事件循环（Event Loop） 协调异步任务的执行，其核心机制如下：

1. 任务分类

  • 同步任务：直接在执行栈中同步执行。
  • 异步任务：
    • 宏任务：如 setTimeout、setInterval、I/O（Node.js）、UI 渲染（浏览器）等，存于宏任务队列（分阶段或类型排队）。
    • 微任务：如 Promise.then、MutationObserver、process.nextTick（Node.js）等，存于微任务队列（全局唯一队列）。

提示：重点关注是promise.then！！！然后和setTimeout比较常考
任务分类

2. 执行流程

  • 先执行同步任务，同步任务执行完毕后，进入事件循环。
  • 每轮事件循环：
    1. 清空微任务队列中所有微任务（按添加顺序，直至队列为空）。
    2. 从宏任务队列中取出队头宏任务执行。
  • 重复上述步骤，直至所有队列清空。执行流程

好用的技巧

在做输出题时，列三行，给宏任务，微任务留够足够大的空间~

  • 输出栈
  • 宏任务
  • 微任务

用法：模拟出入队列！！！一定要写在纸上，心算易出错

示例代码分析

下列是一个看起来很复杂的多层嵌套代码块：

console.log('【同步】start');

// 第一层：同步任务中注册宏任务和微任务
setTimeout(() => { // 宏任务1（定时器队列，第1个宏任务）
  console.log('\n【宏任务1开始】');

  // 宏任务1中注册微任务1
  Promise.resolve().then(() => {
    console.log('【微任务1-1】在宏任务1中注册');
    
    // 微任务1-1中注册微任务1-2
    Promise.resolve().then(() => {
      console.log('【微任务1-2】在微任务1-1中注册');
      
      // 微任务1-2中注册宏任务3
      setTimeout(() => { // 宏任务3（定时器队列，第3个宏任务）
        console.log('\n【宏任务3开始】');
        
        // 宏任务3中注册微任务3-1
        Promise.resolve().then(() => {
          console.log('【微任务3-1】在宏任务3中注册');
        });
        
        // 宏任务3中注册宏任务4
        setTimeout(() => { // 宏任务4（定时器队列，第4个宏任务）
          console.log('\n【宏任务4开始】');
        }, 0);
      }, 0);
    });

    // 微任务1-1中注册宏任务2
    setTimeout(() => { // 宏任务2（定时器队列，第2个宏任务）
      console.log('\n【宏任务2开始】');
      
      // 宏任务2中注册微任务2-1
      Promise.resolve().then(() => {
        console.log('【微任务2-1】在宏任务2中注册');
      });
    }, 0);
  });

  // 宏任务1中注册同步任务（模拟耗时操作）
  for (let i = 0; i < 1000000; i++) { /* 模拟耗时同步操作 */ }
  console.log('【宏任务1同步部分】执行完毕');

}, 0);

// 同步任务中注册微任务0
Promise.resolve().then(() => { // 微任务0（第1个微任务）
  console.log('\n【微任务0开始】');
  
  // 微任务0中注册微任务0-1
  Promise.resolve().then(() => {
    console.log('【微任务0-1】在微任务0中注册');
    
    // 微任务0-1中注册微任务0-2（嵌套三层微任务）
    Promise.resolve().then(() => {
      console.log('【微任务0-1-2】在微任务0-1中注册');
    });
  });

  // 微任务0中注册宏任务5（定时器队列，第5个宏任务）
  setTimeout(() => { // 宏任务5
    console.log('\n【宏任务5开始】');
  }, 0);
});

console.log('【同步】end'); // 同步任务结束

纸上分析（推荐代码在vscode打开，可以折叠看清楚层次）：

在这里插入图片描述

  1. 执行同步代码！！！第1行，第68行为同步代码；4-46行为宏任务，49-66为微任务。
  • 输出栈：【同步】start，【同步】end
  • 宏任务：4-46行代码
  • 微任务：49-66行代码
  1. 进入第一个事件循环，清空微任务队列，则运行49-66行（我这里折叠看得清楚层次）此时这里同步代码为第50行，53-60放入微任务队列，63-65放入宏任务队列在这里插入图片描述
  • 输出栈：【同步】start，【同步】end，【微任务0开始】
  • 宏任务：4-46行代码；63-65行代码
  • 微任务：53-60行

此时微任务队列并没有清空，所以继续执行微任务队列代码53-60行，53-60行里54为同步代码立即执行，57-59为微任务放入微任务队列
在这里插入图片描述

  • 输出栈：【同步】start，【同步】end，【微任务0开始】，【微任务0-1】在微任务0中注册
  • 宏任务：4-46行代码；63-65行代码
  • 微任务：57-59行

此时微任务队列并没有清空，所以继续执行微任务队列代码57-59行，57-59行里58为同步代码立即执行
在这里插入图片描述

  • 输出栈：【同步】start，【同步】end，【微任务0开始】，【微任务0-1】在微任务0中注册，【微任务0-1-2】在微任务0-1中注册
  • 宏任务：4-46行代码；63-65行代码
  • 微任务：

此时微任务队列清空，宏任务队列没有清空，取出宏任务队头执行，则执行4-46行代码。此时可见第5行和第44行为同步代码，8-40行为微任务放入微任务队列
在这里插入图片描述

  • 输出栈：【同步】start，【同步】end，【微任务0开始】，【微任务0-1】在微任务0中注册，【微任务0-1-2】在微任务0-1中注册，【宏任务1开始】，【宏任务1同步部分】执行完毕
  • 宏任务：63-65行代码
  • 微任务：8-40行代码
  1. 进入下一个事件循环：微任务队列和宏任务并没有清空，所以需要清空微任务队列代码8-40行。8-40行内第9行为同步代码，12-29是微任务放入微任务队列，32-39为宏任务放入宏任务队列
    在这里插入图片描述
  • 输出栈：【同步】start，【同步】end，【微任务0开始】，【微任务0-1】在微任务0中注册，【微任务0-1-2】在微任务0-1中注册，【宏任务1开始】，【宏任务1同步部分】执行完毕，【微任务1-1】在宏任务1中注册
  • 宏任务：63-65行代码；32-39行代码
  • 微任务：12-29行代码

此时微任务队列并没有清空，所以继续执行微任务队列代码12-29行，12-29行里13为同步代码立即执行，16-28为宏任务放入宏任务队列
在这里插入图片描述

  • 输出栈：【同步】start，【同步】end，【微任务0开始】，【微任务0-1】在微任务0中注册，【微任务0-1-2】在微任务0-1中注册，【宏任务1开始】，【宏任务1同步部分】执行完毕，【微任务1-1】在宏任务1中注册，【微任务1-2】在微任务1-1中注册
  • 宏任务：63-65行代码；32-39行代码；16-28行代码
  • 微任务：

此时微任务队列清空，宏任务队列没有清空，取出宏任务队头执行，则执行63-65行代码。此时可见第64行为同步代码直接输出
在这里插入图片描述

  • 输出栈：【同步】start，【同步】end，【微任务0开始】，【微任务0-1】在微任务0中注册，【微任务0-1-2】在微任务0-1中注册，【宏任务1开始】，【宏任务1同步部分】执行完毕，【微任务1-1】在宏任务1中注册，【微任务1-2】在微任务1-1中注册，【宏任务5开始】
  • 宏任务：32-39行代码；16-28行代码
  • 微任务：
  1. 进入下一个事件循环：微任务队列和宏任务并没有清空，微任务队列被清空了，所以取出宏任务队列队头32-39行执行。第33行为同步代码直接输出，第36-38为微任务放入微任务队列
    在这里插入图片描述
  • 输出栈：【同步】start，【同步】end，【微任务0开始】，【微任务0-1】在微任务0中注册，【微任务0-1-2】在微任务0-1中注册，【宏任务1开始】，【宏任务1同步部分】执行完毕，【微任务1-1】在宏任务1中注册，【微任务1-2】在微任务1-1中注册，【宏任务5开始】，【宏任务2开始】
  • 宏任务：16-28行代码
  • 微任务：36-38行
  1. 进入下一个事件循环：微任务队列和宏任务并没有清空，所以需要清空微任务队列代码36-38行。37行为同步代码直接执行
    在这里插入图片描述
  • 输出栈：【同步】start，【同步】end，【微任务0开始】，【微任务0-1】在微任务0中注册，【微任务0-1-2】在微任务0-1中注册，【宏任务1开始】，【宏任务1同步部分】执行完毕，【微任务1-1】在宏任务1中注册，【微任务1-2】在微任务1-1中注册，【宏任务5开始】，【宏任务2开始】，【微任务2-1】在宏任务2中注册
  • 宏任务：16-28行代码
  • 微任务：

此时微任务队列清空，宏任务队列没有清空，取出宏任务队头执行，则执行16-28行代码。此时可见第17行为同步代码直接输出，第20-22为微任务放入微任务队列，第25-27为宏任务放入宏任务队列
在这里插入图片描述

  • 输出栈：【同步】start，【同步】end，【微任务0开始】，【微任务0-1】在微任务0中注册，【微任务0-1-2】在微任务0-1中注册，【宏任务1开始】，【宏任务1同步部分】执行完毕，【微任务1-1】在宏任务1中注册，【微任务1-2】在微任务1-1中注册，【宏任务5开始】，【宏任务2开始】，【微任务2-1】在宏任务2中注册，【宏任务3开始】
  • 宏任务：25-27行代码
  • 微任务：20-22行代码
  1. 进入下一个事件循环：微任务队列和宏任务并没有清空，所以需要清空微任务队列代码20-22行。21行为同步代码直接执行
  • 输出栈：【同步】start，【同步】end，【微任务0开始】，【微任务0-1】在微任务0中注册，【微任务0-1-2】在微任务0-1中注册，【宏任务1开始】，【宏任务1同步部分】执行完毕，【微任务1-1】在宏任务1中注册，【微任务1-2】在微任务1-1中注册，【宏任务5开始】，【宏任务2开始】，【微任务2-1】在宏任务2中注册，【宏任务3开始】，【微任务3-1】在宏任务3中注册
  • 宏任务：25-27行代码
  • 微任务：

此时微任务队列清空，宏任务队列没有清空，取出宏任务队头执行，则执行25-27行代码。此时可见第26行为同步代码直接输出。
在这里插入图片描述

  • 输出栈：【同步】start，【同步】end，【微任务0开始】，【微任务0-1】在微任务0中注册，【微任务0-1-2】在微任务0-1中注册，【宏任务1开始】，【宏任务1同步部分】执行完毕，【微任务1-1】在宏任务1中注册，【微任务1-2】在微任务1-1中注册，【宏任务5开始】，【宏任务2开始】，【微任务2-1】在宏任务2中注册，【宏任务3开始】，【微任务3-1】在宏任务3中注册，【宏任务4开始】
  • 宏任务：
  • 微任务：
  1. 宏任务队列和微任务队列为空，执行完毕！
    在这里插入图片描述

最终输出结果：

【同步】start
【同步】end

【微任务0开始】
【微任务0-1】在微任务0中注册
【微任务0-1-2】在微任务0-1中注册

【宏任务1开始】
【宏任务1同步部分】执行完毕
【微任务1-1】在宏任务1中注册
【微任务1-2】在微任务1-1中注册

【宏任务5开始】

【宏任务2开始】
【微任务2-1】在宏任务2中注册

【宏任务3开始】
【微任务3-1】在宏任务3中注册

【宏任务4开始】

面试真题解析

美团一面4.08

let first = new Promise((resolve, reject) => {
    console.log("1");
    let p = new Promise((resolve, reject) => {
        console.log("6");
        setTimeout(() => {
            console.log("5");
            resolve(1);
        }, 0);
        resolve(3);
    });
    resolve(2);
    p.then((val) => {
        console.log(val);
    });
});
first.then((val) => {
    console.log(val);
});
console.log('4');

答案：1，6，4，3，2，5

解析：

  1. 同步代码！！！注意 new一个promise只要不执行then都是同步代码！！！同步代码第2行、第4行、第9行、第11行、第19行执行，则输出1，6，4；p状态变为fulfilled值为第9行放入的3，first状态变为fulfilled值为第11行放入的2，但不输出，等回调函数then执行才输出。
  • 输出栈：1，6，4
  • 宏任务：5-8行
  • 微任务：12-14行；16-18行
  1. 第一次循环：
    清空微任务，执行12-14行；16-18行，依次输出p、first的fulfilled的值3，2
  • 输出栈：1，6，4，3，2
  • 宏任务：5-8行
  • 微任务：

宏任务执行，此时因为p已经fulfilled所以第7行无效不输出（可以看promise定义，一旦改变状态不会再变化），输出第6行的代码。

  • 输出栈：1，6，4，3，2，5
  • 宏任务：
  • 微任务：
  1. 最终输出：1，6，4，3，2，5

滴滴一面

function log1() {
    setTimeout(() => {
        console.log(1)
    }, 0)
}
function log2() {
    console.log(2)
}
function log3() {
    console.log(4)
    return new Promise((reslove) => {
        console.log(5)
        reslove(6)
    })
}
log1()
log2()
log3().then(res => { console.log(res) })

答案：2，4，5，6，1

解析：log1(),log2(),log2()同步代码，其他同上流程自己列列~

腾讯云智一面5.14

new Promise(resolve => {
    console.log(1);
    resolve(2);
    setTimeout(() => {
      Promise.resolve().then(() => console.log(7))
      console.log(3);
    }, 0)
    Promise.resolve().then(() => console.log(4))
  }).then(num => {
    console.log(num)
  });

  setTimeout(() => {
    console.log(5)
  }, 0)

  console.log(6);

答案：1，6，4，2，3，7，5

标签
#面试 #javascript #前端
【前端面试题】事件循环event_loop
二琳爱吃肉的博客
11-16 2731
JavaScript是一个单线程语言。 任务分为同步任务和异步任务。 同步任务就是立即执行的任务，同步任务会进入主线程立即执行，当浏览器遇到异步任务时，会将异步任务扔到异步队列中去，等同步任务执行完毕后，再按照“微先宏后”的执行顺序依次执行异步任务。 “微先宏后”就是在异步任务队列中微任务先执行，宏任务后执行。 微任务包括：promise 宏任务包括：setTimeout、setInterval、UI交互、IO、script整体代码 下面来看面试题，先看题目，思考后有自己的想法再看题目结果，有不
新生代总结 JavaScript 运行机制解析
小丞同学
08-22 3807
新生代总结 JavaScript 运行机制解析 大家好，我是小丞同学，一名准大二的前端爱好者 这篇文章将带你一起学习理解 JavaScript 运行机制 愿你忠于自己，热爱生活 引言 在一些面试中，我们或许会被问到这样的问题 简述一下 JavaScript 的运行机制？ 你还有可能会被问这样简单的代码 setTimeout(function () { console.log('定时器开始啦') }); new Promise(function (r
面试题 - 事件循环机制
bug处理进行时
08-05 5063
一、浏览器JS异步执行的原理 一般常说js是一门单线程语言，那为什么可以异步执行且不发生阻塞呢？ 常说的JS是单线程语言，是因为执行JS的引擎是单线程的，而浏览器本身是多线程的 浏览器主要含有： js 执行线程 定时器线程 http 请求线程 事件触发线程 GUI 线程等 异步请求的真正执行者是浏览器的其他线程 js 引擎只是执行了异步操作成功了之后的回调函数 二、事件循环机制 1 - 执行栈和任务队列 （1）执行栈是什么 用于按执行顺序存放同步代码 按序执行，执行完毕后弹出执行栈 如果在执
面试率 90% 的JS事件循环Event Loop，看这篇就够了！! !
热门推荐
道阻且长，行则将至。
08-28 2万+
面试率 90% 的JS事件循环Event Loop，看这篇就够了！! ! 事件循环（Event Loop）大家应该并不陌生，它是前端极其重要的基础知识。在平时的讨论或者面试中也是一个非常高频的话题。 理解 JavaScript 的事件循环往往伴随着宏任务和微任务、JavaScript 单线程执行过程及浏览器异步机制等相关问题，而浏览器和 NodeJS 中的事件循环实现也是有很大差别。熟悉事件循环，了解浏览器运行机制将对我们理解 JavaScript 的执行过程和排查运行问题有很大帮助。 一、浏览器 JS
js事件循环
yy869949908的博客
09-20 1164
javascript 是单线程脚本语言，那么为什么不像 java 一样变成多线程，它不香吗？让我们来看一个问题，如果 js 是多线程，那么来看看执行下面这段代码-- 浏览器解析 h1标签的时候，渲染为红色 --> < script > document . querySelector("h1") . style . css . color = "green";// 上面这条js代码也找到h1标签，渲染为绿色 stylecolorred;
JavaScript 执行机制与事件循环详解（面试必备）
aji_02141204的博客
08-20 826
本文系统讲解了JavaScript事件循环机制，包括单线程模型、任务分类（宏任务与微任务）、执行顺序规则等核心概念。重点解析了async/await的本质及其执行逻辑，并通过典型面试题演示了事件循环的实际应用。核心要点可概括为：宏任务执行后总会清空当前所有微任务，再进入下一轮事件循环。
如何跟面试官解释事件循环
frontend_frank的博客
04-06 5777
关于事件循环的问题面试官都尤其的偏爱，所以说准备面试如果不搞懂事件循环是非常危险的。当面试官问你了解浏览器事件循环吗？这只是一个开始，接下来：为什么js在浏览器中有事件循环机制事件循环有哪...
面试题：说说事件循环机制(满分答案来了)
LuckyWinty的博客
03-09 1万+
答题大纲先说基本知识点，宏任务、微任务有哪些说事件循环机制过程，边说边画图出来说async/await执行顺序注意，可以把 chrome 的优化，做法其实是违反了规范的，V8 团队的PR...
JavaScript 事件循环(Event Loop)机制详解
qq_44919431的博客
06-25 1796
JavaScript通过事件循环机制实现单线程下的异步执行。核心执行顺序为：同步代码 > 微任务(Promise等) > 宏任务(setTimeout等)。每个宏任务执行后都会检查并清空微任务队列。async/await本质是Promise语法糖，await后的代码会作为微任务。Node.js的事件循环更复杂，包含6个阶段。
面试题之一文搞定JS的事件循环机制
zhtgg的博客
07-13 2314
面试又被问到了js事件循环机制，这不狠狠总结一波。事件循环机制是一个非常重要的概念，不仅仅是面试，在笔试以及平时开发过程所遇到的一些问题，都可以通过事件循环机制来理解问题的本质再来解决。
js事件循环机制及面试题详解
JessicaLi的博客
11-23 5395
学习js必不可少的知识点插入
前端开发：JS的事件循环执行机制详解
全沾软贱开发攻城狮
04-30 1万+
在前端开发中，涉及到JS原生的使用原理是非常重要的知识点，尤其是在实际工作过程中会遇到各种复杂的业务需求场景，以及具体开发中可能会遇到一些涉及基于JS原理的使用，这都要求开发者能够很好的了解和掌握JS原生的常用原理。JS执行是单线程的，它是基于事件循环的，那么本篇博文就来分享一下关于JS的事件循环执行机制，该内容不仅在日常前端开发中是比较重要核心的知识点，而且在前端求职面试时候面试官必考的知识点，尤其是关于异步执行代码时候的事件循环，总结记录一下，方便后期查阅使用。
事件循环底层原理：JavaScript 异步执行的核心机制
最新发布
你若盛开，清风自来
09-26 1467
JavaScript 事件循环机制是实现异步编程的核心，通过调用栈、任务队列等组件协调同步与异步任务执行。其运行机制为：先执行同步代码，异步任务交由 Web/Node API 处理，完成后回调函数进入相应队列；事件循环优先执行微任务队列（如 Promise.then），再处理宏任务队列（如 setTimeout）。不同环境存在差异：浏览器事件循环含 UI 渲染阶段，Node.js 则采用多阶段循环模型。深入理解该机制有助于优化异步代码性能，避免执行顺序错误。
JavaScript 事件循环详解
qq_46032105的博客
09-10 1062
本文深入解析了JavaScript的事件循环机制，通过调用栈、任务队列和微任务队列的协同工作，解释了单线程JS如何实现异步处理。文章详细剖析了事件循环的工作流程，通过代码示例对比了微任务与宏任务的执行优先级和时机，并分析了浏览器与Node.js环境的差异。最后提供了避免UI阻塞和控制执行顺序的实用技巧，帮助开发者更好地理解和应用这一核心机制。
谈谈js中的事件循环机制
2301_79459824的博客
01-12 1907
谈谈js中的事件循环机制本篇文章来讲解js中的事件循环机制
JavaScript 线程机制与事件循环机制
好好学习天天向上
03-08 1136
是进程内的一个独立执行单元，一个进程中可以有多个线程，多个线程共享进程的数据。进程中的任意一线程执行出错，都会导致整个进程的崩溃。启动一个程序时，操作系统会为该程序创建一块内存，用来存放代码、运行中的数据和一个执行任务的主线程，我们把这个运行环境叫进程。ring3仅能使用常规CPU指令集，不能使用操作硬件资源的CPU指令集，比如IO读写等。JS是单线程运行的,但使用H5中的WebWorkers可以多线程运行。ring0可以使用所有CPU指令集，ring0被叫做内核态，完全在。.........
【JS】javascript事件循环机制：你以为的异步王者，其实是面试刺客
JavaDog程序狗
05-14 1049
本文深入解析JavaScript事件循环机制，强调其核心为调用栈、任务队列与事件循环的协同工作。文章对比微任务（如Promise）与宏任务（如setTimeout）的优先级，指出微任务总先于宏任务执行。
深入理解Javascript中的event loop（事件循环）机制
前端探险家的博客
11-05 6672
深入理解事件循环机制面试题JavaScript是单线程同步任务和异步任务event loop（事件循环）宏任务和微任务检测练习 面试题 我们面试的时候，可能有的面试官问我们：“可以介绍一下JavaScript事件循环机制吗？”或者“对微任务和宏任务有了解吗？” 再或者人家也懒得问我们，直接把下面这道面试题甩给我们，让我们写出它最后的执行结果； console.log('1') setTimeout(function callback(){ console.log('2') }, 1000) new P
深入解析JavaScript事件循环机制：面试重点
weixin_36487018的博客
04-30 1088
执行栈（Execution Context Stack）是JavaScript中用于存储函数调用的栈结构。它的主要作用是管理函数调用在执行过程中的顺序，确保代码的执行按照JavaScript引擎规定的顺序进行。执行栈的顶层是当前正在执行的上下文，当执行栈中的函数执行完毕后，该函数对应的上下文将从栈中弹出，同时引擎会继续执行下一个执行栈中的函数。每个执行栈中的元素通常包含以下几个部分：变量对象（VO）：存储函数的参数、局部变量、声明的函数等。作用域链（Scope Chain）
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值