vue3 第二十八节 (vue3 事件循环之JS事件循环)

请添加图片描述

1、什么是事件循环

事件循环就是消息队列,是浏览器渲染主线程的工作方式;
过去将消息队列,简单的分为宏任务微任务 两种队列,而对于现在复杂多变的浏览器环境,显然这种处理方式已经不能满足使用,取而代之的是一种更加灵活多变的处理方式;

W3C给出的解释是:
每个任务有不同的类型,相同类型的任务会被放入同一个执行队列中,不同的任务可以隶属于不同的队列,不同的任务队列有不同的执行优先级,在一次事件循环中,浏览器自行决定取哪一个任务队列,但是浏览器必须有一个微任务队列,并且微任务队列中的任务执行级别最高,优先执行微任务

宏任务中的计时器 是不能达到精准执行的,即使在当前执行的队列中没有其他任务执行时,当前任务的执行也是有略微的时间差别
如: setTimeout(() => {}, 5000)
a、只能说该任务最小执行时间为 5000 毫秒后执行,因为 js 执行的计时器是调用的浏览器函数,而浏览器函数的执行也是需要时间的
b、若当前任务之前有其他任务,需要等待其他任务执行完成之后才能执行该任务,这个时间是大于 5000 毫秒
c、计时器需要 相同的任务队列 执行完毕,即空任务时候才能去执行计时器

2、同步任务 异步任务

JavaScript是一门单线程语言,但是单线程并不意味着阻塞。实现单线程非阻塞的方式就是事件循环机制。在JavaScript中,所有的事件都可以分为同步任务异步任务

同步任务:立即执行的任务。同步任务一般会直接进入到主线程执行。

异步任务

比如ajax请求、
setTimeout定时器,
回调函数、
事件驱动(Event-Driven)、
观察者模式(Observer pattern)|发布订阅模式(publish-subscribe pattern)
Promise,async/await
宏任务(定时器,ajax, DOM事件监听);
setImmediate(立即执行,Node.js执行环境);
mutationobserverH5, 监视DOM元素变化)
等。

任务进入执行栈,会先判断当前任务是同步任务还是异步任务,如果是同步任务则会进入到主线程,立即执行异步任务会先放到Event Table,注册回调函数到Event Queue。等待所有的同步任务执行完后,主线程会去Event Queue中读取异步任务到主线程中执行,这个过程的不断重复就是事件循环。

3、宏任务 微任务

微任务
常见的有如下:Promise.thenMutationObserver()Object.observe(已废弃,被Proxy对象替代)process.nextTick
MutationObserver 接口提供了监视对 DOM 树所做更改的能力 详见:

说明process.nextTick()Node.js中的一个API,用于将一个回调函数添加到事件循环的下一轮迭代中执行。它的作用类似于setImmediate,但是它的优先级要比setImmediate()更高,会尽快执行。通常用于在当前事件循环结束后立即执行一些操作,而不需要等待下一轮事件循环。

宏任务
宏任务的时间粒度比较大,执行的时间间隔是不能精确控制的,对一些高实时性的需求就不太符合。
常见的宏任务有script(外层同步代码)setTimeout/setIntervalUI rendering/UI事件渲染postMessageMessageChannelsetImmediateI/O(Node.js)

执行一个宏任务,如果遇到微任务就将它放到微任务的事件队列中;当前宏任务执行完成后,会查看微任务的事件队列,然后将里面的所有微任务依次执行完。

可以看下下面的执行顺序是否跟自己想的一样

console.log("1");setTimeout(() => {console.log("2");new Promise<void>(resolve => {console.log("3");resolve();}).then(() => {console.log("4");});
}, 0);new Promise<void>(resolve => {console.log("5");resolve();
}).then(() => {console.log("6");setTimeout(() => {console.log("7");}, 0);
});
// 运行结果 : 1 5 6 2 3 4 7

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/11602.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

AI试衣IDM-VTON,Windows11本地安装配置记录!

