WeakMap 和 Map 的区别,WeakMap 原理,为什么能被 GC?

news2024/10/5 17:51:43

垃圾回收机制

我们知道,程序运行中会有一些垃圾数据不再使用,需要及时释放出去,如果我们没有及时释放,这就是内存泄露

JS 中的垃圾数据都是由垃圾回收(Garbage Collection,缩写为 GC)器自动回收的,不需要手动释放,它是如何做的呢?

很简单,JS 引擎中有一个后台进程称为垃圾回收器,它监视所有对象,观察对象是否可被访问,然后按照固定的时间间隔周期性的删除掉那些不可访问的对象即可

现在各大浏览器通常用采用的垃圾回收有两种方法:

  • 引用计数
  • 标记清除

引用计数

最早最简单的垃圾回收机制,就是给一个占用物理空间的对象附加一个引用计数器,当有其它对象引用这个对象时,这个对象的引用计数加一,反之解除时就减一,当该对象引用计数为 0 时就会被回收。

该方式很简单,但会引起内存泄漏:

// 循环引用的问题
function temp(){
    var a={};
    var b={};
    a.o = b;
    b.o = a;
}

这种情况下每次调用 temp 函数,a 和 b 的引用计数都是 2 ,会使这部分内存永远不会被释放,即内存泄漏。现在已经很少使用了,只有低版本的 IE 使用这种方式。

标记清除

V8 中主垃圾回收器就采用标记清除法进行垃圾回收。主要流程如下:

  • 标记:遍历调用栈,看老生代区域堆中的对象是否被引用,被引用的对象标记为活动对象,没有被引用的对象(待清理)标记为垃圾数据。
  • 垃圾清理:将所有垃圾数据清理掉

在我们的开发过程中,如果我们想要让垃圾回收器回收某一对象,就将对象的引用直接设置为 null

var a = {}; // {} 可访问,a 是其引用

a = null; // 引用设置为 null
// {} 将会被从内存里清理出去

但如果一个对象被多次引用时,例如作为另一对象的键、值或子元素时,将该对象引用设置为 null 时,该对象是不会被回收的,依然存在

var a = {}; 
var arr = [a];

a = null; 
console.log(arr)
// [{}]

如果作为 Map 的键呢?

var a = {}; 
var map = new Map();
map.set(a, '小芳学前端')

a = null; 
console.log(map.keys()) // MapIterator {{}}
console.log(map.values()) // MapIterator {"小芳学前端"}

很明显,该对象没有被回收,如果想让 a 置为 null 时,该对象被回收,该怎么做呢?

WeakMap vs Map

ES6 考虑到了这一点,推出了: WeakMap 。它对于值的引用都是不计入垃圾回收机制的,所以名字里面才会有一个"Weak",表示这是弱引用(对对象的弱引用是指当该对象应该被GC回收时不会阻止GC的回收行为)。

Map 相对于 WeakMap :

  • Map 的键可以是任意类型,WeakMap 只接受对象作为键(null除外),不接受其他类型的值作为键
  • Map 的键实际上是跟内存地址绑定的,只要内存地址不一样,就视为两个键; WeakMap 的键是弱引用,键所指向的对象可以被垃圾回收,此时键是无效的
  • Map 可以被遍历, WeakMap 不能被遍历

下面以 WeakMap 为例,看看它是怎么上面问题的:

var a = {}; 
var map = new WeakMap();
map.set(a, '小芳学前端')
map.get(a)

a = null; 

上例并不能看出什么?我们通过 process.memoryUsage 测试一下:

创建一个map.js文件,内容如下:

//map.js
global.gc(); // 0 每次查询内存都先执行gc()再memoryUsage(),是为了确保垃圾回收,保证获取的内存使用状态准确

function usedSize() {
    const used = process.memoryUsage().heapUsed;
    return Math.round((used / 1024 / 1024) * 100) / 100 + "M";
}

console.log(usedSize()); // 1 初始状态,执行gc()和memoryUsage()以后,heapUsed 值为 1.64M

var map = new Map();
var b = new Array(5 * 1024 * 1024);

map.set(b, 1);

global.gc();
console.log(usedSize()); // 2 在 Map 中加入元素b,为一个 5*1024*1024 的数组后,heapUsed为41.82M左右

b = null;
global.gc();

console.log(usedSize()); // 3 将b置为空以后,heapUsed 仍为41.82M,说明Map中的那个长度为5*1024*1024的数组依然存在

在当前map.js文件目录执行 node --expose-gc map.js 命令:

其中,--expose-gc 参数表示允许手动执行垃圾回收机制

再创建一个weakmap.js文件,如下:

// weakmap.js
function usedSize() {
    const used = process.memoryUsage().heapUsed;
    return Math.round((used / 1024 / 1024) * 100) / 100 + "M";
}

global.gc(); // 0 每次查询内存都先执行gc()再memoryUsage(),是为了确保垃圾回收,保证获取的内存使用状态准确
console.log(usedSize()); // 1 初始状态,执行gc()和 memoryUsage()以后,heapUsed 值为 1.64M
var map = new WeakMap();
var b = new Array(5 * 1024 * 1024);

