首页 > 系统相关 >js内存泄漏几种方式及如何避免、内存溢出

js内存泄漏几种方式及如何避免、内存溢出

时间:2024-11-06 13:48:42浏览次数:1  
标签:function 泄漏 leak js 内存 全局变量 click

https://blog.csdn.net/Judy_qiudie/article/details/82845692

 

一、什么是内存泄漏(memory leak)?
参考阮一峰老师博客:http://www.ruanyifeng.com/blog/2017/04/memory-leak.html

不再用到的内存,没有及时释放,就叫做内存泄漏(memory leak)。

程序的运行需要内存。只要程序提出要求,操作系统或者运行时(runtime)就必须供给内存。

对于持续运行的服务进程(daemon),必须及时释放不再用到的内存。否则,内存占用越来越高,轻则影响系统性能,重则导致进程崩溃。

C 语言代码,malloc方法用来申请内存,使用完毕之后,必须自己用free方法释放内存。

这很麻烦,所以大多数语言提供自动内存管理,减轻程序员的负担,这被称为"垃圾回收机制"(garbage collector)。

二、JavaScript 的垃圾收集机制
JavaScript中最常用的垃圾收集方式是标记清除(mark-and-sweep)。当变量进入环境(例如,在函数中声明一个变量)时,就将这个变量标记为“进入环境”。从逻辑上讲,永远不能释放进入环境的变量所占的内存,因为只要执行流进入相应的环境,就可能用到它们。而当变量离开环境时,这将其 标记为“离开环境”。

常见内存泄漏的原因 :

1、全局变量引起的内存泄漏

function leaks(){
leak = 'xxxxxx'; //leak 成为一个全局变量,不会被回收
}
'
运行运行
尤其当全局变量用于 临时存储和处理大量信息时,需要多加小心。如果必须使用全局变量存储大量数据时,确保用完以后把它设置为 null 或者重新定义。

与全局变量相关的增加内存消耗的一个主因是缓存。缓存数据是为了重用,缓存必须有一个大小上限才有用。高内存消耗导致缓存突破上限,因为缓 存内容无法被回收。

2、闭包引起的内存泄漏

闭包是 JavaScript 开发的一个关键方面:匿名函数可以访问父级作用域的变量。

var leaks = (function(){
var leak = 'xxxxxx';// 被闭包所引用,不会被回收
return function(){
console.log(leak);
}
})()

123456
'
运行运行
3、dom清空或删除时,事件未清除导致的内存泄漏

<div id="container"></div>

$('#container').bind('click', function(){
console.log('click');
}).remove();

//导致内存泄漏
<div id="container"></div>

$('#container').bind('click', function(){
console.log('click');
}).off('click').remove();

//把事件清除了,即可从内存中移除
子元素存在引用引起的内存泄漏:

假如你的 JavaScript 代码中保存了表格某一个 <td> 的引用。将来决定删除整个表格的时候,直觉认为 GC 会回收除了已保存的 <td> 以外的其它节点。

实际情况并非如此:此<td> 是表格的子节点,子元素与父元素是引用关系。由于代码保留了 <td> 的引用,导致整个表格仍待在内存中。

4、被遗忘的计时器或回调函数

var someResource = getData();
setInterval(function() {
var node = document.getElementById('Node');
if(node) {
// 处理 node 和 someResource
node.innerHTML = JSON.stringify(someResource));
}
}, 1000);
如果 id 为 Node 的元素从 DOM 中移除, 该定时器仍会存在, 同时, 因为回调函数中包含对 someResource 的引用, 定时器外面的 someResource 也不会被释放。

怎样避免内存泄露:

1)减少不必要的全局变量,或者生命周期较长的对象,及时对无用的数据进行垃圾回收;

2)注意程序逻辑,避免“死循环”之类的 ;

3)避免创建过多的对象 原则:不用了的东西要及时归还。

三、什么是内存溢出(out of menory)?
内存溢出(out of memory):程序要求的内存,超出了系统所能分配的范围。

