JavaScript底层原理(栈、堆、主线程、任务队列、事件循环机制)

1. 栈(heap)和堆(stack)

栈是栈内存的简称,堆是堆内存的简称。顾名思义,内存是干啥的?内存就是用来存放数据的。

栈只有一个入口,同时也是出口,数据遵循先进后出、后进先出的原则。
栈用于存放基本类型数据和引用类型数据的指针,基本数据类型包含number,string,boolean,null,undefined,symbol,bigint等结构简单的数据,指针就是对象的地址而不是对象本身。因为栈中储存的数据结构简单,所以存储速度就会很快。

堆用于存放引用类型的数据,引用类型数据包含对象、数组、函数、Date等等,引用数据类型比较复杂,涉及原型、嵌套、方法等等。我们将引用类型数据赋值给变量a的时候,实际上复制的是引用类型的指针(地址),并不是复制的值,他们在内存中还是指向同一个数据源,所以当我们修改这个变量a的时候,我们的数据源也会随之发生变化。

2. 主线程和任务队列

背景

JavaScript是一门单线程语言,单线程意味着所有的任务都需要排队,只有前一个任务执行完成之后,才能执行下一个任务。

这种情况显然是不合理的,比如说我触发一个30秒的延时器,延时器被挂起就阻塞了主线程,导致浏览器CPU空闲且无法执行其他任务。所以这些阻塞进程的任务就被存放在任务队列(分线程)中。

同步任务和异步任务

于是js中的任务被分为了两种,一种是同步任务,另外一种是异步任务。

  • 同步任务(synchronous)指的是,在主线程上,排队执行的任务,只有前一个任务执行完毕,才能执行后一个任务。比如:普通函数、new Promise()、console.log()等等
  • 异步任务(asynchronous)指的是,不进入主线程,而进入“任务队列”(task queue)的任务,只有“任务队列”通知主线程,某个异步任务可以执行了,该任务才会进入主线程执行。比如:DOM 事件回调、定时器回调、网络请求的回调、promise.then()、promise.catch()的回调。

宏任务和微任务

异步任务又分为宏任务和微任务

  • 宏列队 macrotask queue:用来保存待执行的宏任务(回调),比如:DOM 事件回调、定时器回调、网络请求的回调
  • 微列队 microtask queue:用来保存待执行的微任务(回调),优先级高于宏任务,比如:promise.then()、promise.catch()的回调、MutationObserver 、queueMiscrotask()的回调

参考:JavaScript的堆、栈、队列、事件循环机制_js 哪些是栈和队列-CSDN博客

 3. 事件循环机制

因为js引擎存在monitoring process进程,会持续不断的检查主线程执行栈是否为空,一旦为空,就会去Event Queue那里检查是否有等待被调用的函数

整体会把所有代码分为两个部分:‘同步任务’,‘异步任务’

所有同步任务都在主线程上执行,形成一个执行栈

主线程之外还存在一个任务队列,专门存放异步任务(宏任务和微任务)

  • 宏任务进入到事件表(Event Table)中,并在里面注册回调函数,每当指定的事件完成时,Event Table会将这个函数移到事件队列(Event Queue)中
  • 微任务也会进入到另一个事件表(Event Table)中,并在里面注册回调函数,每当指定的事件完成时,事件表(Event Table)会将这个函数移到事件队列(Event Queue)中
  • 整体script作为第一个宏任务进入主线程,当主线程的任务执行完毕,主线程为空时,会检查微任务的事件队列(Event Queue),如果有任务,就会全部执行,如果没有就执行下一个宏任务
  • 主线程不断重复上面的步骤,这就是Event Loop事件循环,只要主线程空了,就会去读取"任务队列"。这个过程会不断重复。

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

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

相关文章

安装库后JupyterLab一直报ModuleNotFoundError问题解决

背景: 先安装的Python3.10,安装在默认路径: C:\Users\#用户名省略#\AppData\Local\Programs\Python\Python310\ 后安装的Anaconda,更改过路径在D盘: D:\ProgramData\anaconda3 此时C盘Python安装路径下Scripts文件…

YAW-100B全自动压力试验机

