2023/02/21 事件循环-eventloop 宏任务 微任务 讲解

news/2024/3/29 9:58:34/文章来源:https://blog.csdn.net/zs18753479279/article/details/129149146

1 JS是单线程

js是单线程的。也就是说,同一个时间只能做一件事。作为浏览器脚本语言,与它的用途有关。JavaScript的主要用途是和用户互动,以及操作DOM,这决定了它只能是单线程。
在这里插入图片描述
js是单线程的。也就是说,同一个时间只能做一件事。有些任务是耗时的,会阻塞代码的执行。
在这里插入图片描述
在这里插入图片描述
我们可以把代码分为同步代码(同步任务)和异步代码(异步代码):

在这里插入图片描述
同步代码:立即放入JS引擎(JS主线程)执行,并原地等待结果。
异步代码:先放入宿主环境(浏览器/Node),不必原地等待结果,并不阻塞主线程继续往下执行,异步结果在将来执行。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
1、JS是单线程,防止代码阻塞,我们把代码(任务):同步和异步
2、同步代码给js引擎执行,异步代码交给宿主环境
3、同步代码放入执行栈中,异步代码等待时机成熟送入任务队列排队
4、执行栈执行完毕,会去任务队列看是否有异步任务,有就送到执行栈执行,反复循环查看执行,这个过程是事件循环(eventloop)。

2 宏任务和微任务

JS把异步任务分为宏任务和微任务。在ES5之后,JavaScript引入了Promise,这样,不需要浏览器,JavaScript引擎自身也能够发起异步任务了。宏任务是由宿主(浏览器、Node)发起。微任务JS引擎发起的任务。Promise本身同步, then/catch的回调函数是异步的。
代码可能有3种:
1、同步代码(js 执行栈)
2、微任务的异步代码(js引擎)

process.nextTick ( node)
Promise.then() catch()
Async/Await
Object.observe等等

3、宏任务的异步代码(宿主环境)

script (代码块)
setTimeout / setInterval定时器
setlmmediate定时器

在这里插入图片描述
以下代码的执行过程:https://www.jsv9000.app/

console.log(1)
setTimeout(function () {console.log(2)
}, 0)
const p = new Promise((resolve, reject) => {console.log(3)resolve(1000)console.log(4)
})
p.then(value => {console.log(value)
})
console.log(5)

https://www.jsv9000.app/?code=Y29uc29sZS5sb2coMSkNCnNldFRpbWVvdXQoZnVuY3Rpb24gKCkgew0KICAgIGNvbnNvbGUubG9nKDIpDQp9LCAwKQ0KY29uc3QgcCA9IG5ldyBQcm9taXNlKChyZXNvbHZlLCByZWplY3QpID0%2BIHsNCiAgICBjb25zb2xlLmxvZygzKQ0KICAgIHJlc29sdmUoMTAwMCkNCiAgICBjb25zb2xlLmxvZyg0KQ0KfSkNCnAudGhlbih2YWx1ZSA9PiB7DQogICAgY29uc29sZS5sb2codmFsdWUpDQp9KQ0KY29uc29sZS5sb2coNSk%3D

在这里插入图片描述

1 举例说明-1

在这里插入图片描述
结果执行顺序为 : 3 2 1

2 举例说明-2

在这里插入图片描述
在这里插入图片描述
输出结果为:11 14 12 15 13

3 举例说明-3

在这里插入图片描述
输出结果为 :2 3 6 p2 p1 1 4 5

4 举例说明-4 字节跳动的问题

async function async1() {console.log('async1');await async2();console.log('async1 end');
}async function async2() {console.log('async2');
}console.log('script start');
setTimeout(function () {console.log('setTimeout');
}, 0);
async1();

在这里插入图片描述

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

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

相关文章

非常优秀的网站设计案例,设计师必备

