JS执行顺序

众所周知,JavaScript 是单线程语言,只能同时执行做一件事(js只有一个线程,称之为main thread-主线程)

1.Javascript 运行机制 main thread 主线程和 call-stack 调用栈(执行栈),所有的任务都会被放到调用栈等待主线程执行
2.Javascript 任务分为2类,同步任务异步任务(异步又分为宏任务微任务),同步和异步任务都是队列,所以是先进先出的。
3.执行顺序同步—>异步—>MicroTask(微任务)—>MacroTask(宏任务)(异步包含宏任务和微任务,异步中微任务是优于宏任务执行的)

在这里插入图片描述

在这里插入图片描述

                概念不懂,直接看下方!

JS 调用栈

JS调用栈采用的是后进先出(数据结构)的规则,当函数执行的时候,会被添加到栈的顶部,当执行栈执行完成后,就会从栈顶移出,直到栈内被清空。

它用于存储正在执行的 js代码块及其运行环境。每当创建一个新的执行上下文,就会将其添加到调用栈中。这个执行上下文包含了该函数或代码块执行所需的所有变量、参数、作用域等。

MacroTask(宏任务)

宏任务通常包括整体代码块(script),setTimeout,setInterval,setImmediate,I/O 操作等异步操作,它们会被推入到宏任务队列中等待执行。当主线程执行完当前任务后,会去检查宏任务队列,如果队列中有任务,就会从队列中取出一个任务执行,直到队列为空。

MicroTask(微任务)

微任务通常包括 Promise 的回调函数,process.nextTick,MutationObserver 等异步操作,它们会被推入到微任务队列中等待执行。当一个宏任务执行完成后,会检查微任务队列,如果队列中有任务,就会依次取出任务执行,直到队列为空。注意,微任务的执行时机是在当前宏任务执行结束后,下一个宏任务开始之前,也就是说微任务的执行优先级高于宏任务。

同步和异步事件举例

举例1:

console.log('Start');
setTimeout(() => console.log('Timeout'), 0);
Promise.resolve().then(() => console.log('Promise'));
console.log('End');

    上方代码输出顺序:

Start
End
Promise
Timeout

在这里插入图片描述
举例2:

console.log('Start');
setTimeout(() => console.log('Timeout'), 0);
Promise.resolve().then(() => console.log('Promise'));
console.log('End');
setTimeout(() => console.log('Timeout 2'), 0);
Promise.resolve().then(() => console.log('Promise 2'));

    上方代码输出顺序:

Start
End
Promise
Promise 2
Timeout
Timeout 2

在这里插入图片描述

总结

总结一下,当 JavaScript 引擎执行代码时,先执行同步任务,执行完同步任务后,再开始执行异步任务,异步任务分宏任务微任务,如果遇到了宏任务,会将它放到宏任务队列中等待执行;如果遇到了微任务,会将它放到微任务队列中等待执行。当主线程执行完当前任务后,会先执行微任务队列中的任务,直到微任务队列为空,再去执行宏任务队列中的任务,直到宏任务队列为空。这样就保证了异步任务的执行顺序和及时性,避免了可能出现的竞态条件和阻塞情况。


参考文章:
参考①:js微宏任务https://www.jb51.net/article/271092.htm


不足的地方请指教~

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

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

相关文章

SpringBoot+beetl idea热更新解决方案

SpringBootbeetl idea热更新解决方案 第一在application中开启: beetl:resource-auto-check: true #热加载beetl模板,开发时候用第二在application中开启: devtools: 这个部分专门用于配置Spring Boot DevTools的相关参数。DevTools…

Centos8中yum安装docker问题

问题:执行yum update 报错 problem with installed package containers-common-2:1-2.module_el8.5.08906b136101.noarch 执行下面的containerd.io版本安装即可 yum install https://download.docker.com/linux/centos/8/x86_64/stable/Packages/containerd.io-1.…

Java SE入门及基础(23)

目录 方法带参 1. 构造方法带参 案例场景 思考:以上代码存在什么问题? 2. 方法带参 方法带参语法 案例场景 思考:以上代码存在什么问题? Java SE文章参考:Java SE入门及基础知识合集-CSDN博客 方法带参 1. 构造方法带参 …

十八周周报

文章目录 摘要文献阅读3D reconstruction of human bodies from single-view and multi-view images: A systematic review简介研究方法搜索策略选择标准搜索结果 三维重建方法单个视图中使用的技术基于参数化人体模型的回归基于非参数人体模型的回归 多个视图中使用的技术基于…

base64图片是什么?原理是什么?优缺点是什么?

Base64图片是一种将图像数据编码为文本字符串的方法,通常用于将图像嵌入到网页或其他文档中,以减少HTTP请求或实现某些特定的需求。Base64编码的原理是将3个8位的字节转化为4个6位的字节,然后在6位的前面补两个0,形成8位一个字节的…

PaddleNLP评论观点抽取和属性级情感分析

