解析浏览器的事件循环机制:理解JavaScript运行时的执行顺序

news2025/3/10 14:45:33

解析浏览器的事件循环机制:理解JavaScript运行时的执行顺序

  • 前言
  • 定义
    • 执行顺序
    • 异步任务概念:微任务、宏任务
      • 宏任务有哪些?微任务有哪些
  • 实例代码与图解

前言

因为防止在多个用户同时在浏览器中操作一个DOM节点所带来的复杂性,故JavaScript为一种单线程语言。那这种单线程语言的缺点就是同一时间内只能做一件事,这也就延申出另一个问题,如何才能确保JS稳定有序的执行呢,这里就要讲到JS的运行机制:事件循环。

定义

事件循环机制是一种在浏览器或node环境中存在的一种机制,它用来管理和协调JavaScript代码的执行顺序,保证JavaScript种的异步任务和同步任务保持正确的执行顺序。

执行顺序

1.自上而下执行
2.上层代码报错,停止执行
3.先执行同步代码,遇到异步任务,则放在任务队列中,直到同步任务都执行完后再执行异步任务。

异步任务概念:微任务、宏任务

宏任务有哪些?微任务有哪些

宏任务:整体script代码块,settimeout、setInterval、IO、UI交互事件。
微任务:promise回调函数、nextTick(它俩同时存在,先执行nextTick)
了解上述概念后,在执行顺序中的3中,任务队列概念再细化又分为宏任务和微任务,宏任务放宏任务队列中,微任务放微任务队列中。
继续说执行顺序细化。
当所有同步任务执行完成后,将异步任务中的微任务队列调回到主线程执行,执行完成后再将宏任务调回主线程执行,如此循环往复则为事件循环。

实例代码与图解

console.log(1);
setTimeout(()=>{
	console.log(2);
},0)
Promise.resolve().then(()=>{
	console.log(3);
})
console.log(4);

在这里插入图片描述
在上述代码中,我们先执行同步任务,打印出1和4,然后执行异步任务中的微任务promise.then回调函数打印3,最后执行宏任务settimeout打印2.

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

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

相关文章

ADFS 高可用配置 + NLB配置(Windows网络负载均衡)

ADFS 高可用配置 NLB配置(Windows网络负载均衡) ADFS安装配置NLB配置节点 TEST-ADFS-01 网络负载平衡配置节点 TEST-ADFS-02 网络负载平衡修改CRM配置 ADFS实现高可用负载均衡有两种,主要是在数据库的选择方式: windows自带的内…

AP/PF PLASMA电源维修等离子变频电源PF23V-A1-138

维修包括:PECVD、MOCVD、IONIMP,PLASMA的设备电源,包括直流、高压、脉冲、射频、微波、匹配器、RPSC、CHILLER等。电源维修的时候,需要检测一下各功率器件是否存在击穿短路,例如电源整流桥堆、开关管、高频大功率整流管、浪涌电流的大功率电阻…

# Spring事务与分布式事务

一、事务的具体定义 事务提供一种机制将一个活动涉及的所有操作纳入到一个不可分割的执行单元,组成事务的所有操作只有在所有操作均能正常执行的情况下方能提交,只要其中任一操作执行失败(出现异常),都将导致整个事务…

抖音自动发评论之论人工智能AI的应用和发展趋势

人工智能(Artificial Intelligence,AI)是目前国际上热门的科技话题之一。它是计算机科学中的一个分支,旨在创造能够智能地工作、学习、感知、理解和决策的机器。人工智能的应用范围十分广泛,包括语音识别、自然语言处理…

国际阿里云:提高CDN缓存命中率教程!!!

CDN缓存命中率低会导致源站压力大,静态资源访问效率低。您可以根据导致CDN缓存命中率低的具体原因,选择对应的优化策略来提高CDN的缓存命中率。 背景信息 CDN通过将静态资源缓存在CDN节点上实现资源访问加速。当客户端访问某资源时,如果CDN节…

群晖Docker(Container Manager)中安装Home Assistant Container

群晖Docker(Container Manager)中安装Home Assistant Container 不要使用 套件里面的 Home Assistant,不利于后期拓展 方式一: docker run -d --name"home-assistant-1" -v /volume1/docker/homeassistant/config:/c…

基于JAX-WS实现RESTful形式的web服务端点(endpoint)

RESTful形式的web服务使用XML/HTTP绑定,实现jakarta.xml.ws.Provider。 服务端的实现类用jakarta.xml.ws.WebServiceProvider和BindingType(valueHTTPBinding.HTTP_BINDING)注释。其中HTTPBinding.HTTP_BINDING表示使用XML/HTTP绑定。 例如: WebServic…

常用网络命令ping、arp、tracert、route的详细用法,弄懂立马成大神

你们好,我的网工朋友。 做网工,你遇到最多的问题是啥?大部分人的回答都是网络故障吧。 所以有很多朋友多次问到,如何检测网络故障和对网络进行基础的操作。比如:网络经常掉线、网络时好时坏,ip地址冲突、…

