js中常见的内存泄漏

133 阅读2分钟

前言

内存是很重要的,比如我们的手机,如果手机内存不足的话就会很卡,可能进入一个程序都会闪退,这个是因为程序在运行的过程中是需要内存的。内存泄露是由于疏忽或者错误造成程序未能释放已经不再使用的内存。

意外的全局变量

在局部作用域里函数执行完事,那么我这个变量是不是就不会存在了,不存在的原因就是垃圾回收机制,它就是用来解决局部作用域里的变量一个一个进行回收,但是全局变量他就无法判断你是不是还要用到它,也就不能够正常的回收我们的每一个全局变量,比如这个例子

function fun(){
//第一种方式
  a=10
//第二种方式
this.b=20 //这个this指向的是windows,也是全局变量
}
fun()
console.log(a)
console.log(b)

这个写就会造成内存泄漏,我们还想这个写,如何才能防止内存泄漏呢,只需加个严格模式

'use strict'//严格模式

定时器

不能清除定时器也会造成内存泄漏

//html
<div class="main">
    <div class="test">你好</div>
</div>
//js
var main=document.querySelector(".main")
setInterval(() => {
   var test=document.querySelector(".test")
   main.removeChild(test)
}, 2000);

定时器是不是一直在走,但是我们的要求是在两秒之后移除这个你好这个文本就行,移除了这个定时器就不要走了,我们发现其实还有一个内存泄漏是test这个变量,没有及时清除的dom元素也会造成内存泄漏

解决方法

  • 定时器:在不用的时候及时清除定时器
  • 没有及时清除的dom元素:test=null
     let timer=setInterval(() => {
        var test=document.querySelector(".test")
        main.removeChild(test)
        //清空变量
        test=null
        if(!test){
        //清空定时器
          clearInterval(timer)
        }
      }, 2000);

闭包

由于闭包会携带包含它的函数的作用域,因此会占用更多的内存

function fun(name){
  function fun1(name){
    console.log(name)
  }
  return fun1
}
var fn=fun('张三')
fn()//张三
fn=null
fn()//报错

执行出来之后返回给这个fn是fun1,这个fun1也可以称之为闭包,闭包也说是内部的一个函数,调用这个fn,可以看到打印的是张三,这里我们写了一个简单的闭包,用来维持内部的变量在外部也能访问到,因为他是一个局部变量,本身在外部是不可以访问到的,那么在函数内部创建的fun1它也是不会被回收的,它就处于一个随时可调用的状态,如果我们想要释放内存的话,就需要fn=null即可,之后再去执行fn就执行不出来了