昨天我们已经介绍过IDM-VTON这个开源项目了。 通过这个软件可以轻松实现一键换衣服。 昨天&#xff0c;简单演示了一下在线使用。 今天&#xff0c;来演示如何安装到本地电脑上&#xff01; 本地配置会有一定的专业性&#xff0c;懂的人可以参考下。 不懂得直接拉到最后&am…

SSRF(服务器端请求伪造)的学习以及相关例题(上)

目录 一、SSRF的介绍 二、漏洞产生的原因 三、利用SSRF可以实现的效果&#xff08;攻击方式&#xff09; 四、SSRF的利用 五、SSRF中的函数 file_get_content() 、fsockopen() 、curl_exec() 1.file_get_content()&#xff1a; 2.fsockopen(): 3.curl_exec()&#xff1…

AI大模型客服机器人VS传统客服机器人

摘要&#xff1a;AI大模型客服机器人相较于传统客服机器人&#xff0c;具有更准确的语义理解、丰富的知识库、更自然的交互体验、个性化服务、自主学习和数据分析能力。传统客服机器人受限于规则和固定关键词&#xff0c;难以处理复杂查询和提供个性化服务。 1. 更准确的语义理…

正则表达式(python实例)

正则表达式&#xff08;python实例&#xff09; 一、简介 正则表达式&#xff08;Regular Expressions&#xff0c;简称 Regex&#xff09;是一种用来描述文本模式的工具&#xff0c;它通过一系列字符和特殊字符组合成的表达式&#xff0c;用于在文本中进行模式匹配和搜索。这…

【索引】索引基础

索引 在关系型数据库中&#xff0c;索引是一种用来帮助快速检索目标数据的存储结构。 索引的创建 MySQL可以通过CREATE、ALTER、DDL三种方式创建一个索引。 1、使用CREATE语句创建 CREATE INDEX indexName ON tableName (columnName(length) [ASC|DESC]);2、使用ALTER语句…

基于GD32的简易数字示波器(5)- 软件_控制LED

这期记录的是项目实战&#xff0c;做一个简易的数字示波器。 教程来源于嘉立创&#xff0c;帖子主要做学习记录&#xff0c;方便以后查看。 本期主要介绍GPIO口的输入输出模式&#xff0c;使用其中的输出模式驱动LED。详细教程可观看下方链接。 2.2 LED控制实验 语雀 1、LE…

SaaS(软件即服务)详解

SaaS&#xff08;软件即服务&#xff09;详解 引言 SaaS&#xff0c;即软件即服务&#xff0c;是一种通过互联网提供软件和服务的模式。与传统的软件购买和安装方式不同&#xff0c;SaaS 允许用户通过订阅的方式使用软件&#xff0c;通常是基于使用量或订阅期限进行计费。Saa…

传神论文中心|第8期人工智能领域论文推荐

在人工智能领域的快速发展中&#xff0c;我们不断看到令人振奋的技术进步和创新。近期&#xff0c;开放传神&#xff08;OpenCSG&#xff09;社区发现了一些值得关注的成就。多令牌预测方法的出现以及各类全新的多模态模型的发展令人耳目一新。传神社区本周也为对AI和大模型感兴…

IP SSL怎么签发使用

IP证书的签发首先是需要有一个可供绑定的IP地址&#xff0c;作为常用数字证书之一&#xff0c;IP证书也因为其广泛的应用范围而深得用户的青睐和喜欢。 部署IP证书后&#xff0c;可以实现该IP地址的https访问&#xff0c;过程和域名证书相差不多。 IP证书和域名证书的区别 很…

浅谈java,python,c++的差异

Java&#xff0c;Python和C是三种常见的编程语言&#xff0c;它们在很多方面有着不同的特点。以下是它们的一些主要异同点&#xff1a; 宏观应用 语法和风格&#xff1a; Java&#xff1a;Java是一种静态类型语言&#xff0c;语法相对严谨&#xff0c;需要显式声明变量的类型。…

python设计模式---工厂模式

