javaScript 事件循环 Event Loop

news/2024/4/30 16:55:30/文章来源:https://blog.csdn.net/qq_42550235/article/details/137350158

一、前言

javaScript 是单线程的编程语言,只能同一时间内做一件事情,按照顺序来处理事件,但是在遇到异步事件的时候,js线程并没有阻塞,还会继续执行,这又是为什么呢?

二、基础知识

:利用二叉树维护的一组数据,有两种:最大堆,最小堆,将根节点最大的堆叫最大堆,根节点最小的堆叫最小堆
:后进先出,只在某一端插入和删除的特殊线性表
队列:先进先出

进程和线程
一个进程可能包含多个线程。
浏览器的主要进程:

  • 渲染进程:包含 JS引擎线程、事件触发线程、GUI线程、HTTP请求线程、定时器线程(为JS在浏览器中完成异步提供了基础)
  • GPU进程:
  • 插件进程:
  • 网络进程:

微任务:new Promise().then(回调)、Process.nextTick()
宏任务:全局代码、setInterval、setTimeout、SetImmediate、I/O、UI Rendering、ajax、DOM事件监听
微任务和宏任务的区别
微队列是唯一的,在整个事件循环中,仅存在一个,并且同一轮事件循环中的微任务会按顺序依次执行。而宏任务存在一定的优先级(用户I/O部分优先级更高),且同一轮事件循环中,只执行一个。

同步任务:在调用栈中按照顺序等待主线程依次执行
异步任务:异步任务在异步任务有了结果后,将注册的回调函数放入任务队列中等待主线程空闲的时候被读取到栈内等待主线程执行。
在这里插入图片描述
执行栈:
当某个函数,用户点击一次鼠标、Ajax请求完成、一个图片加载完成等事件发生时,只要指定了回调函数,这些事件发生时就会进入执行栈队列中(是队列不是栈) 等待主线程读取,并遵循先进先出的原则。
主线程:
主线程和执行栈是两个不同的概念,主线程表示的是现在执行执行栈中的哪个事件。
主线程会不停的从执行栈中读取事件,并执行完成所有栈中的同步代码。
当遇到一个异步事件时,并不会一直等待异步事件返回结果,而是会将这个事件挂在与执行栈不同的队列中,我们称之为任务队列。
当主线程将执行栈中的所有任务都处理完,主线程回去任务队列中查看是否时任务,如果有,那么主线程会依次执行任务堆列中的回调函数。

三、浏览器中的事件循环

当JS代码执行时,所有任务(同步/异步)都在主线程上执行,形成一个执行栈。执行栈之外有用于存储待执行异步回调的任务队列: 宏任务队列、微任务队列。 浏览器中有其他分线程执行相关的管理模块:定时器管理模块、Ajax请求管理模块,DOM事件管理模块,若碰到这些任务源,就会将其回调函数加入到宏队列中。若碰到微任务如:promise 则将其添加到微任务队列中。直到Script宏任务执行结束后,就会执行微队列中的任务;当微队列中的所有微任务执行结束,就会检查宏队列中有没有可执行的宏任务。如果有,则执行该宏任务,之后检查微队列中并执行微任务,依次循环,反之,要是宏队列中没有待执行的任务,则循环结束。这就是我们常说的事件循环机制。
在这里插入图片描述

四、案例分析

