【高频考点精讲】JavaScript事件循环机制：从宏任务微任务到渲染时机

JavaScript事件循环机制：从宏任务微任务到渲染时机

【初级】前端开发工程师面试100题（一）
【初级】前端开发工程师面试100题（二）
【初级】前端开发工程师的面试100题（速记版）

大家好，我是全栈老李。今天咱们来聊聊JavaScript的事件循环机制，这个知识点看似简单，但真正能说清楚的人还真不多。我见过不少工作3-5年的前端，面试时被问到事件循环还是一脸懵。别担心，看完这篇文章，保证你彻底搞懂！

浏览器里的"多线程"假象

JavaScript是单线程的，这意味着它一次只能做一件事。那为什么我们感觉浏览器能同时处理那么多任务呢？这就是事件循环的功劳。想象一下，你是个餐厅服务员（JS线程），虽然只有你一个人，但你能同时处理多桌客人：先给1号桌上菜，然后去2号桌点单，再回来给3号桌结账…这就是事件循环的基本思路。

浏览器内核其实有多个线程协作：

• JS引擎线程（主线程）
• 定时器线程
• 异步HTTP请求线程
• GUI渲染线程
• 事件触发线程

但记住，真正执行JS代码的只有一个线程！

事件循环的完整流程

来，咱们拆解下事件循环的具体步骤：

1. 执行全局Script同步代码：这些代码会创建执行上下文，压入调用栈
2. 清空微任务队列：包括Promise.then、MutationObserver等
3. 渲染页面（不一定每次循环都渲染）
4. 执行一个宏任务：包括setTimeout、setInterval、I/O、UI交互事件等
5. 重复2-4步骤

console.log('1. 同步代码开始'); // 同步代码立即执行setTimeout(() => {console.log('6. 宏任务 setTimeout');
}, 0);Promise.resolve().then