BUUCTF刷题十一道【缺】(10)

文章目录 EasyBypass[SCTF2019]Flag Shop[BSidesCF 2019]SVGMagic[极客大挑战 2020]Greatphp[GYCTF2020]Easyphp【留坑-反序列化】[HarekazeCTF2019]Avatar Uploader 1[FireshellCTF2020]Caas[ISITDTU 2019]EasyPHP[N1CTF 2018]eating_cms[GYCTF2020]Ez_Express【留坑-nodejs原…

塑料质量检测是确保产品制造和装配过程的关键环节

激光塑料透光率检测是一种有效的塑料材料特性检测方法。在激光束通过上层透明材料后,被下层材料吸收。上层材料可以是透明的或者是有颜色的,但是必须能够保证有足够的激光通过。 塑料质量检测是确保产品制造和装配过程的关键环节。通过激光塑料透光率检测…

C语言—字符串连接函数

strcpy_s&#xff1a;拷贝整个字符串 #include <stdio.h> #include <string.h>int main() {char str1[] "first stringiiii";char str2[] "second string";char str3[100];strcpy_s(str1, sizeof(str1) / sizeof(str1[0]), str2);strcpy_s(…

datax 搭建使用

文章目录 datax 环境搭建使用一、解压文件二、配置 json 文件三、执行命令 datax 环境搭建使用 用于全量同步 一、解压文件 将包上传至服务器 输入命令&#xff1a; tar -zxvf datax.tar.gz -C /opt/module/ 将包 解压到 /opt/module 目录 解压完之后&#xff0c;不需要任何…

双通道、8位、MCP47CMD02T-E/MG、MCP47CMD02T-E/MF、MCP47CMD02T-E/UN数模转换器(DAC)适合消费和工业应用

典型应用&#xff1a; •设定点或偏移微调 •传感器校准 •低功耗便携式仪器仪表 •个人电脑外围设备 •数据采集系统 特性 8位分辨率 轨到轨输出 快速建立时间&#xff1a;4s&#xff08;典型值&#xff09; I2C接口 非易失性存储器&#xff08;MTP&#xff09;&#xff1a…

ios 对话框UIAlertController放 tableview

//强弱引用 #define kWeakSelf(type)__weak typeof(type)weak##type type; -(void) showUIAlertTable {kWeakSelf(self)UIAlertController *alert [UIAlertController alertControllerWithTitle:NSLocalizedString("select_stu", nil) message:nil prefer…

《数据结构、算法与应用C++语言描述》-代码实现键值有序链表跳表

跳表 定义 在一个用有序链表描述的 n 个数对的字典中进行查找&#xff0c;至多需要 n 次关键字比较。如果在链表的中部节点加一个指针&#xff0c;则比较次数可以减少到 n/21。这时&#xff0c;为了查找一个数对&#xff0c;首先与中间的数对比较。如果查找的数对关键字比较小…

腾讯云优惠服务器有哪些?腾讯云服务器优惠券领取入口汇总

腾讯云此次推出云服务器中最实惠的2核2G服务器以每年仅需88元的超低价格为用户提供稳定可靠的计算资源。这样的价格对于个人网站、小型企业以及学生开发者来说绝对是一笔难以忽视的优惠。 腾讯云双十一领9999代金券 https://1111.mian100.cn 腾讯云新用户领2860代金券 https:…

前后端交互案例,图书管理系统

先引入前端代码运行看看是否有问题 图书管理系统 定义前后端交互接口 1.登录 URL : /user/login 参数 : userName?&password? 响应 : true/false 2.图书列表展示 : URL : /book/getBookList 参数 : 无 响应 : List<BookInfo> 后端代码如下: package com…

【Python】jupyter notebook(学习笔记)

Jupyter Notebook初见 1、Jupyter Notebook介绍 web版的ipython 编程、写文档、记笔记、展示 格式.ipynb 2、为什么使用Jupyter Notebook? 画图方面的优势&#xff1a;图像的生成不会堵塞后面代码的执行数据展示方面的优势&#xff1a;生成的数据可以保存在文件中 3、J…

滚珠螺杆在注塑机械手中起什么作用?

注塑机械手的配件中滚珠螺杆是重要的一环&#xff0c;在注塑机械手中起着重要的作用。注塑机械手是一种自动化设备&#xff0c;可以在注塑生产中实现自动化操作&#xff0c;而滚珠螺杆则是实现这一操作的关键部件之一。 滚珠螺杆是一种将旋转运动转化为直线运动的精密传动部件&…

anzo capital佩服的投资者,失明还没有经验的投资者竟然是十亿投资掌管人

你不敢相信吧&#xff01;这个失明还没有经验的女人&#xff0c;竟然管理着高达4.05亿美元的股票投资组合。她不仅是投资公司Sloate Weisman Murray&Co的所有者&#xff0c;也是在2008年全球金融危机期间&#xff0c;实现了13%的利润的路博迈资产管理公司的经理。也是anzo…