console.log('同步代码1')
setTimeout(() => {console.log('setTimeout')
}, 0)
new Promise((resolve) => {console.log('同步代码2')resolve()
}).then(() => {console.log('promise.then')
)
console.log('同步代码3')

执行顺序:同步代码1、同步代码2、同步代码3、promise.then、setTimeout
解析:
1、同步任务优先于异步任务
2、微任务优先于宏任务
3、promise是同步任务,promise.then是异步任务

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

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

相关文章

FPGA开源项目分享——基于 DE1-SOC 的 String Art 实现

导语 今天继续康奈尔大学FPGA课程ECE 5760的典型案例分享——基于DE1-SOC的String Art实现。 (更多其他案例请参考网站: Final Projects ECE 5760) 1. 项目概述 项目网址 ECE 5760 Final Project 项目说明 String Art起源于19世纪的数学…

【第十二篇】使用BurpSuite实现CSRF(实战案例)

CSRF存在前提:简单的身份验证只能保证请求是发自某个用户的浏览器,却不能保证请求本身是用户自愿发出的 业务场景:新增、删除、收藏、编辑、保存使用Burp发现CSRF漏洞的过程如下。 1、如图,存在修改邮箱的功能点如下: 2、修改邮箱的流量包,此时邮箱已被修改: 思路:是…

白盒测试-条件覆盖

​ 条件覆盖是指运行代码进行测试时,程序中所有判断语句中的条件取值为真值为假的情况都被覆盖到,即每个判断语句的所有条件取真值和假值的情况都至少被经历过一次。 ​ 条件覆盖率的计算方法为:测试时覆盖到的条件语句真、假情况的总数 / 程…

Redis群集模式和rsync远程同步

一、Redis群集模式 1.1 概念 1.2 作用 1.2.1 Redis集群的数据分片 1.2.2 Redis集群的主从复制模型 1.3 搭建Redis 群集模式 1.3.1 开启群集功能 1.3.2 启动redis节点 1.3.3 启动集群 1.3.4 测试群集 二、rsync远程同步 2.1 概念 2.2 同步方式 2.3 备份的方式 2.4…

机器学习实现文本分类

传统的向量空间模型(VSM)假设特征项之间相互独立,这与实际情况是不相符的,为了解决这个问题,可以采用文本的分布式表示方式(例如 word embedding形式),通过文本的分布式表示,把文本表示成类似图…

C语言面试题之合法二叉搜索树

合法二叉搜索树 实例要求 实现一个函数,检查一棵二叉树是否为二叉搜索树; 示例 1: 输入:2/ \1 3 输出: true 示例 2: 输入:5/ \1 4/ \3 6 输出: false 解释: 输入为: [5,1,4,null,null,3,6]。根节点的值为 5 ,但是其右子节点值为 4 …

《QT实用小工具·十七》密钥生成工具

1、概述 源码放在文章末尾 该项目主要用于生成密钥,下面是demo演示: 项目部分代码如下: #pragma execution_character_set("utf-8")#include "frmmain.h" #include "ui_frmmain.h" #include "qmessag…

最新安卓iOS免签封装源码 可处理apk报毒

资源简介 解决app误报毒 可打包APP可上传APK 自动实现5分钟随机更换包名和签名系统源码 本程序功能介绍 程序可实现域名自动打包成app 出现误报毒并自动更换包名和签名时间一次 也可以上传打包好的apk*时间自动更换包名和签名 自动覆盖原下载路径,下载地址不变…

docker 安装canal

一、新建文件夹 新建文件夹logs, 新建文件canal.properties instance.properties docker.compose.yml canal.propertie 修改如下: 修改instance.properties内容如下 1.1 canal.properties ################################################# ######### …

java下载网络上的文件、图片保存到本地 FileUtils

java下载网络上的文件、图片保存到本地 FileUtils 1. 引入FileUtils依赖2. 实现代码3. 输出结果 1. 引入FileUtils依赖 <!--FileUtils依赖--> <!-- https://mvnrepository.com/artifact/commons-io/commons-io --> <dependency><groupId>commons-io&l…

【vue】watch监听取不到this指向的数?

今天同事问我&#xff0c;watch里this指向的数值&#xff0c;别的地方却可以打印出来。工具也能看到数值&#xff0c;但打印出来却是undifined&#xff0c;先看看代码&#xff1a; 懒得打字了直接上截图吧 ps&#xff1a; 在Vue组件中&#xff0c;如果你在watch选项中访问this…

PyCharm+PyQt5配置方法

一、前言 PyQt5PyQt5是一套Python绑定Digia QT5应用的框架。Qt库是最强大的GUI库之一PyQt5-toolsPyQt5中没有提供常用的Qt工具&#xff0c;比如图形界面开发工具Qt Designer&#xff0c;PyQt5-tools中包含了一系列常用工具Qt Designer可以通过Qt Designer来编写UI界面&#xf…

钉钉与金蝶云星空对接集成获取流程实例(宜搭)打通收款退款新增

钉钉与金蝶云星空对接集成获取流程实例&#xff08;宜搭&#xff09;打通收款退款新增 接入系统&#xff1a;钉钉 钉钉&#xff08;DingTalk&#xff09;是阿里巴巴集团专为中国企业打造的免费沟通和协同的多端平台&#xff0c;提供PC版&#xff0c;Web版和手机版&#xff0c;有…

设计模式总结-组合模式

组合设计模式 模式动机模式定义模式结构组合模式实例与解析实例一&#xff1a;水果盘实例二&#xff1a;文件浏览 更复杂的组合总结 模式动机 对于树形结构&#xff0c;当容器对象&#xff08;如文件夹&#xff09;的某一个方法被调用时&#xff0c;将遍历整个树形结构&#x…

李沐26_网络中的网络NiN——自学笔记

全连接层太大 导致占用内存、占用计算带宽、很容易过拟合 NiN块 1.一个卷积层后跟着两个全连接层 2.步幅1&#xff0c;无填充&#xff0c;输出形状跟卷积层输出一样 3.起到全连接层的作用 NiN架构 1.无全连接层 2.交替使用NiN块和步幅为2的最大池化层&#xff0c;逐步减…

Weblogic任意文件上传漏洞(CVE-2018-2894)漏洞复现(基于vulhub)

&#x1f36c; 博主介绍&#x1f468;‍&#x1f393; 博主介绍&#xff1a;大家好&#xff0c;我是 hacker-routing &#xff0c;很高兴认识大家~ ✨主攻领域&#xff1a;【渗透领域】【应急响应】 【Java、PHP】 【VulnHub靶场复现】【面试分析】 &#x1f389;点赞➕评论➕收…

【Linux网络编程】网络编程套接字(TCP服务器)

【Linux网络编程】网络编程套接字(TCP服务器) 目录 【Linux网络编程】网络编程套接字(TCP服务器)地址转换函数关于inet_ntoa 简单的TCP网络程序TCP sockot API详解socket()bind()listen()accept();connect 完整的TCP服务器代码&#xff08;线程池版&#xff09; 作者&#xff1…

【算法】双指针算法

个人主页 &#xff1a; zxctscl 如有转载请先通知 题目 1. 283. 移动零1.1 分析1.2 代码 2. 1089. 复写零2.1 分析2.2 代码 3. 202. 快乐数3.1 分析3.2 代码 4. 11. 盛最多水的容器4.1 分析4.2 代码 5. LCR 179. 查找总价格为目标值的两个商品5.1 分析5.2 代码 6. 15. 三数之和…

antd vue table控件的使用(三)

今天就讲讲Ant Design Vue下的控件----table表格&#xff08;分页、编辑和删除功能&#xff09; 结合项目中的需求&#xff0c;看看如何配置,让table即可以展示列表&#xff0c;又可以直接编辑数据。需求&#xff1a; &#xff08;1&#xff09;展示即将检查的数据列表&#…

持续交付工具Argo CD的部署使用

Background CI/CD&#xff08;Continuous Integration/Continuous Deployment&#xff09;是一种软件开发流程&#xff0c;旨在通过自动化和持续集成的方式提高软件交付的效率和质量。它包括持续集成&#xff08;CI&#xff09;和持续部署&#xff08;CD&#xff09;两个主要阶…