js内存管理系列篇二:内存泄漏,内存管理

内存泄漏

上篇文章讲到 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
这四个字段分别是

  1. rss : 总内存占用
  2. heapTotal : 堆占用的内存,包括用到的和没用到的。
  3. heapUsed : 用到的堆内存
  4. 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。

大家可以通过上述的方式去了解下自己写的程序所占的内存,对变量进行一个合理的管理,防止内存泄漏与节省内存;

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

欧阳呀

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值