厚积才能薄发,一个优秀的设计师的天性一定是想要获得更多网站设计灵感,擅于为新项目寻找创意切入点、搜索设计参考资源、最新的设计趋势。今天为大家带来了一组免费可商用的网站设计案例,通过这些网站设计案例,你可以获得&#xf…

CF707C Pythagorean Triples 题解

CF707C Pythagorean Triples 题解题目链接字面描述题面翻译题目描述输入格式输出格式样例 #1样例输入 #1样例输出 #1样例 #2样例输入 #2样例输出 #2样例 #3样例输入 #3样例输出 #3样例 #4样例输入 #4样例输出 #4样例 #5样例输入 #5样例输出 #5提示思路代码实现题目 链接 http…

华为OD机试 - 最短耗时(C++) | 附带编码思路 【2023】

刷算法题之前必看 参加华为od机试,一定要注意不要完全背诵代码,需要理解之后模仿写出,通过率才会高。 华为 OD 清单查看地址:https://blog.csdn.net/hihell/category_12199283.html 华为OD详细说明:https://dream.blog.csdn.net/article/details/128980730 华为OD机试题…

算法笔记(十一)—— 并查集、KMP

并查集 支持集合快速合并 所有数据生成各自的集合,需要提供查询两个两素是不是属于一个集合,和集合合并操作,并查集能够在常数时间级别上对两个操作进行实现 1. 构造结构(数据指针),将自己的指针指向自己…

事件流、事件冒泡、阻止冒泡

1、事件流 2、事件冒泡&#xff1a;从小到大 概念&#xff1a; 当一个元素的事件被触发时&#xff0c;同样的事件将会在该元素的所有祖先元素中依次被触发。这一过程被称为事件冒泡 <style> .father{width: 300px;height: 300px;background-color: pink; } .son{width:…

Zookeeper框架

Zookeeper框架概述 1.Zookeeper介绍 Zookeeper&#xff08;以下简称ZK&#xff09;是用来管理和协调其他框架的&#xff0c;很多框架需要依赖ZK&#xff08;例如Hadoop-HA&#xff0c;Kafka&#xff0c;HBase等&#xff09;ZK本身也是一个集群ZK本身也可以存数据(一般保存配置…

koa中间件的实现原理

koa中间件的实现原理如何&#xff1f;先来看一个例子。koa的执行顺序是这样的&#xff1a;const middleware asyncfunction (ctx, next) {console.log(1)await next()console.log(6) }const middleware2 asyncfunction (ctx, next) {console.log(2)await next()console.log(5…

LeetCode 535. TinyURL 的加密与解密

TinyURL 是一种 URL 简化服务&#xff0c; 比如&#xff1a;当你输入一个 URL https://leetcode.com/problems/design-tinyurl 时&#xff0c;它将返回一个简化的URL http://tinyurl.com/4e9iAk 。请你设计一个类来加密与解密 TinyURL 。 加密和解密算法如何设计和运作是没有限…

产品新说 | 指标异常?怎么做能更好配合业务变化(一)

​ 背景&#xff1a; 企业业务运营的平稳&#xff0c;常常要依靠智能运维在后方保驾护航。熟悉运维的肯定都知道&#xff0c;在智能运维中有一环是通过监控指标来判断系统、云、业务应用、网络设备等运行的是否健康&#xff0c;以便及时排障维稳后台。在指标异常检测中&#xf…

读书笔记//来自公众号(2)

非常喜欢阅读同行的文章&#xff0c;彷佛进行一场隔空交流。大家都是数据分析师&#xff0c;有许多共鸣&#xff1b;了解数据分析在不同行业的应用&#xff0c;往往很有收获。 这位朋友在零售行业、工业物联网、汽车互联网、2G电商等做个数据分析&#xff0c;有10多工作经验。…

opencv在windows下环境搭建遇到问题

文章目录debug模式下执行到cv::imshow()报内存异常qt配置opencv环境出现的问题debug模式下执行到cv::imshow()报内存异常 原因是&#xff1a;在添加静态库的时候opencv_world460.lib和opencv_world460d.lib都导入了。 在debug模式下只能导入opencv_world460d.lib动态库&#xf…

