JavaScript 内存泄漏

这篇具有很好参考价值的文章主要介绍了JavaScript 内存泄漏。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

内存的释放流程:

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

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

原理:

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

JavaScript 内存泄漏

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

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

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

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

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

一、全局变量

JavaScript 内存泄漏

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

二、console.log()

JavaScript 内存泄漏
上图执行一段打印逻辑;

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

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

三、闭包

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

JavaScript 内存泄漏

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

四、Dom 泄漏

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

总结

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

小结一下防止内存泄漏的几个方面:文章来源地址https://www.toymoban.com/news/detail-430697.html

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

到了这里,关于JavaScript 内存泄漏的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【项目设计】高并发内存池(五)[释放内存流程及调通]

    🎇C++学习历程:入门 博客主页: 一起去看日落吗 持续分享博主的C++学习历程 博主的能力有限,出现错误希望大家不吝赐教 分享给大家一句我很喜欢的话: 也许你现在做的事情,暂时看不到成果,但不要忘记,树🌿成长之前也要扎根,也要在漫长的时光🌞中沉淀养分。静

    2024年02月02日
    浏览(37)
  • Java中的内存溢出与内存泄漏深度解析

    目录 引言 一. 内存溢出(Memory Overflow) 1.1 堆内存溢出 1.2 栈内存溢出 1.3 内存溢出的解决策略 1.3.1 优化对象的创建和销毁 1.3.2 调整堆内存大小 1.3.3  使用内存分析工具 1.3.4 避免创建过大的对象 1.3.5 定期清理不再使用的对象 二、 内存泄漏(Memory Leak) 2.1Java内存泄漏的典

    2024年02月19日
    浏览(47)
  • Pytorch 中的AverageMeter 造成内存泄漏

    改为

    2024年02月09日
    浏览(26)
  • Python中的内存泄漏及其检测方法

    一、引言 内存泄漏是编程中常见的问题之一,它会导致程序在运行过程中不断消耗内存,最终可能导致程序崩溃或性能下降。在Python中,内存泄漏也是一个需要关注的问题。本文将详细介绍Python中的内存泄漏及其检测方法,以帮助读者更好地理解和解决这个问题。 二、Pyth

    2024年02月22日
    浏览(38)
  • JVM—对象的创建流程与内存分配

    对象创建的流程图如下: 内存分配的方式有两种: 指针碰撞(Bump the Pointer) 空闲列表(Free List) 分配方式 说明 收集器 指针碰撞(Bump the Pointer) 内存地址是连续的(新生代) Serial和ParNew收集器 空闲列表(Free List) 内存地址不连续(老年代) CMS收集器和Mark-Sweep收集器

    2024年04月10日
    浏览(35)
  • node内存泄漏耗尽: FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript

    首先看到这种就是内存泄漏,问题找准了,接下来就是疯狂百度,csdn搜索,试了3个方法,最后一个有用。   执行npm命令报错:FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of me 字面意思:JavaScript堆内存不足。因为Node 是基于V8引擎,在 Node 中通过

    2024年02月13日
    浏览(32)
  • C++多线程场景中的变量提前释放导致栈内存异常

    在子线程中尝试使用当前函数的资源 ,是非常危险的,但是C++支持这么做。因此C++这么做可能会造成栈内存异常。 上述是一个正常的多线程代码。 但是如果将其中多线程传参设置为引用传递,可能就会造成栈内存异常了,如下所示: 编译成功,但是运行失败。 运行结果:

    2024年02月13日
    浏览(45)
  • Golang中的New和Make:内存分配与初始化的区别

    摘要:本文将深入探讨Golang中的 New 和 Make 函数在内存分配和初始化方面的区别。我们将通过理论阐述和示例代码来解释这两个函数的作用,并帮助读者更好地理解它们在实际编程中的应用。 在Golang中, New 和 Make 是用于内存分配和初始化的重要函数。虽然它们都涉及到内存

    2024年02月08日
    浏览(27)
  • 探索Java中的静态变量与实例变量:存储区域、生命周期以及内存分配方式的区别

    🎉欢迎来到Java面试技巧专栏~探索Java中的静态变量与实例变量 ☆* o(≧▽≦)o *☆嗨~我是IT·陈寒🍹 ✨博客主页:IT·陈寒的博客 🎈该系列文章专栏:Java面试技巧 文章作者技术和水平有限,如果文中出现错误,希望大家能指正🙏 📜 欢迎大家关注! ❤️ 在Java中,静态变量

    2024年02月12日
    浏览(23)
  • C语言中的字符串输入(gets_s、fgets、scanf、fscanf)与相关内存分配知识

    0. C语言的内存分配知识 分配内存空间有两种方式:静态内存分配和动态内存分配 0.1 静态内存分配 指的是在编译时确定数组等数据类型的大小,然后由计算机分配好,通常是存在栈上的数据 例如:在声明数组时,需要显示的指明数组的大小 0.2 动态内存分配 通俗一点就是向

    2024年02月11日
    浏览(38)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包