定义了一个抽象类Animal&#xff0c;并且让具体的动物类&#xff08;Dog、Cat、Duck&#xff09;继承自它&#xff0c;并实现了speak方法。然后创建了AnimalFactory工厂类&#xff0c;根据传入的参数来决定创建哪种动物的实例。 from abc import abstractmethod, ABCclass Anim…

linux进阶高级配置,你需要知道的有哪些(9)-脚本应用(四)

1、正则表达式定义 是使用单个字符串来描述、匹配一系列符合某个句法规则的字符串 2、正则表达式组成 &#xff08;1&#xff09;普通字符 大小写字母、数字、标点符号及一些其他符号 &#xff08;2&#xff09;元字符 在正则表达式中具有特殊意义的专用字符 3、正…

05、 java 的三种注释及 javadoc 命令解析文档注释(即:java 特有注释方式)的过程

java的三种注释 1、单行注释&#xff1a;其一、代码展示&#xff1a;其二、特点&#xff1a; 2、多行注释&#xff1a;其一、代码展示&#xff1a;其二、特点&#xff1a; 3、文档注释(java特有)&#xff1a;其一、代码展示&#xff1a;其二、注释文档的使用&#xff1a;其三、…

掌握Vim:Linux系统维护的瑞士军刀 - 常用命令深度解析

在Linux的世界里&#xff0c;Vim编辑器犹如一位沉默的剑客&#xff0c;它的命令就是那锋利的剑刃&#xff0c;能够在代码的海洋中劈波斩浪。对于每一位Linux系统用户来说&#xff0c;掌握Vim的常用命令&#xff0c;就如同获得了维护系统的瑞士军刀。今天&#xff0c;让我们一起…

Java中,throw和throws的区别是什么?

在Java中&#xff0c;throw和throws都与异常处理相关&#xff0c;但它们的作用和使用方式有所不同。 throw 抛出异常&#xff1a;throw是一个语句&#xff0c;用于在程序的特定位置手动抛出一个异常对象。局部范围内&#xff1a;throw通常用在方法体或任何代码块的内部&#…

Rumor Remove Order Strategy on Social Networks

ABSTRACT 谣言被定义为广泛传播且没有可靠来源支持的言论。现代社会&#xff0c;谣言在社交网络上广泛传播。谣言的传播给社会带来了巨大的挑战。 “假新闻”故事可能会激怒您的情绪并改变您的情绪。有些谣言甚至会造成社会恐慌和经济损失。因此&#xff0c;谣言的影响可能是深…

Flutter 中的 Autocomplete 小部件:全面指南

Flutter 中的 Autocomplete 小部件&#xff1a;全面指南 在 Flutter 中&#xff0c;Autocomplete 是一个文本输入辅助小部件&#xff0c;它可以根据用户输入的内容提供自动完成建议。这在创建搜索栏、填写表单或其他需要快速输入的场景中非常有用。虽然 Flutter 的基础库中没有…

深入解析C#中的async和await关键字

文章目录 一、异步编程的基本概念及其在C#中的实现二、async关键字的定义及其用法三、await关键字的定义及其用法示例代码&#xff1a;使用async和await编写一个简单的异步程序 四、async和await的优点注意事项 五、C#下async和await中常见问题汇总1. 异步方法中的await调用2. …

STM32(GPIO)

GPIO简介 GPIO&#xff08;General Purpose Input Output&#xff09;通用输入输出口 引脚电平&#xff1a;0V~3.3V&#xff0c;部分引脚可容忍5V 输出模式下可控制端口输出高低电平&#xff0c;用以驱动LED、控制蜂鸣器、模拟通信协议输出时序等 输入模式下可读取端口的高低电…

【MYSQL】一颗B+树可以保存多少条数据

引言 事万物都有自己的单元体系&#xff0c;若干个小单体组成一个个大的个体。就像拼乐高一样&#xff0c;可以自由组合。所以说&#xff0c;如果能熟悉最小单元&#xff0c;就意味着我们抓住了事物的本事&#xff0c;再复杂的问题也会迎刃而解。 存储单元 存储器范围比较大…