OpenGL 渲染管线与显卡可执行程序

渲染管线的六个步骤 OpenGL 渲染管线的六个步骤&#xff0c;从指定几何图元到帧缓冲区写入像素&#xff0c;图像就被 OpenGL 引擎一步步地渲染到屏幕&#xff08;FBO&#xff09;上去了。 指定几何对象 OpenGL 引擎会根据开发者的指令去绘制几何图元。OpenGL&#xff08;ES&…

IMX6ULL学习笔记(17)——工程管理

一、简介 之前我们把所有源码文件放在一个文件夹下。 这样做存在两个主要问题&#xff0c;第一&#xff0c;代码存放混乱不易阅读。第二&#xff0c;程序可移植性差。如果工程源文件达到几十、甚至数百个的时候&#xff0c;这样一股脑全部放到根目录下就会使工程显得混乱不堪。…

[JavaEE系列] 详解面试中HTTP协议HTTPS协议

文章目录HTTP不安全HTTPS中的加密算法对称加密非对称加密混合加密HTTPS中的摘要算法HTTPS中的数字证书SSL /TLS握手TCP建立连接&#xff08;三次握手&#xff09;三次握手中常见的面试题&#xff1a;TCP断开连接&#xff08;四次挥手&#xff09;四次挥手中常见的面试题&#x…

前端页面开发模块组织结构

模块组织 任何超过 1000 行的 CSS 代码,你都曾经历过这样的体验: 这个 class 到底是什么意思呢?这个 class 在哪里被使用呢?如果我创建一个 xxoo class,会造成冲突吗?Reasonable System for CSS Stylesheet Structure 的目标就是解决以上问题,它不是一个框架,而是通过…

2.5|1.3 操作系统与嵌入式操作系统概述

CPU是计算机系统的心脏&#xff0c;操作系统是计算机系统的大脑。半个世纪以来操作系统这门软件科学吸引了世界上一大群最热情、最有智慧的杰出人材&#xff0c;集中了人类现代创造性思维活动的精髓。操作系统是软件世界的万花筒、世博会&#xff0c;是软件王国中的一顶璀璨的皇…

十二、Django表单

表单 在之前的案例中&#xff0c;每次我们需要提交表单数据的时候。我们都需要去手动编辑html表单&#xff0c;根据不同的字段&#xff0c;字段名&#xff0c;进行编码。做了很多重复的部分&#xff0c;所以django提供了一个专门用来处理表单的类&#xff0c;django.forms.For…

代码随想录算法训练营第六天 |哈希表理论基础、242.有效的字母异位词、349. 两个数组的交集 、202. 快乐数、 1. 两数之和

打卡第六天&#xff0c;补昨天的卡 今日任务 哈希表理论基础242.有效的字母异位词349.两个数组的交集202.快乐数1.两数之和 哈希表理论基础 哈希表是根据关键码的值而直接进行访问的数据结构。 哈希表能解决什么问题呢? 一般哈希表都是用来快速判断一个元素是否出现集合里。 …

Tr0ll1靶机训练

信息收集 主机探测 端口扫描 21,22,80端口开放通过浏览器访问并进行指纹识别&#xff0c;并没没有发现什么有用信息 测试 观察发现21端口开放&#xff08;ftp&#xff09;尝试进行匿名登录发现其中存在一个流量文件将其下载 并将文件用wirwshark打开&#xff0c;追踪其TCP流(…

BEV感知:DETR3D

3D检测&#xff1a;DETR3D前言MethodImage Feature Extracting2D-to-3D Feature TransformationLoss实验结果前言 在这篇paper&#xff0c;作者提出了一个更优雅的2D与3D之间转换的算法在自动驾驶领域&#xff0c;它不依赖于深度信息的预测&#xff0c;这个框架被称之为DETR3D…