js的运行机制, 事件队列和循环

最新推荐文章于 2025-04-23 05:00:00 发布
原创 最新推荐文章于 2025-04-23 05:00:00 发布 · 356 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #前端 #开发语言

本文深入探讨JavaScript的单线程特性及EventLoop机制，解释为何JavaScript使用EventLoop来解决任务阻塞问题。同步任务和异步任务的概念被引入，以优化CPU计算资源的使用。异步任务通过任务队列进行调度，只有当主线程空闲时才会执行。回调函数和事件是异步处理的关键。同时，文章提及了Node.js环境下的EventLoop处理方式，并推荐了几篇相关资源以进一步学习。

一、阮一峰网站

JavaScript 运行机制详解：再谈Event Loop - 阮一峰的网络日志 (ruanyifeng.com)

行文思路：

1.为什么JS是单线程？

这句话我看到很多遍了“比如，假定JavaScript同时有两个线程，一个线程在某个DOM节点上添加内容，另一个线程删除了这个节点，这时浏览器应该以哪个线程为准？”，我其实一直有个问题，那其他多线程的语言是怎么解决这个问题的呢？也许是更加复杂了。

“为了利用多核CPU的计算能力，HTML5提出Web Worker标准，允许JavaScript脚本创建多个线程，但是子线程完全受主线程控制，且不得操作DOM。”

2.任务队列

异步任务和同步任务是怎么来的？

简单的说，就是为了充分释放CPU的计算能力，在IO设备读取数据很慢的时候，可以挂起处于等待中的任务，先运行排在后面的任务。而这个等待中的任务就是异步任务。

“于是，所有任务可以分成两种，一种是同步任务（synchronous），另一种是异步任务（asynchronous）。同步任务指的是，在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务；异步任务指的是，不进入主线程、而进入"任务队列"（task queue）的任务，只有"任务队列"通知主线程，某个异步任务可以执行了，该任务才会进入主线程执行。”

3.事件和回调函数

4.EventLoop

事件循环是为了解决因JS是单线程而造成的任务阻塞问题。

二 、方应杭知乎

Event Loop、计时器、nextTick - 知乎 (zhihu.com)

这篇偏向于Node.js。

三、知乎

JavaScript中的Event Loop（事件循环）机制 - 知乎 (zhihu.com)

下面的参考资料挺有意思的，总结得很全。

四、掘金

图解搞懂JavaScript引擎Event Loop - 掘金 (juejin.cn)

这篇图解的EVENT LOOP真是通俗易懂，看完后很清晰。但是最后的nextTick那里有些问题。

五、知乎文章

详解JavaScript中的Event Loop（事件循环）机制 - 知乎 (zhihu.com)