map.set(b, 1);

global.gc();
console.log(usedSize()); // 2 在 Map 中加入元素b,为一个 5*1024*1024 的数组后,heapUsed为41.82M左右

b = null;
global.gc();

console.log(usedSize()); // 3 将b置为空以后,heapUsed 变成了1.82M左右,说明WeakMap中的那个长度为5*1024*1024的数组被销毁了

执行 node --expose-gc weakmap.js 命令:

上面代码中,只要外部的引用消失,WeakMap 内部的引用,就会自动被垃圾回收清除。由此可见,有了它的帮助,解决内存泄漏就会简单很多。

最后看一下 WeakMap

WeakMap

WeakMap 对象是一组键值对的集合,其中的键是弱引用对象,而值可以是任意

注意,WeakMap 弱引用的只是键名,而不是键值。键值依然是正常引用。

WeakMap 中,每个键对自己所引用对象的引用都是弱引用,在没有其他引用和该键引用同一对象,这个对象将会被垃圾回收(相应的key则变成无效的),所以,WeakMap 的 key 是不可枚举的。

属性:

  • constructor:构造函数

方法:

  • has(key):判断是否有 key 关联对象
  • get(key):返回key关联对象(没有则则返回 undefined)
  • set(key):设置一组key关联对象
  • delete(key):移除 key 的关联对象
let myElement = document.getElementById('logo');
let myWeakmap = new WeakMap();

myWeakmap.set(myElement, {timesClicked: 0});

myElement.addEventListener('click', function() {
  let logoData = myWeakmap.get(myElement);
  logoData.timesClicked++;
}, false);

除了 WeakMap 还有 WeakSet 都是弱引用,可以被垃圾回收机制回收,可以用来保存DOM节点,不容易造成内存泄漏

参考

你不知道的 WeakMap

 添加好友备注【进阶学习】拉你进技术交流群

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

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

相关文章

MyBatis的基本使用及常见问题

MyBatis 前言MyBatis简介MyBatis快速上手Mapper代理开发增删改查环境准备配置文件完成增删改查查询添加修改删除 参数传递注解完成增删改查 前言 JavaWeb JavaWeb是用Java技术来解决相关Web互联网领域的技术栈。 MySQL数据库与SQL语言 MySQL:开源的中小型数据库。…

【银行测试】金融银行-理财项目面试/分析总结(二)

目录:导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结(尾部小惊喜) 前言 银行理财相关的项…

【温故而知新】vue运用之探讨下单页面应用(SPA)与多页面应用(MPA)

一、概念 1.单页面应用SPA(Single page application) Vue单页面应用是一种采用Vue.js框架开发的Web应用程序,它仅有一个HTML文件,通过前端路由实现页面的切换和渲染。与传统的多页面应用相比,Vue单页面应用在用户体验和开发效率方面有着明显的优势。 在Vue单页面应用中…

winsock.h与winsock2.h出现重定义或不同的链接 问题解决

在编译qt windows项目时出现错误 方法&#xff11;&#xff1a; 在pro文件中添加宏 DEFINES WIN32_LEAN_AND_MEAN方法&#xff12;&#xff1a; 在使用了包含头文件前#include<windows.h>加上 #include<WinSock2.h>

SpringCloud(H版alibaba)框架开发教程之nacos做配置中心——附源码(2)

上篇主要讲了使用eureka&#xff0c;zk&#xff0c;nacos当注册中心 这篇内容是nacos配置中心 代码改动部分mysql驱动更新到8.0&#xff0c;数据库版本升级到了8.0&#xff0c;nacos版本更新到了2.x nacos2.x链接 链接&#xff1a;https://pan.baidu.com/s/11nObzgTjWisAfOp…

JMeter逻辑控制器之While控制器

JMeter逻辑控制器之While控制器 1. 背景2.目的3. 介绍4.While示例4.1 添加While控制器4.2 While控制器面板4.3 While控制器添加请求4.3 While控制器应用场景 1. 背景 存在一些使用场景&#xff0c;比如&#xff1a;某个请求必须等待上一个请求正确响应后才能开始执行。或者&…

Android Studio修改创建新布局时默认根布局

将Android Studio默认布局ConstraintLayout切换成LinearLayout 打开设置&#xff0c; Editor> File and Code Templates > Other > layoutResourceFile.xml 备注&#xff1a;创建时提示根布局仍然为ConstraintLayout&#xff0c;不用管这个&#xff0c;实际创建的…

NXP实战笔记(一):基于RTD-SDK新建一个S32DS工程

目录 1、概述 2、操作步骤 2.1、新建Application工程 2.2、命名工程、选择芯片型号、选择编译器GCC版本 2.3、配置基本参数 3、文件描述 3.1、文件结构描述 3.2、编译之后 4、下载调试 1、概述 安装了S32DS之后&#xff0c;导入SDK插件&#xff0c;这个步骤不赘述&…

