揭开 JavaScript 事件循环的神秘面纱

Q shen

已于 2023-06-15 22:02:32 修改

阅读量103

点赞数

分类专栏： JavaScript 教程集合文章标签： javascript 开发语言 ecmascript

于 2023-06-15 21:57:51 首次发布

本文链接：https://blog.youkuaiyun.com/qq_52010446/article/details/131236601

版权

JavaScript 教程集合专栏收录该内容

406 篇文章 ¥299.90 ¥399.90

订阅专栏

超级会员免费看

本文介绍了JavaScript的事件循环如何实现单线程环境中的异步处理。事件循环包括调用堆栈、Web API、任务队列和事件循环四个组件，确保在不阻塞主线程的情况下执行异步任务。通过实例解析了setTimeout和XMLHttpRequest的执行顺序，强调了即使时间设为0ms，也需要等待主线程空闲才能执行。掌握事件循环原理对编写高性能JavaScript代码至关重要。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Javascript 是一种单线程语言，这意味着它一次只能执行一个任务。但是，它仍然设法同时执行多项任务。它通过使用一些复杂的数据结构给人一种多线程的错觉。为实现这一点，Javascript 引擎有一个称为事件循环的重要组件。我们将了解什么是事件循环以及它如何在不阻塞主线程的情况下处理异步任务。

什么是事件循环？
事件循环是 Javascript 中的一种机制，可以执行非阻塞异步操作。它允许 Javascript 在不阻塞主线程的情况下处理诸如从服务器获取数据、发出 HTTP 请求和处理用户事件等任务。

根据MDN Doc，它是一个运行时模型，它执行代码，收集和处理事件，并执行排队的子任务。了解事件循环的工作原理对于编写高效和高性能的代码至关重要。

为了更好地理解事件循环，让我们列出用于执行异步代码的组件 -

1.调用堆栈：JavaScript 使用调用堆栈来跟踪当前正在执行的函数（执行上下文）。当一个函数被调用时，它被添加到堆栈中，当它返回时，它被从堆栈中删除。

2.Web API：Web API 由浏览器或 JavaScript 运行时环境提供，并提供 DOM 操作、计时器（setTimeout、setInterval）、XMLHttpRequest 等功能。这些 API 异步处理耗时任务。JavaScript 与 Web API 交互，例如 DOM API、XMLHttpReques