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事件循环,只要主线程空了,就会去读取"任务队列"。这个过程会不断重复。

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

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

相关文章

vue 模板字符串

1.模板字符串换行问题 white-space: pre-wrap; 2. 鼠标移入 显示提示框 点击手动隐藏 myChart.on("mouseover", function (params) {myChart.dispatchAction({type: "downplay",}); }); tooltip: {show: true, //是否显示提示框组件,包括…

安卓获取SHA

1:安卓通过签名key获取SHA 方式有两种, 1、电脑上来存在eclipse的用户或正在使用此开发工具的用户就简单了,直接利用eclipse 走打包流程,再打包的时候选择相应的签名,那么在当前面板的下面便会出现签名的相关信息。 2、…

牛客热题:合并K个升序链表

📟作者主页:慢热的陕西人 🌴专栏链接:力扣刷题日记 📣欢迎各位大佬👍点赞🔥关注🚓收藏,🍉留言 文章目录 牛客热题:合并K个升序链表题目链接&#…

【刷题篇】动态规划-完全背包问题(十一)

文章目录 1、完全背包2、零钱兑换3、零钱兑换 II4、完全平方数 1、完全背包 #include <iostream> #include<vector> using namespace std;int main() {int n,v;cin>>n>>v;vector<int> V(n1);vector<int> W(n1);for(int i1;i<n;i){cin&g…

【消息队列】延迟消息

延时消息 延迟消息死信交换机延迟消息的插件 延迟消息 生产者发送消息时指定一个时间&#xff0c;消费者不会立刻收到消息&#xff0c;而在指定时间之后才收到消息 比如说演唱会的票&#xff0c;抢上了但是迟迟未支付&#xff0c;但是库存已经占用&#xff0c;就需要用到延迟消…

【STM32】F405/407的模块总览图,记录查看

从STM32F405/407数据手册中提取&#xff0c;方便以后查看。主要是什么外设连接在什么总线上&#xff0c;时钟频率是多少。 TIM2、3、4、5、12、13、14在APB1上&#xff0c;最大频率84M TIM1、8、9、10、11在APB2上&#xff0c;最大频率168M

WEB攻防-PHP特性-piwigoCMS审计实例

前置知识&#xff1a;PHP函数缺陷 测试环境 &#xff1a;piwigo CMS 漏洞URL&#xff1a; 漏洞文件位置&#xff1a;\include \functions_rate.inc.php 漏洞产生入口文件&#xff1a;/picture.php picture.php中接受了一个GET方法action参数&#xff0c;作为switch...case.…

架设WebSocket的最后一环,如何设置好nginx反向代理

WebScoket都已经完工快一个月&#xff0c;经过一段时间的测试&#xff0c;公司还是准备把服务器换到鹅厂&#xff0c;用EO来解决CDN内容分发和DDOS防护问题&#xff0c;由于EO并不支持URL 路径转发&#xff0c;只支持转发到一个站点的80或则443端口&#xff0c;如果想做路径分发…

Python urllib 爬虫入门(2)

本文为Python urllib类库爬虫更入门的一些操作和爬虫实例及源码。 目录 模拟浏览器请求 简单模拟 设置随机user-agent 请求超时 HTTP请求类型 Get请求 Post请求 抓取网页动态请求 封装ajax请求 调用 循环调用 抓取小说 封装请求函数 把html写入本地分析 调用 正…

Arthas进阶

这里写自定义目录标题 六、class和classloader6、dump7、classloader 七、monitor/watch/trace/stack等核心命令的使用1、monitor2、watch3、trace4、stack5、tt6、option7、profiler 六、class和classloader 6、dump 将已加载类的字节码文件保存到特定目录&#xff1a;logs/…

【IR 论文】HyDE:让 LLM 对 query 做查询改写来改进 Dense Retrieval

论文&#xff1a;Precise Zero-Shot Dense Retrieval without Relevance Labels ⭐⭐⭐⭐ CMU, ACL 2023, arXiv:2212.10496 Code: github.com/texttron/hyde 文章目录 论文速读总结 论文速读 在以往的 dense retrieval 思路中&#xff0c;需要对 input query 做 encode 来得到…

C语言【动态内存】

1.为什么要有动态内存 我们现在掌握的内存开辟方法有&#xff1a; int val 20;//在栈空间开辟4个字节 char str[10]{0};//在栈空间开辟10个字节的连续的空间但是上述的方式有两个点要注意&#xff1a; 1.空间开辟的大小是固定的 2.数组在申明的时候&#xff0c;一定要指定数…

格雷希尔E10系列大电流测试连接器,在新能源汽车大电流接插件的电气测试方案

在新能源汽车的电驱动、电池包等设备的电测试处理中&#xff0c;格雷希尔E10系列电测试连接器具有显著的优势。E10系列的核心设计——插孔/插针&#xff0c;可以达到实验室10万次的插拔寿命&#xff0c;相比传统公母电接头500次左右的连接寿命&#xff0c;E10系列无疑大大减少测…

Golang错误处理机制

文章目录 Golang错误处理机制panic异常recover捕获异常自定义错误 Golang错误处理机制 panic异常 panic异常 Go的类型系统会在编译时捕获很多错误&#xff0c;但有些错误只能在运行时检查&#xff0c;比如除零错误、数组访问越界、空指针引用等&#xff0c;这些运行时错误会引…

实验15 MVC

二、实验项目内容&#xff08;实验题目&#xff09; 编写代码&#xff0c;掌握MVC的用法。 三、源代码以及执行结果截图&#xff1a; inputMenu.jsp&#xff1a; <% page contentType"text/html" %> <% page pageEncoding "utf-8" %> &…

day15 学一下Tailwindcss(java转ts全栈/3r教室)

目前距离全栈差得最多的是前端&#xff0c;而对于前端主要是CSS一直不熟悉&#xff0c;觉得很复杂写起来总是不上道&#xff0c;所以特别关注下Tailwindcss吧&#xff0c;其他前端框架可以先放放&#xff0c;多说无益直接用tailwindcss做个页面试试 看下文档&#xff1a;Tailwi…

【统计推断】-01 抽样原理之(四):中心极限定律

文章目录 一、说明二、样本均值的抽样分布三、两个重要公理四、中心极限定理4.1 定义4.2 中心极限定理的特点4.3 中心极限定理的条件 五、一个举例5.1 一个连续分布示例5.2 样本容量变化的对比 六、结论 关键词&#xff1a;    Central Limit Theorem    Law of Large Numb…

linux部署java1.8(java17)

两种方式&#xff1a; 方式一 1.输入查找命令&#xff1a; yum -y list java*2.输入安装命令&#xff1a; yum install -y java-1.8.0-openjdk.x86_643.测试是否已经安装&#xff1a; java -version方式二&#xff1a; 点击链接进入官网&#xff1a;https://www.oracle.com/…

mysql-sql练习-5-行列互转

目录 成绩单 简单互转 需求 多行转多列 分组 判断 聚合 理解 分组 合并 逆向需求 多列转多行 输出 合并 abc 去重 合并 拆分 需求 建表 多行转多列 逆向需求 多列转多行 拆分 按长度 拆分 按个数 成绩单 简单互转 需求 多行转多列 分组 判断 聚合 with tmp as(--…

3.电源模块趋旺盛,铁路最需可靠性

电源模块趋旺盛&#xff0c;铁路最需可靠性 电源设计需要很高的专业技能。越来越多的电子设备制造商开始采用电源模块来加快设计周期。通信、铁路、电力和军工领域&#xff0c;对电源模块需求越来越旺盛。 通信网络基建设备市场潜力巨大。应市场要求&#xff0c;现代的通信系…