如:我们用一个int型4字节的数据来装一个float型8字节的数据,就会产生内存溢出。不过我们在编程是可以强制类型转换int XX = (int)float;只取float 4字节数据给int。
————————————————

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

原文链接:https://blog.csdn.net/Judy_qiudie/article/details/82845692

标签:function,泄漏,leak,js,内存,全局变量,click
From: https://www.cnblogs.com/chinasoft/p/18530021

相关文章

  • 【内存泄漏和内存溢出】JavaScript之深入浅出理解内存泄漏和内存溢出
    https://blog.csdn.net/qq_44291585/article/details/122026034 内存泄漏和内存溢出了解内存泄露和内存溢出之前,我们得知道什么是内存!下面就会详细讲解什么内存什么是内存内存(Memory)是计算机的重要部件之一,也称内存储器和主存储器,它用于暂时存放CPU中的运算数据,与硬盘等外部......
  • 使用内存堆快照检测分离的 DOM 内存泄漏
    https://fe.okki.com/post/62cbfea7136f570343d89416/ 使用ChromeDevtools分析内存问题网页的内存限制对于Chrome浏览器,每个Tab页能使用的内存大小是有限制的。限制大小根据Chrome版本,Chrome位数(32/64),操作系统版本,会有所不同。可以通过window.performance.memory......
  • 双token无感刷新nodejs+vue3(保姆级教程)
    什么是双Token无感刷新?双Token无感刷新机制使用两个不同的token来管理用户的身份验证和会话。通常情况下,这两个token是:访问Token(AccessToken):用于访问受保护的资源,通常具有较短的有效期(如15分钟到1小时)。当用户进行API请求时,附带此token以证明其身份。刷......
  • 借助 Microsoft Edge 分离的元素面板分析内存泄漏问题
    https://fe.okki.com/post/63721db5e81bf53bcf1cbff7/ MicrosoftEdge分离元素面板工具简介这是基于chromium内核的Edge浏览器,为开发者提供的一个用来分析网页DOM内存泄漏的工具,目前Chrome上还没有类似的工具。这个面板的界面如下,左上方四个按钮功能分别为获取分......
  • Js Dom
    DOM,全称DocumentObjectModel,中文翻译为文档对象模型。DOM属于WebAPI的一部分。WebAPI中定义了非常多的对象,通过这些对象可以完成对网页的各种操作(添加删除元素、发送请求、操作浏览器等)DOM中的D意为Document,即文档。所谓文档就是指整个网页,换言之,DOM是用来操作网页的。O......
  • Node.js-增强 API 安全性和性能优化
    ​......
  • node.js毕设中国传统文化服饰交流平台(程序+论文)
    本系统(程序+源码+数据库+调试部署+开发环境)带文档lw万字以上,文末可获取源码系统程序文件列表开题报告内容一、选题背景关于中国传统文化服饰交流平台的研究,现有研究主要集中在传统文化服饰的历史、艺术价值等方面,如在传统服饰的审美意蕴研究中,多是从单一的美学角度探讨其......
  • node.js毕设文物藏品管理系统(程序+论文)
    本系统(程序+源码+数据库+调试部署+开发环境)带文档lw万字以上,文末可获取源码系统程序文件列表开题报告内容一、选题背景关于文物藏品管理系统的研究,现有研究主要集中在藏品的数字化管理、RFID技术在藏品管理中的应用等方面。例如,一些研究关注了如何利用RFID技术实现藏品的......
  • log4rs输出json格式日志
    tomllog="0.4"log4rs="1.3"rsuselog::{error,info,warn,LevelFilter};uselog4rs::{append::console::ConsoleAppender,config::{Appender,Root},encode::json::JsonEncoder,};uselog4rs::append::file::FileAppender;......
  • node.js动漫论坛-计算机毕业设计源码09947
    摘 要随着移动互联网的飞速发展,智能手机和移动互联网已经成为人们日常生活中不可或缺的一部分。在这样的背景下,微信小程序应运而生,凭借其无需下载安装、即用即走的特点,迅速成为连接用户与服务的桥梁。动漫作为一种深受年轻人喜爱的文化形式,拥有庞大的粉丝群体和广阔的市场......