JavaScript 内存泄漏

news2024/11/23 15:04:08

内存的释放流程:

  1. 分配内存
  2. 内存中的读写
  3. 垃圾回收

对于内存的使用,所有语言基本都是一样的,只是更底层的语言在对于 ”分配内存“ 和 ”使用内存“ 是明确的,但是在高级语言中(比如本文的 JS)是隐藏了。
JS 中在定义一个变量时,就已经分配好了一个内存;
同时,内部也提供好了垃圾回收的机制,回收那些已经不再使用的内存。

原理:

  • 当我们定义了一个变量后,这个变量就会被垃圾回收机制所标记;
  • 当一次程序执行以后,如果这个变量依然存在引用,则垃圾回收机制会认为:变量还在使用,不能释放
  • 内存泄漏的原因:程序任务一个变量已经没用了,可是垃圾回收机制认为他还在使用,从而导致这段内存无法释放。
    • 这里需要注意的是:是程序对这段内存失去了控制权。
    • 内存突然暴增,并不是内存泄漏。

请添加图片描述

上图中,我录制了一个最基础的内存使用:在百度中(input)输入文字,触发高频 change 事件:
在这里插入图片描述

于是我们得到了上图中的这条监听内存的曲线:

  • 这条蓝色的线条中,我用黄色色圈出来的部分是手动清理了内存后,内存骤降的两个时机
  • 黄色圈出来的部分是指程序中,在我操作前后内存的变化,可以看到这里录制前后(停止输入后)内存的使用并没有多出来内存,说明这里的 GC 后内存的控制在程序可掌控的范围内。

以上就是一个简单的内存完整释放的例子。

那么有哪些场景容易造成内存泄露呢?

一、全局变量

请添加图片描述

分析上图,我们在给 window 变量设置了十万个属性,在这个全局变量下的内存是不会被垃圾回收的,这里多出来的那一步分内存就是程序失去对这些变量控制权的部分:
在这里插入图片描述
所以意外的全局变量泄露

二、console.log()

请添加图片描述
上图执行一段打印逻辑;

将上述结果放大后,可以清晰的看到,两次清理 GC 后,内存得到了一定的释放,但是有超出的那一部分内存造成了内存泄漏:
在这里插入图片描述
console.log 也是全局变量

这也是为什么,生产环境中都会要求删除 console 的原因了
当然,让客户看到 console 丢人也是一个原因

三、闭包

闭包本身并不会造成内存泄漏,没有控制好闭包的使用,导致变量的引用无法被回收才是闭包导致内存泄漏的原因。

请添加图片描述

直接看两次清除 GC 后的情况:在这里插入图片描述
可以看到第二次清除 GC 后,依然有一部分内存没有得到释放,这部分就是闭包引用导致的内存泄漏。
而常规的闭包引用的函数执行并不会造成内存泄漏。

四、Dom 泄漏

现代的前端框架几乎都不推荐直接操作 dom 了,因为 dom 也是对象,创建的 dom 对象在被使用后,没有及时清理掉也会造成一定程度的内存泄漏。

总结

所谓内存泄漏就是程序执行完了,本该随着程序执行结束而被释放的内存由于有着引用关系而未得到释放导致的内存占用问题。

小结一下防止内存泄漏的几个方面:

  1. 清除不必要的引用
  2. 尽量不要定义全局变量(比如减少 var 操作符的使用)
  3. 提交代码前删除 console

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

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

相关文章

『python爬虫』05. requests模块入门(保姆级图文)

目录 安装requests1. 抓取搜狗搜索内容 requests.get2. 抓取百度翻译数据 requests.post3. 豆瓣电影喜剧榜首爬取4. 关于请求头和关闭request连接总结 欢迎关注 『python爬虫』 专栏,持续更新中 欢迎关注 『python爬虫』 专栏,持续更新中 安装requests …

Spring 中的顺序问题(别迟疑就是你想知道的顺序问题)

Spring 中的一些顺序问题 Spring 中的顺序问题并不是不重要,比如多个 BeanFactoryPostProcessor如何知道先执行哪一个;为什么自定义的 Bean 可以覆盖默认的自动装配的 Bean;AOP 拦截器链中拦截器的顺序是如何确定的等等问题。 相信看完这篇…

(数学知识)试除法判断质数,分解质因数,埃式与线性筛质数

质数 质数是指在大于1的自然数中,除了1和它本身以外不再有其他因数的自然数。 试除法判定质数 你会发现如果说一个数要分成两个数相乘的话,那么这两个数肯定都是成对出现的,有一大一小的相对关系。因此不需要从2遍历到n,循环的…

AI智能课程:第七讲-不会写代码?有chatGPT不用慌

chatGPT辅助自动化测试-常见用途 根据代码写需求 作为python编程小白,如何安装python环境 ### 怎么用python发送http请求 如何在http请求中,请求头带上token值,怎么发送请求 websrvice协议,用python语言基于websrvice发送请求…

【数据结构】第十三站:排序(下)归并排序

