首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

js事件循环

之前有看过一些事件循环的博客,不过一阵子没看就发现自己忘光了,所以决定来自己写一个博客总结下!...首先,我们来解释下事件循环是个什么东西: 就我们所知,浏览器的js是单线程的,也就是说,在同一时刻,最多也只有一个代码段在执行,可是浏览器又能很好的处理异步请求,那么到底是为什么呢?...从上图我们可以看出,js主线程它是有一个执行栈的,所有的js代码都会在执行栈里运行。...microtask任务会在当前事件循环周期内执行,而新增的macrotask任务只能等到下一个事件循环才能执行了(一个事件循环只执行一个macrotask) 首先,我们先来看一段代码 console.log...原因:因为一开始js主线程中跑的任务就是macrotask任务,而根据事件循环的流程,一次事件循环只会执行一个macrotask任务,因此,执行完主线程的代码后,它就去从microtask队列里取队首任务来执行

18.8K41

JS 事件循环

,脚本执行,事件处理等 其包含的线程有:GUI 渲染线程(负责渲染页面,解析 HTML,CSS 构成 DOM 树)、JS 引擎线程、事件触发线程、定时器触发线程、http 请求线程等主要线程 关于执行中的线程...工作线程:也称幕后线程,这个线程可能存在于浏览器或js引擎内,主线程是分开的,处理文件读取、网络请求等异步事件。...上述过程的不断重复就是我们说的 Event Loop (事件循环)。...在事件循环中,每进行一次循环操作称为tick,通过阅读规范可知,每一次 tick 的任务处理模型是比较复杂的,其关键的步骤可以总结如下: 在此次 tick 中选择最先进入队列的任务( oldest task...最后的最后,记住,JavaScript 是一门单线程语言,异步操作都是放到事件循环队列里面,等待主执行栈来执行的,并没有专门的异步执行线程。

15.4K10
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    js执行栈事件循环简单理解

    事件循环 所以,事件循环其实就是js代码借助浏览器API向消息队列中丢入一些回调函数,等待执行栈放空自己的时候,把消息队列中的回调函数压入到执行栈中执行的这么一个机制。...紧接着runWhileLoopForNSeconds(3);被压入了执行栈中,是一个函数,由于js是单线程的,因此mian也好,runWhileLoopForNSeconds也好,都会在这个执行栈所在在执行上线文中孤独的执行着...3s,终于执行玩,然后看下main函数执行玩没,还没有,还有 console.log('C');没执行 所以,console.log('C');被压入了执行栈,然后秒执行了,此时main总算走空了,因此事件循环现在就看消息队列中有没有消息了...总结 所以,只有当执行栈中是空的时候,事件循环机制才有机会把消息队列中的任务丢出来执行,换句话说,只有执行栈中有内容在执行,事件循环就不可能给你从消息队列中取任务出来执行。

    1.6K30

    node.js 事件循环

    Node的线程会保持一个事件循环,当有任务完成时,他会触发相应的事件,通知事件监听函数执行。      事件驱动程序      node.js大量的使用事件,这也是和其他相同技术相比更快的原因。...当Node被启动时,初始他的变量,和声明方法,而后等待事件的发生。      在一个事件驱动应用程序内,一般会有一个主要的循环用于事件监听,当有一个事件被发现就会触发相应的回调函数。  ?   ...事件循环和回调(callback)特别像,他们的不同之处在于,回调函数(callback)只有在异步函数执行完后才被会被执行调用,而事件处理工作于观察者模式。...监听事件行为的函数就像观察者,当有一个事件被触发,它的监听函数就开始执行。通过内置的事件模块和EventEmitter类可以使用很多Node.js内置事件。...还有一篇讲事件循环的文章很不错,有时间 大家可以读一下: https://blog.risingstack.com/node-js-at-scale-understanding-node-js-event-loop

    3K60

    JS 事件循环 Node 篇

    JS 事件循环 Node 篇 之前介绍过浏览器中的事件循环,本文将详细介绍 Node 中的事件循环。...根据 Node.js 官方介绍,每次事件循环都包含了6个阶段,如下图所示 image-20220404145555012 「注意」:每个框被称为事件循环机制的一个阶段。...Node.js 浏览器的 Event Loop 差异 浏览器环境下,microtask的任务队列是每个macrotask执行完之后执行。...浏览器端 而在Node.js中,microtask会在事件循环的各个阶段之间执行,也就是一个阶段执行完毕,就会去执行microtask队列的任务。...总结 Node.js事件循环分为6个阶段 浏览器和Node 环境下,microtask任务队列的执行时机不同 Node.js中,microtask 在事件循环的各个阶段之间执行 浏览器端,microtask

    2.2K10

    Node.js 事件循环

    Node.js 基本上所有的事件机制都是用设计模式中观察者模式实现。...Node.js 单线程类似进入一个while(true)的事件循环,直到没有事件观察者退出,每个异步事件都生成一个事件观察者,如果有事件发生就调用该回调函数. ---- 事件驱动程序 Node.js 使用事件驱动模型...(这也称之为非阻塞式IO或者事件驱动IO) 在事件驱动模型中,会生成一个主循环来监听事件,当检测到事件时触发回调函数。 整个事件驱动的流程就是这么实现的,非常简洁。...有点类似于观察者模式,事件相当于一个主题(Subject),而所有注册到这个事件上的处理函数相当于观察者(Observer)。...Node.js 有多个内置的事件,我们可以通过引入 events 模块,并通过实例化 EventEmitter 类来绑定和监听事件,如下实例: // 引入 events 模块 var events =

    3.5K30

    JS串行和事件循环

    当中的事件循环这个东西了,还要了解一下 JS 当中的同步代码和异步代码。...程序运行会从上至下依次执行所有的同步代码在执行的过程中如果遇到异步代码会将异步代码放到事件循环中当所有同步代码都执行完毕后, JS 会不断检测事件循环中的异步代码是否满足条件一旦满足条件就执行满足条件的异步代码首先来看一个事件循环的这么一个东西吧...同步代码 alert("BNTang"); 如上的示例代码如果 alter 这一行同步代码没有执行完毕,那么事件循环当中的异步代码就不会被执行...JS 会去不断的去事件循环当中判断有没有满足条件的异步代码然后进行执行异步代码当中的内容。...JS 为什么是单线程的JavaScript 的单线程,与它的用途有关。作为浏览器脚本语言,JavaScript 的主要用途是用户互动,以及操作 DOM。

    16500

    js事件循环macroµ任务队列

    js事件轮询的一些概念这里首先需要明白几个概念:同步任务、异步任务、任务队列、microtask、macrotask同步任务指的是,在主线程上排队执行的任务,只有前一个任务执行完毕,才能执行后一个任务;...,"任务队列"是一个先进先出的数据结构,排在前面的事件,优先被主线程读取。...注意setTimeout(fn,0)的区别:setTimeOut(fn(),0)指定某个任务在主线程最早可得的空闲时间执行,也就是说,尽可能早得执行。...它在"任务队列"的尾部添加一个事件,因此要等到同步任务和"任务队列"现有的事件都处理完,才会得到执行。...可以认为同步任务队列是第一个task queue) -> 取microtask全部任务依次执行 -> 取下一个task queue里的任务执行 -> 再次取出microtask全部任务执行 -> … 这样循环往复常见的一些宏任务和微任务

    52720

    jQuery 事件注册事件处理

    1. jQuery 事件注册 jQuery 为我们提供了方便的事件注册机制,操作优缺点如下: 优点: 操作简单,且不用担心事件覆盖等问题。...缺点: 普通的事件注册不能做事件委托,且无法实现事件解绑,需要借助其他方法。 语法 ?...单个事件注册            $("div").click(function() {                $(this).css("background", "purple");          ...因为普通注册事件方法的不足,jQuery又创建了多个新的事件绑定方法bind() / live() / delegate() / on()等,其中最好用的是: on(),重点讲解如下: on():...事件处理 off() 解绑事件 当某个事件上面的逻辑,在特定需求下不需要的时候,可以把该事件上的逻辑移除,这个过程我们称为事件解绑。

    1.7K41

    Node.js事件循环

    介绍 事件循环是了解 Node.js 最重要的方面之一。 为什么这么重要?...因为它阐明了 Node.js 如何做到异步且具有非阻塞的 I/O,所以它基本上阐明了 Node.js 的“杀手级应用”,正是这一点使它成功了。...通常,在大多数浏览器中,每个浏览器选项卡都有一个事件循环,以使每个进程都隔离开,并避免使用无限的循环或繁重的处理来阻止整个浏览器的网页。 该环境管理多个并发的事件循环,例如处理 API 调用。...Web 工作进程也运行在自己的事件循环中。 主要需要关心代码会在单个事件循环上运行,并且在编写代码时牢记这一点,以避免阻塞它。...阻塞事件循环 任何花费太长时间才能将控制权返回给事件循环的 JavaScript 代码,都会阻塞页面中任何 JavaScript 代码的执行,甚至阻塞 UI 线程,并且用户无法单击浏览、滚动页面等。

    2.7K20

    JS事件循环机制(Event Loops)

    其实,在 JavaScript 中,代码的执行顺序并不是完全按照它们的书写顺序,而是取决于它们在 **事件循环** 中的顺序。 2. **什么是事件循环?...一个遵循 ECMAScript 标准的代理(浏览器或 JS 引擎)也必须遵循事件循环机制。 事件循环是由一个或以上的 **任务队列** 组成的。 3. **什么是任务队列?...) * `` 由于当前任务队列已经处于执行状态,所以任务队列中遇到的宏任务将进入到下一次事件循环的任务队列,而微任务则会被放入到本次事件循环的微任务队列中。...每次事件循环都会有一个初始为空的微任务队列。...to=https%3A%2F%2Fhtml.spec.whatwg.org%2Fmultipage%2Fwebappapis.html%23event-loops) * [并发模型事件循环 - JavaScript

    1.5K10

    Node.js 事件循环完整指南

    我们会在稍后阅读有关事件循环如何工作,以及如何将线程的概念应用于它的内容时,这最终将具有很大的优势。 每当我们运行一个程序时,就会为它创建一个实例,并且有一些内部调用线程该实例相关。...事件循环 现在我们已经对线程如何工作有了基本的了解,接下来解决 Node.js 事件循环逻辑。通过本文,你将了解前面那些解释背后的原因,每一条都会对应到正确的位置上。...Node.js 事件循环的说明 步骤1:performChecks 不应该单纯的认为事件循环实际上是一个循环。它有一个特定的条件,用来确定循环是否需要再次迭代。...阶段4: Node 检查是否已经准备好调用 setImmediate() 函数相关函数。 第5阶段: 管理关闭事件,用于清理程序状态。...关于事件循环的常见问题和错误观点 Node.js 是完全单线程的吗? 这是对 Node.js 的一种非常普遍的误解。

    1.5K30

    深入 Node.js 事件循环架构

    关于 Node.js ,相信你已经了解过不少内容,诸如 Node.js 内核、事件循环、单线程、setTimeout 或 setImmediate 函数的执行机制等等。...当然最重要的,你应该知道 Node.js 使用的是非阻塞 IO 模型以及异步的编程风格。本文仍将深入核心进行相关内容的探讨。 01 — 事件循环到底是什么?Node.js 到底是单线程还是多线程?...)、event loop(事件循环)。...实际上,Node.js 基于 V8 引擎,代码在主线程中执行,事件循环也运行在主线程中,这就是为什么我们说 Node.js 是单线程的。...这就是 Node.js 中的异步工作方式,以及为什么我们称之为事件驱动。事件循环允许 Node.js 执行非阻塞 IO 操作。

    1.7K20

    并发模型事件循环

    #constructor 构造函数 #原型链&继承 #Promise #函数生成器 #async...await #并发模型事件循环 JavaScript的并发模型基于事件循环。 先同步,后异步。...#Queue 队列 JavaScript维护一个待处理的消息队列,而每一个消息处理它的函数关联。在事件循环中的某个环节,JavaScript按顺序处理Queue的消息。...#事件循环 while (queue.waitForMessage()){ queue.processNextMessage(); } 瞧,这就是事件循环,因为它是一个处理消息的循环。...他们能且只能用postMessage()发送消息,并监听message事件。 #宏任务微任务 微任务和宏任务指的是setTimeout一样需要被加入队列执行的异步代码,而微任务一定位于宏任务之前。...如果以事件队列理解,4应该在3前面,但由于3是微任务,4是宏任务,3应该在4之前被处理。 宏任务和微任务都存在于事件循环,但微任务尽管添加时间可能比宏任务晚,仍然要在下一个宏任务执行前执行。

    76420

    有效使用 Node.js 事件循环

    对于 Node.js 应用程序开发新手而言,作为学习曲线的一部分,他们需要了解单线程事件循环的工作原理,以及它可能导致意外结果的方式。您可以使用本教程中的 3 个交互式示例中的事件循环进行练习。...我们将通过 3 段简单的代码段来演示事件循环的工作原理。 示例 1:一个简单示例 第一个示例定义了 3 个函数并调用了它们。单运行该代码。...事件循环的工作原理 传统 Web 服务器是多线程的,每个会话通常都有自己的线程。该方法很有效,但当会话空闲时,它会要求 Web 服务器分配未被使用的资源。...结束语 我们快速查看了如何使用 Node.js 单线程事件循环。使用 Node 库来访问数据库和文件等对象时,了解如何处理异步方法 — 和如何确保代码按一定的顺序执行 — 是至关重要的技能。...随着对事件循环的深入理解,您就能编写快速、高效的代码来轻松处理异步调用。 ---- 小手一抖,资料全有。长按二维码关注京程一灯,阅读更多技术文章和业界动态。

    1.6K20

    深入理解JS事件循环

    有了规则JS世界才能稳稳的运转起来,所以这些规则非常重要,但是你真的了解它们了吗? 阅读本文前可以思考下面几个问题: 你理解中的事件循环是怎样的? 有宏任务了,为什么还要有微任务,它们又有什么关系?...本文将会由浅入深的解答这些问题 深入理解JS系列 第一节:深入理解JS的深拷贝 第二节:深入理解JS的原型和原型链 第三节:深入理解JS事件循环 万物初始 ★本文基于chromium内核讲解 ” 刚开始让万物运转是件挺容易的事情...现在的JS事件循环系统就能持续运转起来啦: 循环机制解决了不能循环执行的问题:引入了循环机制,通过一个 while 循环语句,线程会一直循环执行 不过又有其他问题出现了: 别的线程要交给我这个主线程任务...从底层看setTimeout实现 到现在已经知道了,JS世界是由事件循环和任务队列来驱动的。 setTimeout大家都很熟悉,它是一个定时器,用来指定某个函数在多少毫秒后执行。...参考 浏览器工作原理实践 Promise之你看得懂的Promise MDN-async MDN-await 小结 从零开始了解了JS世界的事件循环机制 明白了为什么会有微任务,以及宏任务微任务的关系

    4K60

    JS中的事件循环机制宏队列、微队列笔记

    作为一门浏览器脚本语言,它的主要用途就是操作DOM和用户交互设计,如果说js是多线程的话,那么它在操作DOM的时候,一个线程对DOM进行了新增操作,另一个线程对DOM进行了删除操作,那么这个时候js的处理将会变得十分复杂...1.3-事件循环 主线程从"任务队列"中读取事件,这个过程是循环不断的,所以整个的这种运行机制又称为Event Loop(事件循环)。...bg2014100802.png 主线程在运行的时候,产生堆和栈,栈中的代码调用外部的API,它们会在“任务队列”中加入各种事件。...宏队列:dom事件回调、ajax回调、定时器回调 微队列:promise回调、mutation回调 因此JS执行时首先必须执行所有的初始化同步任务代码,执行完以后,每次准备取出第一个宏任务执行之前,都要将所有的微任务一个一个取出来执行...3.我们知道执行第一个宏任务之前都要把微队列的任务全部取出执行完毕才能执行宏任务,因此可以分析出,上面代码将会优先打印出'Promise onResolved1()', 1'Promise onResolved2

    2K30
    领券