免费的数据恢复软件哪个好?这10个数据恢复软件可以试试

如果你遇到了数据丢失的情况&#xff0c;不要着急&#xff0c;今天我来教大家如何恢复。 在遇到电脑、硬盘或U盘等设备中数据丢失情况时&#xff0c;很多朋友都会很着急也不知道该怎么办。如果是数据恢复小白&#xff0c;建议大家优先选择使用数据恢复软件进行扫描恢复。现在市…

读取GNSS站点的o文件获取经纬度和高程

0. 码字不易&#xff0c;点赞加关注&#xff08;公众号&#xff1a;WZZHHH&#xff0c;部分资料在公众号可以下载&#xff09;&#xff0c;使用请注明出处。 0.1详细代码在最后获取 1.我处理2020年和2021年陆态网的数据&#xff0c;这两年总共有哪些站点俺不知道。 2.在利用ER…

Milvus数据一致性介绍及选择方法

1、Milvus 时钟机制 Milvus 通过时间戳水印来保障读链路的一致性&#xff0c;如下图所示&#xff0c;在往消息队列插入数据时&#xff0c; Milvus 不光会为这些插入记录打上时间戳&#xff0c;还会不间断地插入同步时间戳&#xff0c;以图中同步时间戳 syncTs1 为例&#xff0…

elasticsearch系列六:索引重建

概述 我们再起初创建索引的时候由于数据量、业务增长量都并不大&#xff0c;常常不需要搞那么多分片或者说某些字段的类型随着业务的变化&#xff0c;已经不太满足未来需求了&#xff0c;再或者由于集群上面索引分布不均匀导致节点直接容量差异较大等等这些情况&#xff0c;此时…

第十一章 Stream消息驱动

Stream消息驱动 gitee:springcloud_study: springcloud&#xff1a;服务集群、注册中心、配置中心&#xff08;热更新&#xff09;、服务网关&#xff08;校验、路由、负载均衡&#xff09;、分布式缓存、分布式搜索、消息队列&#xff08;异步通信&#xff09;、数据库集群、…

最优化方法Python计算:无约束优化应用——逻辑回归模型

S型函数 sigmoid ( x ) 1 1 e − x \text{sigmoid}(x)\frac{1}{1e^{-x}} sigmoid(x)1e−x1​将全体实数 R \text{R} R映射到 ( 0 , 1 ) (0,1) (0,1)&#xff0c;称为逻辑函数。其图像为 该函数连续、有界、单调、可微&#xff0c;性质量好。拟合函数为 F ( w ; x ) sigmoi…

localsec.dll缺少怎么办?localsec.dll文件下载,一键修复

看到很多小伙伴都在问&#xff0c;自己的电脑&#xff0c;在启动游戏或某些软件的时候&#xff0c;Windows会弹出系统错误提示框&#xff0c;称一个名为“localsec.dll的文件丢失了&#xff0c;造成错误&#xff0c;可尝试重新安装程序&#xff0c;以解决问题”。 根据错误提示…

如何使用Redis实现抢红包功能

【内容摘要】 在这篇文章中&#xff0c;我们将探讨如何使用Redis来设计和实现一个抢红包的业务场景。从业务场景、需求分析、技术选型、代码实现&#xff0c;痛点问题等进行多维分析和思考。 【业务场景】 下面引入一个实际的使用案例&#xff0c;如微信群中常用的红包功能。…

计算机网络复习2

物理层 文章目录 物理层通讯基础奈奎斯特定理香农定理编码与调制交换传输介质&#xff08;了解&#xff09;物理层设备 通讯基础 数据信号码元信源信道信宿单工通道&#xff1a;只有一个方向半双工通道&#xff1a;不能同时发送和接收全双工通道 奈奎斯特定理 规定&#xff…

裕泰微YT8521SH PHY芯片在uboot下的代码适配(二)

裕泰微YT8521SH PHY芯片在uboot下的代码适配&#xff08;一&#xff09; 文章目录 代码搜索移植步骤具体代码备注 本文主要是介绍uboot下的适配代码来源和具体修改。 代码搜索 https://github.com/starfive-tech/u-boot/blob/JH7110_VisionFive2_devel/drivers/net/phy/motorc…

Linux中的gcc\g++使用

文章目录 gcc\g的使用预处理编译汇编链接函数库gcc选项 gcc\g的使用 这里我们需要知道gcc和g实际上是对应的c语言和c编译器&#xff0c;而其他的Java&#xff08;半解释型&#xff09;&#xff0c;PHP&#xff0c;Python等语言实际上是解释型语言&#xff0c;因此我们经常能听…

Ps:混合颜色带 - 基础篇

混合颜色带 Blend If是“图层样式”对话框中的一个高级功能&#xff0c;允许根据下方图层或当前图层的色彩信息来混合图层&#xff0c;无需进行复杂的选区或蒙版操作。 混合颜色带是基于亮度&#xff08;灰色&#xff09;或颜色通道的特定范围来显示或隐藏图层的特定区域。 “当…