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,垃圾回收机制无法释放这块内存,从而导致内存泄漏

小结

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

相关推荐
高山我梦口香糖10 分钟前
[electron]预脚本不显示内联script
前端·javascript·electron
拉不动的猪1 小时前
安卓和ios小程序开发中的兼容性问题举例
前端·javascript·面试
贩卖纯净水.2 小时前
浏览器兼容-polyfill-本地服务-优化
开发语言·前端·javascript
程序研2 小时前
一、ES6-let声明变量【解刨分析最详细】
前端·javascript·es6
疯狂的沙粒3 小时前
在uni-app中如何从Options API迁移到Composition API?
javascript·vue.js·uni-app
xiaominlaopodaren3 小时前
Three.js 光影魔法:如何单独点亮你的3D模型
javascript
PasserbyX3 小时前
一句话解释JS链式调用
前端·javascript
1024小神3 小时前
tauri项目,如何在rust端读取电脑环境变量
前端·javascript
古夕3 小时前
如何将异步操作封装为Promise
前端·javascript
@一枝梅3 小时前
vue3 vite.config.js 引入bem.scss文件报错
javascript·rust·vue·scss