【前端面试】全网最全javascript Event Loop、任务队列解释
hhhh
08-15 1251
Axios 是一个基于 Promise 的 HTTP 客户端，用于执行异步的 HTTP 请求。它利用了 JavaScript 的异步编程特性，特别是 Promise，来处理请求和响应。Axios 的请求和响应处理遵循 JavaScript 的事件循环和宏任务/微任务队列，但它本身并不定义为宏任务。宏任务通常指的是浏览器或 Node.js 环境中的高级别异步操作，如定时器、网络请求等，而 Axios 作为这些操作的封装，其内部实现细节对用户来说是透明的。性能影响过度使用微任务（如大量Promise。
js 运行机制原理简述 事件循环简述
yzsk_的博客
02-11 1774
调用栈(call Stack)：存储执行上下文。任务队列(task queue)：用于存储待执行的异步任务(宏任务(macro Task)和微任务(micro Task))，先进先出的队列。宏任务(macro Task)：比如 setTimeout、setInterval、I/O操作等。微任务(micro Task)：比如Promise的.then或.catch 、MutationObserver(监视dom树API)。事件循环(event Loop)：持续监听执行栈和任务队列的状态。
JavaScript的运行机制、事件队列和循环
u012149906的博客
05-16 630
（1）JavaScript的执行机制 1、所有同步任务都在主线程上执行，形成一个执行栈（execution context stack）。 2、主线程之外，还存在一个"任务队列"（task queue）。只要异步任务有了运行结果，就在"任务队列"之中放置一个事件。 3、一旦"执行栈"中的所有同步任务执行完毕，系统就会读取"任务队列"，如果有有执行任务，则进入执行栈，开始执行。 4、主线程不断重复上...
JavaScript事件循环与任务队列
m0_72030584的博客
04-23 1070
JavaScript事件循环与任务队列
JS运行机制与事件循环（Event Loop）
真的以为的博客
04-10 350
js是单线程的，确保了操作dom时不会有其它线程冲突；H5允许创建多个线程，但是子线程完全受主线程控制，且不得操作dom。注定只能是单线程的。 js有同步任务与异步任务；在执行同步代码时如遇到异步事件，会将异步代码放到事件循环中，继续执行栈中的其它任务； 同步任务：在主线程上执行的任务，只有前一个任务执行完，才能执行后一个任务 异步任务：不进入主线程、而进入"任务队列"（task queue）的任务，只有"任务队列"通知主线程，异步任务可以执行了，该任务才会进入主线程执行 因为js是单线程，所以加入了事件循
JavaScript运行机制-浏览器的Event loop
dreamingbaobei的博客
12-17 375
JS的任务包括执行js代码、对用户的输入（如：鼠标点击、键盘输入）作出反应、处理异步的网络请求等等，按照执行方式可以分为分为同步任务和异步任务，现在我们清楚的知道浏览器的一个渲染进程只分配给js一个主线程（JS引擎线程），用来执行代码，这意味着所有的任务最终都要进入主线程通过调用栈来执行。 js同步任务 主线程上排队执行的任务（排队执行） js异步任务 异步任务起初不会进入主线程，而是被放到 任...
JavaScript运行机制之事件循环(Event Loop)详解
10-25
JavaScript的运行机制可以概括为Event Loop（事件循环）。主线程在执行栈为空时，从任务队列中读取事件，并执行相应的回调函数。事件循环的核心在于，它是一个无限循环的过程，主线程不断地检查执行栈是否为空，以及...
【JavaScript运行机制】基于事件循环的宏任务与微任务调度模型：Node.js与浏览器环境异步执行原理及可视化模拟系统设计
最新发布
11-14
适合人群：具备一定JavaScript基础，熟悉异步编程概念，对Event Loop机制感兴趣的研发人员，尤其是工作1-3年希望深入理解底层运行机制的前端或Node.js开发者。; 使用场景及目标：① 掌握Event Loop各阶段的执行流程...
关于事件循环和异步(WEB前端底层核心-JS的运行机制)
qq_61723274的博客
02-22 889
事件循环⼜叫做消息循环，是浏览器渲染主线程的工作方式。在 Chrome 的源码中，它开启⼀个不会结束的 for 循环，每次循环从消息 队列中取出第⼀个任务执行，而其他线程只需要在合适的时候将任务加入到队列末尾即可。过去把消息队列简单分为宏队列和微队列，这种说法目前已无法满足复杂的浏览器环境，取而代之的是⼀种更加灵活多变的处理方式。根据 W3C 官方的解释，每个任务有不同的类型，同类型的任务必须在同⼀ 个队列，不同的任务可以属于不同的队列。
JavaScript事件循环机制
LeonNo11的博客
03-11 889
这些概念对于理解 JavaScript 的异步执行至关重要！JavaScript 是。
js运行机制——单线程、任务队列以及事件循环（event loop）
情非得已小猿猿
12-25 423
1、面试案例 for(var i = 0; i < 5; i++) { setTimeout(function () { console.log(i); }); } console.log(abc); // ********打印结果****** abc 5 5 5 5 5 2、相关知识点 -- 单线程：js特点，同一个时间只能做一件事 -- 任务队列：前一...
JS 运行机制最全面的一次梳理
程序员成长指北
06-15 674
最近发现有不少介绍JS单线程运行机制的文章，但是发现很多都仅仅是介绍某一部分的知识，而且各个地方的说法还不统一，容易造成困惑。因此准备梳理这块知识点，结合已有的认知，基于网上的大量参考资料， 从浏览器多进程到JS单线程，将JS引擎的运行机制系统的梳理一遍。大厂技术高级前端Node进阶点击上方程序员成长指北，关注公众号回复1，加入高级Node交流群展现形式：由于是...
JavaScript 事件循环、任务队列
luoxingchen的专栏
03-29 240
经常有根据代码写出js执行结果的问题，往往考察的是对js在浏览器中执行机制的理解。如果了解不够深入，那么结果往往会谬以千里。 任务队列 宏任务（macrotask）和微任务(microtask) macrotask: script(整体代码), setTimeout, setInterval, setImmediate, I/O, UI rendering。 microtask：process.nextTick, Promise.then, Object.observe, Mutatio.
js的事件循环和任务队列
weixin_30369041的博客
03-28 152
js 异步、栈、事件循环、任务队列 在开发中经常遇到js的异步问题，为了方便理解，记录下来，随时回顾。 以下的所有代码都是在浏览器环境下运行 在浏览器中js的运行是依赖浏览器js引擎来解析的，并且是在一定的runtime（运行时）的环境被调用，被执行。由于js引擎是单线程的，所以在执行dom渲染，script引入的时候这些操作是同步的，js引擎会通过 Event Loop 的机制，按顺序把任务...
JS - 事件循环和任务队列
anleng6817的博客
06-18 282
栈、堆和队列 栈：函数调用形成栈 堆：对象的内容分配在堆中 队列：一个 JavaScript 运行时包含了一个待处理的消息队列。在事件循环期间依次处理队列中的消息 事件循环 之所以称之为事件循环，是因为它经常按照类似如下的方式来被实现： while (queue.waitForMessage()) { queue.processNextMessage(); } 如果当前没有...
JS事件循环Event Loop与任务队列
弟弟的博客
01-26 269
事件循环Event Loop JavaScript是单线程，异步，非阻塞的。 为了协调事件、用户交互、脚本、UI 渲染、网络请求，这就有了 Event Loop JS 会创建一个类似于 while (true) 的循环。 每次循环的过程就是查看是否有待处理事件，如果有则取出相关事件放入执行栈中由主线程执行。 待处理的事件会存储在一个任务队列中，也就是每次循环会查看任务队列中是否有需要执行的任务。 任务队列Event Queue Js 中，有两类任务队列：宏任务队列(macro tasks)和微任务队列(
js事件循环和事件队列
heiKeWangZi1368的博客
03-07 268
js是单线程，一次只能处理一个任务。但代码中有宏任务和微任务，它们会先执行js主栈，遇到微任务和宏任务先放到响应栈里，把主进程活干完了，再看看微任务有没有事件要处理，最后看看宏任务。有点向家里养小孩，先照顾好小孩，再看看大人吃了没有。每个函数中可能又包含了宏任务和微任务。一个函数要执行完整，把函数中主线程执行完，其中可能包含微任务和宏任务放到下一轮事件队列 详细视频地址：https://www.bilibili.com/video/BV1eJ41177Rg?p=1 ...
JavaScript运行机制浅探
林天问de博客
04-18 784
 从一个简单的问题谈起： alert(i); // ? var i = 1;输出结果是undefined, 这种现象被称成“预解析”：JavaScript引擎会优先解析var变量和function定义。在预解析完成后，才会执行代码。如果一个文档流中包含多个script代码段（用script标签分隔的js代码或引入的js文件），运行顺序是：step1.
事件循环与任务队列
YJGGZHK的博客
09-05 609
JavaScript 的事件循环模型与许多其他语言不同的一个非常有趣的特性是，它永不阻塞。事件循环是浏览器实现的一种机制，用于处理异步任务。在Chrome的源码中，它通过一个永不结束的循环来实现，每次循环都会从消息队列中取出并执行第一个任务。JavaScript的事件循环，也称为消息循环，是浏览器渲染主线程的工作方式。它通过一个循环，不断地从任务队列中取出任务并执行。这些因素共同作用，使得JavaScript中的计时器在某些情况下可能不够精确。微队列中的任务通常具有较高的优先级。
JavaScript事件循环机制与任务队列详解
标题“js-event-loop”明确指向了这一主题，而描述中提到的“使用‘节点 src / 01_task_queue.js’执行 js 文件”则进一步说明该知识点聚焦于 Node.js 环境下的事件循环机制，尤其是任务队列的运行方式。结合标签中...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值