JavaScript 运行机制 Event Loop 学习

已于 2022-02-11 17:33:45 修改
阅读量404 收藏
点赞数
分类专栏： 深入学习系列 文章标签： javascript
于 2022-02-10 15:21:20 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/springLilly/article/details/122857179
版权
本文介绍了JavaScript的单线程特性、任务队列、宏任务与微任务的区别，并通过实例详细解析了Event Loop的工作机制，阐述了一次事件循环的步骤，帮助理解JavaScript异步执行的本质。
摘要由CSDN通过智能技术生成

这个事件机制我看了好多的文章，有不少被指出有理解错误或问题，我一直对这个东西处于迷迷糊糊的状态，今天看到一道题，决定好好研究一下。本文只是我自己的的学习总结，不免有问题，希望看到问题的朋友批评指正。
工具：Loupe我们可以通过使用 Loupe(Loupe是一种可视化工具，可以帮助您了解JavaScript的调用堆栈/事件循环/回调队列如何相互影响)工具来了解上面代码的执行情况。

1. JavaScript是单线程
JavaScript的单线程，与它的用途有关。作为浏览器脚本语言，JavaScript的主要用途是与用户互动，以及操作DOM。这决定了它只能是单线程，否则会带来很复杂的同步问题。比如，假定JavaScript同时有两个线程，一个线程在某个DOM节点上添加内容，另一个线程删除了这个节点，这时浏览器应该以哪个线程为准？所以，为了避免复杂性，从一诞生，JavaScript就是单线程，这已经成了这门语言的核心特征，将来也不会改变。
2.任务队列
所有任务分为两种，一种同步任务，一种是异步任务，同步任务会在主线程排队执行，遇到异步事件不会等待它返回结果，而是将这个事件挂起，继续执行执行栈中的其他任务。当异步事件返回结果，将它放到事件队列中，被放入事件队列不会立刻执行

