js内存泄漏问题及解决方案视频教程

今天来给大家说说js内存泄漏问题及解决方案：

咱们先看看什么是内存泄漏？

内存泄漏：指一块被分配的内存既不能使用，又不能回收，直到浏览器进程结束。

Js内存泄漏及解决方案：

1、意外的全局变量

js中如果不用var声明变量,该变量将被视为window对象(全局对象)的属性,也就是全局变量.
function foo(arg) {
    bar = "this is a hidden global variable";
}
// 上面的函数等价于
function foo(arg) {
    window.bar = "this is an explicit global variable";
}
所以,你调用完了函数以后,变量仍然存在,导致泄漏.

2、如果不注意this的话,还可能会导致内存泄漏

function foo() {
    this.variable = "potential accidental global";
}
// 没有对象调用foo, 也没有给它绑定this, 所以this是window
foo();
你可以通过加上’use strict’启用严格模式来避免这类问题, 严格模式会阻止你创建意外的全局变量.

3、闭包引起的内存泄露

function bindEvent(){
  var obj=document.createElement("XXX");
  obj.onclick=function(){
    //Even if it's a empty function
  }
}
闭包可以维持函数内局部变量，使其得不到释放。 上例定义事件回调时，由于是函数内定义函数，并且内部函数--事件回调的引用外暴了，形成了闭包。

解决方案一：将事件处理函数定义在外部

function onclickHandler(){
  //do something
}
function bindEvent(){
  var obj=document.createElement("XXX");
  obj.onclick=onclickHandler;
}

解决方案二：在定义事件处理函数中，将对象设置成null

function bindEvent(){
  var obj=document.createElement("XXX");
  obj.onclick=function(){
    //Even if it's a empty function
  }
  obj=null;
}

4、被遗忘的定时器或者回调

var someResouce=getData();
setInterval(function(){
    var node=document.getElementById('Node');
    if(node){
        node.innerHTML=JSON.stringify(someResouce)
    }
},1000)
这样的代码很常见, 如果 id 为 Node 的元素从 DOM 中移除, 该定时器仍会存在, 同时, 因为回调函数中包含对 someResource 的引用, 定时器外面的 someResource 也不会被释放。
解决方案：删除id为node的同时，清除定时器，并将someResouce=null;

咱们来看看视频教程：