事件循环是JavaScript实现异步的底层机制,通过分同步代码、微任务、宏任务三阶段调度,确保单线程不阻塞;执行顺序为同步→全部微任务→一个宏任务→渲染→重复。

事件循环是 JavaScript 实现异步行为的底层调度机制,它让单线程的 JS 能“看起来”同时处理多个任务,而不会卡住页面或阻塞用户操作。
为什么必须有事件循环
JavaScript 是单线程语言,主线程既要跑代码,又要渲染页面、响应点击——所有这些都挤在同一个线程里。如果没有事件循环,遇到一个 2 秒的网络请求,整个页面就会冻结 2 秒,按钮点不了、滚动卡死、动画停摆。
事件循环解决了这个问题:它把耗时操作(比如定时器、请求、用户点击)交给浏览器或 Node.js 的其他模块去后台处理,JS 主线程只管执行当前代码,等空下来再统一查收“谁干完了”,然后按规则执行回调。
事件循环怎么一步步工作
整个过程可以简化为四步循环:
立即学习“Java免费学习笔记(深入)”;
先执行调用栈里的所有同步代码(比如 console.log、函数调用、for 循环) 遇到异步操作(如 setTimeout、fetch、Promise),不等结果,立刻交给 Web API 或系统模块去处理 当异步操作完成,对应回调被放进任务队列——但不是立刻执行,要分两类:微任务(如 Promise.then、MutationObserver)和宏任务(如 setTimeout、setInterval、I/O、UI 渲染) 同步代码一结束,事件循环就先清空全部微任务队列,再取一个宏任务执行,然后重复这个流程
宏任务和微任务的执行顺序很关键
这是最容易出错的地方。看这个典型例子:
console.log(‘1’);
setTimeout(() => console.log(‘2’), 0);
Promise.resolve().then(() => console.log(‘3’));
console.log(‘4’);
输出是:1 → 4 → 3 → 2。原因不是“谁设的延时短谁先执行”,而是:
– ‘1’ 和 ‘4’ 是同步代码,立刻执行;
– setTimeout 回调进宏任务队列;
– Promise.then 进微任务队列;
– 同步执行完,事件循环马上执行所有微任务(只有 ‘3’),再取下一个宏任务(’2’)。
浏览器环境里还有个隐藏环节:渲染
在微任务全部执行完、下一个宏任务开始前,浏览器会检查是否需要更新 UI(比如样式变化、动画帧)。这意味着:如果你在 Promise.then 里改了 DOM,用户能立刻看到;但如果在 setTimeout 里改,就要等下一轮事件循环,可能多延迟几毫秒甚至一帧(16ms)。
基本上就这些。不复杂,但容易忽略微任务的“插队权”和渲染时机的影响。
以上就是什么是事件循环_javascript的异步机制如何运作?的详细内容,更多请关注创想鸟其它相关文章!
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1541783.html
微信扫一扫
支付宝扫一扫