js内存泄漏的几种情况、js垃圾回收机制、内存机制

内存泄露

什么是内存泄漏

内存泄漏 (Memory leak) 其实就是我们的程序中已经动态分配的堆内存,由于疏忽或者错误没有得到释放,造成系统内存的浪费导致程序运行速度减慢甚至系统崩溃等严重后果。

  • 程序的运行需要内存。只要程序提出要求,操作系统或者运行时就必须供给内存
  • 对于持续运行的服务进程,必须及时释放不再用到的内存。
  • 否则,内存占用越来越高,轻则影响系统性能,重则导致进程崩溃

比如说:

  1. 闭包:在闭包中引入闭包外部的变量时,当闭包结束时此对象无法被垃圾回收
  2. DOM:当原有的DOM被移除时,子结点引用没有被移除则无法回收
  3. Times计时器泄露

内存泄漏的几种情况

  1. 意外的全局变量
  2. 闭包 :在闭包中引入闭包外部的变量时,当闭包结束时此对象无法被垃圾回收
  3. DOM :当原有的DOM被移除时,子结点引用没有被移除则无法回收
  4. Times计时器泄露
  5. 包括使用事件监听addEventListener 监听的时候,在不监听的情况下使用 removeEventListen er取消对事件监听
意外的全局变量
javascript 复制代码
// 意外的全局变量
function foo(arg) {
    bar = "this is a hidden global variable";
}

// this创建的意外的全局变量
function foo() {
    this.variable = "potential accidental global";
}

// foo调用自己,this指向全局对象window
foo();

以上使用严格模式,可以避免意外的全局变量。

闭包

闭包,维持函数内局部变量,使其得不到释放

javascript 复制代码
function bindEvent() {
    var obj = document.createElement('XXX');
    var unused = function () {
        console.log(obj, '闭包内引用obj, obj不会释放')
    };

    obj = null; // 解决方法
}
没有清理对 DOM 元素的引用同样造成内存泄露
javascript 复制代码
const refA = document.getElementById('refA');
document.body.removeChild(refA); // dom删除
console.log(refA, 'refA'); // 但是还存在引用能console出整个div没有被回收

refA = null;
console.log(refA, 'refA'); // 解除引用
定时器造成的内存泄漏
ini 复制代码
var someResource = getData();

setInterval(function() {
    var node = document.getElementById('Node');
    if(node) {
        // 处理node 和 someResource
        node.innerHTML = JSON.stringify(someResource));
    }
}, 1000);

如果 id 为Node的元素从 DOM 中移除,该定时器仍会存在,同时,因为回调函数中包含对 someRes ource 的引用,定时器外面的 someResource也不会被释放

手动释放内存很麻烦,所以大多数语言提供自动内存管理,减轻程序员负担,这被称之为:垃圾回收机制

垃圾回收机制

Javaseript 具有自动垃圾回收机制 (GC: Garbage Collecation)(即自动内存管理机制),也就是说,执行环境会负责管理代码执行过程中使用的内存,垃圾收集器会定期的找出那些不再继续使用的变量,然后释放内存。但是这个过程不是实时的,因为GC开销比较大并且时停止响应其他操作,所以垃圾回收器会按照固定的时间间隔周期性的执行。

原理:垃圾收集器会定期(周期性)找出那些不再继续使用的变量,然后释放其内存

通常情况下有两种实现方式:

  • 标记清除(js最常用)
  • 引用计数

标记清除

标记清除是Javascript 最常用的垃圾收回机制

  • 当变量进入执行环境时,就标记这个变量为"进入环境"。进入环境的变量所占用的内存就不能释放
  • 当变量离开环境时,则将其标记为"离开环境〞
  • 垃圾回收程序运行的时候,会标记内存中存储的所有变量。然后它会将所有在上下文中的变量,以及被在上下文中的变量引用的变量的标记去掉
  • 在此之后再被加上标记的变量就是待删除的了,原因是任何在上下文中的变量都访问不到它们了
  • 随后垃圾回收程序做一次内存清理,销毁带标记的所有值并收回它们的内存

引用计数

  • 语言引擎有一张"引用表",保存了内存里面所有的资源(通常是各种值)的引用次数。
  • 如果一个值的引用次数是 0,就表示这个值不再用到了,因此可以将这块内存释放
  • 如果一个值不再需要了,引用数却不为 0,垃圾回收机制无法释放这块内存,从而导致内存泄漏

小结

有了垃圾回收机制,不代表不用关注内存泄露。那些很占空问的值,一旦不再用到,需要检查是否还存 在对它们的引用。如果是的话,就必须手动解除引用

相关推荐
涵信1 分钟前
第九节:React HooksReact 18+新特性-React 19的use钩子如何简化异步操作?
前端·javascript·react.js
我是仙女你信不信31 分钟前
生成pdf并下载
前端·javascript·vue.js
vvilkim1 小时前
React 组件类型详解:类组件 vs. 函数组件
前端·javascript·react.js
啊吧啊吧曾小白1 小时前
作用域、闭包与this指向问题
前端·javascript·面试
HiF2 小时前
Hexo博客集成LivePhoto
javascript
八了个戒2 小时前
「数据可视化 D3系列」入门第七章:坐标轴的使用
前端·javascript·数据可视化·canvas·d3
八了个戒2 小时前
「数据可视化 D3系列」入门第二章:选择器与数据绑定
前端·javascript·数据可视化·canvas·d3
dsl_12 小时前
axios重复请求解决方案
前端·javascript·axios
拾荒旧痕2 小时前
通过gird布局实现div的响应式分布排列
前端·javascript·css
蘑菇头爱平底锅2 小时前
数字孪生-DTS-孪创城市-前端实现无人机飞行
前端·javascript·数据可视化