一、简介 微机控制压力试验机测控系统采用高精度数字伺服阀,具有力闭环控制功能,能够实现等载荷速率加载或等应力速率加载,控制精度高,可靠性好,完全满足GB/T 17617《水泥胶沙强度检验方法(ISO方法&#x…

matlab学习004-使用matlab绘制卷积波形图

目录 1,序列:x(n)u(n-2)-u(n-10),h(n)((0.9)^n)*u(n) 1)前期基础 ①conv函数 ②离散单位阶跃信号 2)波形图 3)代码 ①使用input方法 ②代码改进【推荐使用】 2,信号x(t)2[u(t1)-u(t…

红黑树笔记

2-3树 -> 左倾红黑树 红黑树实际上是2-3树的一种基于BST的实现。普通二叉搜索树(BST)中的每一个节点,只有一个键,两条链接(两个子节点),这种节点被称为2节点。2-3树中,引入了一个…

【智能算法】土拨鼠优化算法(PDO)原理及实现

目录 1.背景2.算法原理2.1算法思想2.2算法过程 3.结果展示4.参考文献 1.背景 2022年,AE Ezugwu等人受到土拨鼠觅食行为与自然行为启发,提出了土拨鼠优化算法(Prairie Dog Optimization algorithm, PDO)。 2.算法原理 2.1算法思…

云服务器搭建XSS-platform、DVWA靶机和Permeate论坛

目录 前言准备环境安装步骤一、 部署MySQL二、 系统部署三、系统安装主页介绍 前言 我发现目前网上的xss-platform的搭建教程都是基于本地搭建的,这样搭建好的xss平台只能在本地使用,无法测试别的网站。而网络上的大部分xss平台又几乎都是收费的&#x…

vue3学习笔记-快速上手

创建第一个vue3的应用 之前看书学习vue,书籍对应的版本是vue2,今天群里看小伙伴聊天,觉得他们说得对 ,反正是从零开始学,而且vue2都不维护了,那为什么不直接学习vue3呢,于是乎,又开启了从0学vue3之路。 参考…

2024Xtu程设第一次练习题解

程设练习题谢大会专门查重 1.1531奇怪的数字 题目让我们从小到大输出1e6以内所有的答案,其实也没什么好的思路 就是将一个数n的所有位都拆出来,遍历这些位(每次取一个x),然后通过作除法(y n / x&#xf…

java多态知识

目录 一、定义 二、注意事项 三、多态的好处 四、多态的弊端以及解决办法 一、定义 多态定义:多态是在继承/实现情况下的一种现象,表现为:对象多态、行为多态。 对象多态:都是同一对象,表现出不同角色,比如小明,…

java:SpringBoot入门

Spring 提供若干子项目,每个项目用于完成特定功能 Spring Boot 可以简化配置并且快速开发 SpringBootWeb快速入门 创建Springboot模块并使用Springweb依赖 在类上添加注解 RestController可以将字符串自动转成json返回数据给页面 再在方法上添加注解 RequestMapping(&…

python应用-socket网络编程(2)

socket 是 Python 标准库中的一个模块,它提供了低级别的网络通信接口。使用 socket 模块,你可以创建客户端和服务器应用程序,以便在网络上进行数据交换。 接着上文我们介绍下socket模块其他的一些函数。 目录 gettimeout() 和settimeout()…

0422empAJAX项目

数据库字段: 多条件查询; 分页查询; 添加图片; ajax离职操作; 删除选项,点击离职操作后仍然可实现删除选项

项目部署总结

1、安装jdk 第一步:上传jdk压缩安装包到服务器 第二步:将压缩安装包解压 tar -xvf jdk-8uXXX-linux-x64.tar.gz 第三步:配置环境变量 编辑/etc/profile文件,在文件末尾添加以下内容: export JAVA_HOME/path/to/j…

鉴权到底做什么

两种方案: 将 token 放在 cookie 里;将 token 放在请求头里,用 Authorization 字段。 无论对于前端还是后端而言,这两种方案都是各有利弊的,下面稍微讲几点,实际开发中根据需求来选用即可。 将 token 放在…

进程控制5 - exit()退出+子进程被收养+僵死进程

我们应当知道的是,在用fork创建子进程后,父子进程的执行的先后顺序是不定的,这时,我们可以用wait函数,wait()会暂停当前进程的执行,直到有信号到来或者子进程结束。总的来说,wait()的作用就是阻…

C语言编译的优化等级应该选哪个?O0、O1、O2还是O3

在使用IDE开发STM32程序时,IDE一般都会提供优化等级设置的选项,例如下图中KEIL软件优化等级的设置。 从上图中也可以看出,设置不同的优化等级,实际上是修改了编译器的编译参数。这个编译器是由ARM公司提供的C/C编译器armclang或者…

微信小程序Vue+nodejs+uniapp课堂教学辅助在线学习系统

uni-app框架:使用Vue.js开发跨平台应用的前端框架,编写一套代码,可编译到Android、小程序等平台。 后台主要实现功能:一、用户的管理(用户的信息管理) 二、 课程的管理(课程发布,课后成绩的查看&#xff0c…

DAY 5

1. 2. #include <iostream>using namespace std; class Person {string name;int *age;public:Person():name("zhangsan"),age(new int (18)){cout << "Person的无参函数" << endl;}Person(string name,int *age):name("zhangsan&q…

水稻病害检测(YOLO数据集,多分类,稻瘟病、纹枯病、褐斑病、枯心病、霜霉病、水稻细菌性条纹斑病、稻苞虫)

是自己利用LabelImg工具进行手工标注&#xff0c;数据集制作不易&#xff0c;请尊重版权&#xff08;稻瘟病、纹枯病、褐斑病、枯心病、霜霉病、水稻细菌性条纹斑病、稻苞虫&#xff09; 如果需要yolv8检测模型和数据集放在一起的压缩包&#xff0c;可以关注&#xff1a;最新最…

聊聊Flink:Docker搭建Flink

一、准备工作 查看下Docker和Docker Compose版本&#xff0c;确保你安装了这些软件。 在 Flink 官网上下载 Flink 的 Docker 镜像。您可以使用以下命令从 Docker Hub 中下载&#xff1a; docker pull flink:1.18.0-scala_2.12 此命令将下载 Flink 1.18.0 版本的 Docker 镜像…