项目地址:PaddleNLP评论观点抽取和属性级情感分析 - 飞桨AI Studio星河社区 (baidu.com) 情感分析旨在对带有情感色彩的主观性文本进行分析、处理、归纳和推理,其广泛应用于消费决策、舆情分析、个性化推荐等领域,具有很高的商业价值。 依托…

C#,因数分解(质因子分解)Pollard‘s Rho算法的源代码

因数分解(也称为质因子分解):将一个大整数分解它的质因子之乘积的算法。 Pollard Rho算法的基本思路:先判断当前数是否是素数(质数),如果是,则直接返回。如果不是,继续找…

11、Kafka ------ Kafka 核心API 及 生产者API 讲解

目录 Kafka核心API 及 生产者API讲解★ Kafka的核心APIKafka包含如下5类核心API: ★ 生产者APIKafka 的API 文档 ★ 使用生产者API发送消息 Kafka核心API 及 生产者API讲解 官方文档 ★ Kafka的核心API Kafka包含如下5类核心API: Producer API&#x…

spring data mongo 在事务中,无法自动创建collection

spring data mongo 在事务中,无法自动创建collection org.springframework.dao.DataIntegrityViolationException: Write operation error on server xxx:30001. Write error: WriteError{code=263, message=Cannot create namespace xxx.xxxin multi-document transaction.…

Ubuntu18.04 gcc找不到

make报错gcc: not found 问题描述 rootubuntu:/#make gcc -I. -I.. -I../include -fPIC -DOPENSSL_PIC -DZLIB_SHARED -DZLIB -DOPENSSL_THREADS -D_REENTRANT -DDSO_DLFCN -DHAVE_DLFCN_H -m64 -DL_ENDIAN -DTERMIO -O3 -Wall -DOPENSSL_IA32_SSE2 -DOPENSSL_BN_ASM_MONT -…

Redis(四)

1、Redis的单/多线程 1.1、单线程 其实直接说Redis什么单线程或者是多线程,不太准确,在redis的4.0版主之前是单线程,然后在之后的版本中redis的渐渐改为多线程。 Redis是单线程主要是指Redis的网络IO和键值对读写是由一个线程来完成的&#…

小白水平理解面试经典题目LeetCode 125 Valid Palindrome(验证回文串)

125 验证回文串 说到公司面试,那就是得考出高度,考出水平,什么兼顾这两者呢,那就得看这道 原题描述: 给定一个字符串,判断它是否是回文串。回文串是指正读和反读都一样的字符串。 输入: “A man, a pla…

超级弱口令检查工具

工具介绍 超级弱口令检查工具是一款Windows平台的弱口令审计工具,支持批量多线程检查,可快速发现弱密码、弱口令账号,密码支持和用户名结合进行检查,大大提高成功率,支持自定义服务端口和字典。 工具采用C#开发&#…

1.19(232.用栈实现队列)

1.19(232.用栈实现队列) 在push数据的时候,只要数据放进输入栈就好,但在pop的时候,操作就复杂一些,输出栈如果为空,就把进栈数据全部导入进来(注意是全部导入),再从出栈弹出数据&a…

QList应用大全

一.概述 1.QList介绍: QList将项目存储在一个列表中,该列表提供基于索引的快速访问以及基于索引的插入和删除。QList、QLinkedList 和 QVector 提供了类似的 API 和功能。QList不是指针结构体类型的链表,真正的结构体指针链表是 QLinkedLis…

unity-声音与声效OLD

声音与声效 基本概念audio clipaudio listeneraudio source 基本操作如何创建音频源(背景音乐)如何在测试的时候关闭声音 常用代码一般流程如何在一个物体上播放多个音效如何在代码中延时播放多个声音如何在代码中停止音频的播放如何判断当前是否在播放音…

福昕软件的使用

快捷操作 快捷键 快捷键功能备注Ctrl P打印 Ctrl W关闭 Ctrl B书签 鼠标放菜单栏,单击右键即可导入/导出 自定义菜单栏文件-->偏好设置-->文档 1、多实例:单击PDF后均重新打开一个新界面。

算法训练 day25 | 216.组合总和III 17.电话号码的字母组合

216.组合总和III 题目链接:组合总和III 视频讲解:和组合问题有啥区别?回溯算法如何剪枝? 本题和77.组合其实是差不多的,只是增加了求和的过程。对于剪枝,也要多加一步判断,当所求得和大于规定的和时应该舍去。其他部…

多账号批量管理—如何解决账号关联和账号封禁?

在当今的数字时代,拥有多个账号已经成为许多人处理个人和商业事务的常见需求。然而,账号关联和账号封禁等问题常常困扰着用户。幸运的是,有一种多账号管理神器可以帮助解决这些问题。在本文中,我们将介绍这个神器如何帮助人们批量…

MySQL中SELECT字句的顺序以及具体使用

目录 1.SELECT字句及其顺序 2.使用方法举例 3.HAVING和WHERE 1.SELECT字句及其顺序 *下表来自于图灵程序设计丛书,数据库系列——《SQL必知必会》 2.使用方法举例 *题目来源于牛客网 题目描述 现在运营想要查看不同大学的用户平均发帖情况,并期望结…