内存泄漏
上篇文章讲到 js 内存泄漏存在的各种表现以及问题。现在来说说常见代码中的内存泄漏。
关于全局变量
function fn(){ demo = '我很帅'; } fn(); function fn2(){ this.demo2 = 123; } fn2();
这里就存在两个内存泄漏的问题,fn里的demo = window.demo, 函数自身发生了调用,this 指向全局对象(window)
定时器里存在的内存泄漏问题
有一个这样的业务,如果存在domP这个标签,那么我去获取当前时间赋值上去。同时有一个按钮btn,点击它移除domP,刚开始做了这样一个代码操作
let domP = document.getElementById('domP'); //创建一个定时器 let timeInterval = setInterval(()=>{ let time = new Date(); if(domP){ domP.innerHTML = JSON.stringify(time); } console.log('time'); },1000); let btn = document.getElementById('btn'); btn.onclick = ()=>{ domP.remove(); }
乍一看是没问题的,但是如果这么写存在的问题是,即使你的domP移除了,它里面的打印事件会一直执行,凡是存在只需要执行一次或几次的定时器操作一定要显示的移除,代码需要这么写
let domP = document.getElementById('domP'); let timeInterval = setInterval(()=>{ let time = new Date(); if(domP){ domP.innerHTML = JSON.stringify(time); } console.log('time'); },1000); let btn = document.getElementById('btn'); btn.onclick = ()=>{ domP.remove(); //显示的移除 clearInterval(timeInterval); }
闭包存在的内存泄漏问题
闭包还是用的蛮爽的,但是使用不当也会有内存泄漏问题,比如:
function findGf(){ this.name = '博主是帅哥'; this.leg = 160; } findGf.prototype.selectName = function(){ let name = this.name; return function(){ return name; }; }; let gf = new findGf(); console.log(gf.selectName()());
这里说一下node的一个api,process.memoryUsage,返回一个对象,包含了 Node 进程的内存占用信息。该对象包含四个字段,单位是字节。
在node里执行js文件就可以,命令是 node xxx.js
这四个字段分别是
rss : 总内存占用
heapTotal : 堆占用的内存,包括用到的和没用到的。
heapUsed : 用到的堆内存
external : V8 引擎内部的 C++ 对象占用的内存
这里主要看heapUsed,通过它我们可以实时看到内存的占用多少
上述代码使用node执行后,内存占用是:
因为闭包里的name是不会被回收的,一直存在于内存中,那如果试着在闭包里多返回一些数据呢,由于它们常驻内存,所以是不会销毁的,所以用完要及时销毁
function findGf(){ this.name = '博主是帅哥'; this.leg = 160; } findGf.prototype.selectName = function(){ let name = this.name; return function(){ return name }; //销毁name name = null; }; let gf = new findGf(); console.log(gf.selectName()());
此时的内存占用是:
heapUsed从584变成了576。
大家可以通过上述的方式去了解下自己写的程序所占的内存,对变量进行一个合理的管理,防止内存泄漏与节省内存;