最低0.47元/天 解锁文章
小丽丽lilly
关注
专栏目录
详解JavaScript的运行机制：Event Loop（事件轮询机制）
RookieLink
01-02 1167
前言 有人称Event Loop为事件循环机制，而我更愿意将其解释为事件轮询机制，在之后的内容中你会感受到这一点的区别在哪里。说是事件轮询机制，我们也可以说是任务轮询机制，因为英文是Event Loop，所以我们在此文中将其翻译为事件轮询。 阅读本文之前，首先对JavaScript的单线程和异步要有一定的了解，对此不了解的可以先阅读一下我的另一篇博文《JavaScript的单线程和异步》。 在讲J...
JavaScript之彻底学会Event Loop
战场小包的博客
10-05 2315
前言 学习JavaScript执行机制能更好的理解JavaScript的代码执行顺序，进而更好的理解JavaScript的异步模式。 Event Loop即事件循环，是浏览器或Node解决单线程运行时不会阻塞的一种机制。(也可以理解为经常使用的异步) 在正式学习Event Loop之前，先提出几个问题： 什么是同步与异步？ JavaScript是一门单线程语言，那如何实现异步？ 同步任务和异步任务的执行顺序如何？ 异步任务是否存在优先级？ 同步与异步 计算机领域中的同步与异步和我们现实社会的同步和异
可视化的 js：动态图演示-事件循环 Event Loop
半夏_2021的博客
05-04 449
可视化的 js：动态图演示-事件循环 Event Loop
JavaScript可视化：事件循环
qq_36174666的博客
05-26 403
JavaScript是单线程(single-threaded): 同时只能做一个项目。通常这没什么大不了，但是想象一下，现在你正在运行一个需要30秒的任务。在任务期间，任何其它事情发生(JavaScript默认运行在浏览器的主线程上，因此整个UI是卡住的)之前都需要等待30秒。现在是2019年了，没有人想要一个慢的、响应迟钝的网页。 幸运的是，浏览器给我们一些JavaScript引擎它自己没有提供的特性：WeB API。它包括DOM API、setTimeout、HTTP请求等内容。这能帮助我们创建一些异步
可视化 Javascript：事件循环
zsxjtip的博客
04-18 326
作者 | Lydia Hallie 来源 | dev.to，https://dev.to/lydiahallie/javascript-visualized-event-loop-3dif 事件循环是每个 Javascript 开发人员都必须面对的，起初理解起来会有些混乱。我是一个视觉方向的工程师，所以我将尝试以 gif 图像来更直观地帮助你理解它。 首先，事件循环是什么，为什么我们需要关注...
通过可视化来学习JavaScript事件循环
web前端开发
08-17 96
英文 | https://dev.to/lydiahallie/javascript-visualized-event-loop-3dif翻译 | 杨小爱事件循环，是每个 JavaScript 开发人员都必须要掌握的知识，开始学的时候，理解起来可能有点混乱。但我是一个视觉学习者，所以我想我会尝试通过低分辨率 gif 以视觉方式来解释它，以便帮助你更好的学习和理解事件循环。首先，什么是事件循环，为什...
JavaScript运行机制之事件循环(Event Loop)详解
10-25
JavaScript的运行机制可以概括为Event Loop（事件循环）。主线程在执行栈为空时，从任务队列中读取事件，并执行相应的回调函数。事件循环的核心在于，它是一个无限循环的过程，主线程不断地检查执行栈是否为空，以及...
javascript事件循环event loop的简单模型解释与应用分析
10-15
在深入探讨JavaScript事件循环（Event Loop）的简单模型之前，我们需要理解JavaScript的运行机制。JavaScript是一种单线程语言，意味着它在同一时间只能执行一个任务。这在处理复杂的操作时可能会造成阻塞。然而，...
JS事件循环机制event loop宏任务微任务原理解析
10-14
JavaScript事件循环机制（Event Loop）是JavaScript异步执行的核心，它确保了代码的有序执行，尤其是在处理复杂的异步操作时。JavaScript引擎遵循ECMAScript规范，设计为单线程执行，这意味着同一时间只能执行一条...
javascript毫秒计时器_「翻译」JavaScript的可视化学习之一：事件循环
weixin_33478314的博客
01-06 144
只是忍他、让他、由他、避他、耐他、敬他、不要理他、再待几年，你且看他，等他空了，你再出来蹦跶蹦跶。 - 耗不死ta的Event Loop事件循环的概览图。请注意上面这张图，事件循环的那些事，将在这个图上缓缓展开。事件循环(Event Loop)，怎么说呢，每个Javascript开发者都必须要经过它的蹂躏。初次见面，你会觉得它令人迷惑难以理解。我是一个视觉型学习者，所以我尝试用视觉的方式来搞定它，...
惊艳！可视化的 js：动态图演示 - 事件循环 Event Loop
全栈修炼
06-03 2239
原文地址：https://dev.to/lydiahallie/javascript-visualized-event-loop-3dif原文作者：Lydia Hallie译者：夜尽天明...
javascript图解之Event Loop
MFWSCQ的博客
12-02 316
哦，事件循环。这是每个JavaScript开发人员都必须以某种方式学习和理解的概念，但是起初理解起来可能有些混乱。我是一个视觉学习者，所以我想我会尝试通过低分辨率gif的可视化方式来帮助您。 但是首先，事件循环是什么，我们为什么要关注它呢？ JavaScript是单线程的：一次只能运行一个任务。通常，这没什么大不了的，但是现在想象您正在运行一个耗时30秒的任务。是的。在此任务中，我们等待3...
彻底弄懂浏览器端的Event-Loop
weixin_34010949的博客
01-05 381
前言 写这篇文章的起因是在群里看到了各位再讨论这部分的内容，这一块自己也不太懂，一时手痒就写了这篇文章这一块很多初学者也是一知半懂，学到一半发现又麻烦又复杂，索性放弃了。 本来打算考完操作系统就写完的，结果又遇到了 CPU 课设...所以这篇文章断断续续写了很多天 Event Loop 简单点讲 event loop 就是对 JS 代码执行顺序的一个规定（任务调度算法） 先看看两幅图 JS ...
在？聊聊浏览器事件循环机制
06-20 1879
JS是单线程语言，在某个时间段只能执行一段代码。这种单线程模型的好处是不会出现多线程的竞态条件和死锁等问题：在多线程中，某个资源同时被其他线程调度时可能会出现执行顺序不确定导致错误，或者资源占用等待这一类的问题。因此JS无法同时处理多任务，为了处理这类任务，JavaScript运行时使用了一种叫事件循环机制的异步编程模型JS的事件循环机制是一种异步编程模型，其特点是异步非堵塞，它决定了JavaScript的异步执行顺序和运行机制。JS的事件循环机制由调用栈（Call Stack）、任务队列（Task Que
js休眠5秒_可视化的 JS：动态图演示 - 事件循环 Event Loop的过程
weixin_39648824的博客
12-03 655
通杀 Event Loop 面试题03-JS单线程, event loop彻底搞懂代码执行顺序 浏览器工作原理
weixin_42600182的博客
08-12 490
单线程的含义 浏览器是 multi-process，一个浏览器只有一个 Browser Process，负责管理 Tabs、协调其他 process 和 Renderer process 存至 memory 内的 Bitmap 绘制到页面上的（pixel）；在 Chrome中，一个 Tab 对应一个 Renderer Process，Renderer process 是 multi-thre...
JavaScript可视化运行工具推荐
niuglar的博客
12-08 2056
1.ES5可视化 地址：http://latentflip.com/loupe/ 这个是Philip Roberts在JS大会上讲Event Loop时做演示的网站（大佬自己开发的，React还是0.12版本）。 2.事件循环、执行栈和任务队列可视化 地址：https://www.jsv9000.app/ 这个宏任务、微任务，自带例子，也可以自己编辑，不过超过5s的例子就不行 3.JavaScript Visualizer 地址：https://tylermcginnis.com/javascript-vi
【JavaScript】LeetCode：707设计链表
最新发布
weixin_45980065的博客
09-14 688
【代码】【JavaScript】LeetCode：707设计链表。
深入理解JavaScript引擎运行机制
JavaScript引擎运行原理是理解JavaScript编程的关键所在。JavaScript引擎的主要任务是解析和执行JavaScript代码，而不同的浏览器使用不同的引擎，例如谷歌浏览器使用的V8引擎。引擎的工作流程可以分为以下几个步骤：...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值