文章目录 一、归并排序递归法1.归并排序的基本思想2.归并排序的代码实现 二、归并排序非递归1.可否使用栈来模拟?2.直接改非递归(简化版)3.处理边界之一把梭哈4.处理边界之归并一次拷贝一次 一、归并排序递归法 1.归并排序的基本思想 归并排序(MERGE-SO…

网络安全事件调查,如何追溯攻击者的行踪和攻击路径

在当今互联网的世界里,网络安全已成为一个非常重要的话题。随着网络攻击的不断增加,如何保护我们的网络安全已成为一个严峻的挑战。为了防止网络攻击,需要了解攻击者的行踪和攻击路径,以便更好地预防和应对网络攻击。 网络安全事…

SQLite 用C语言开发的原因有哪些?

SQLite 用C语言开发的原因有哪些? 一、引言1.1、SQLite是什么?1.2、SQLite的历史和现状 二、SQLite的优点三、使用C语言开发SQLite的原因3.1、C 语言的优势3.2、对比其他编程语言 四、SQLite与其他数据库的对比4.1、关系型数据库MySQL4.2、关系型数据库P…

Python小姿势 - 线程和进程:

线程和进程: Python里面线程是真正的并行执行,进程是可以并行执行的。 所谓进程,就是操作系统中执行一个程序的独立单元,它是系统进行资源分配和调度的基本单位。一个进程可以创建和撤销另一个进程,同一个进程内可以并…

Vue电商项目--axios二次封装

postman测试接口 刚刚经过postman工具测试,发现接口果然发生了改变。 新的接口为http://gmall-h5-api.atguigu.cn 如果服务器返回的数据code字段200,代表服务器返回数据成功 整个项目,接口前缀都有/api字样 axios二次封装 XmlHttpRequ…

EMC VPLEX VS2 FRU故障备件更换基本流程

本文是针对VPLEX VS2 备件更换流程的详细操作方法,其实VS6也是类似的。 首先要说明一点,EMC VPLEX的任何硬件故障更换都不是直接插拔来完成的,一定要执行脚本要完成更换,本文就是描述如何启动这个脚本和常见的一些问题&#xff0…

【react从入门到精通】初识React

文章目录 前言React技能树什么是 React?安装和配置 React创建 React 组件渲染 React 组件使用 JSX传递属性(Props)处理组件状态(State)处理用户输入(事件处理)组合和嵌套组件写在最后 前言 Reac…

群晖传输速度的问题

1、群晖被称“买软件送硬件”,所以同价位NAS中群晖的配置是很低的,一些入门级型号用起来明显卡顿就一点不奇怪了。 群晖各版本的CPU/内存配置可用在官网上查到,一个页面列出了所有产品的CPU/内存配置: 我的 Synology NAS 使用哪种 CPU&#…

【五一创作】Python 一文了解 OS 操作系统交互库简单使用方法

作者主页:爱笑的男孩。的博客_CSDN博客-深度学习,活动,YOLO领域博主爱笑的男孩。擅长深度学习,活动,YOLO,等方面的知识,爱笑的男孩。关注算法,python,计算机视觉,图像处理,深度学习,pytorch,神经网络,opencv领域.https://blog.csdn.net/Code_and516?typecollect个人…

linux系统下C/C++静态库和动态库的制作及使用

C/C静态库和动态库的制作及使用 1 静态库的制作静态库简介1.1 编写源码1.2 生成目标文件1.3 ar归档,打包成静态库1.4 查看静态库1.5 测试静态库1.6 运行测试 2 动态库2.1 编写 Makefile2.2 编译链接动态库 1 静态库的制作 静态库简介 一般情况下,为了更好的支持开…

LC正弦波振荡器【高频电子线路】【Multisim】

目录 一、实验目的与要求 二、实验仪器 三、实验内容与测试结果 1、观察起振过程 2、观测稳定的输出波形及振荡频率的变化 3、测试静态工作点对起振和输出幅度的影响 4、测试回路电容对振荡频率和输出幅度的影响,并理论上给出解释 四、实验结果分析 一、实验…

【社区图书馆】【图书活动第四期】

目录 一、前言 二、作者简介 三、《PyTorch高级机器学习实战》内容简介 四、书目录 一、前言 今天,偶尔逛到csdn社区图书馆,看到有活动 “【图书活动第四期】来一起写书评领实体奖牌红包电子勋章吧!”(活动到今天结束&#xf…

荔枝派Zero(全志V3S)开启 SSH 实现远程连接和文件传输

文章目录 前言一、配置 buildroot二、编译 buildroot三、拷贝到 SD 卡四、测试 ssh1、修改 /etc/ssh/sshd_config 文件2、运行 /usr/sbin/sshd3、使用 SecureCRT 测试4、使用 SecureFx 测试 前言 本文将在 Buildroot 根文件系统开启 ssh 功能。 一、配置 buildroot 1、在 bui…

《软件测试》[Ron Patton](一)-软件测试背景、软件开发过程、软件测试基础

《软件测试(原书第2版)》作者: [美] Ron Patton 这本书是软件测试入门的经典书籍。我在刚入行时,也读过这本书,受益匪浅。并且即使是工作了这么多年,再回头看这本书,会发现怎么都逃不出这本书的范围。这个系…

【视频教程解读】Window上安装和使用autogluon V0.4

1.使用conda安装的python环境 教程使用的是极简版miniconda,由于我们的电脑中安装了anaconda,所以不需要进行进一步安装。python版本为3.9,博客里面有anaconda和python版本的对应关系。注意查看版本autogluon V0.4需要3.8或者3.9和3.10,pip版…

Linux:网络基础1

网络协议分层 所有网络问题,本质都是通信距离变长了,为了尽可能减少通信成本,定制了协议。 协议分层的优势: 软件设计方面的优势 - 低耦合 一般我们的分层依据: 功能比较集中,耦合度比较高的模块-- 一层 &#xff0c…