美文网首页
内存泄漏处理

内存泄漏处理

作者: 银角大王__ | 来源:发表于2020-07-23 16:32 被阅读0次
  1. 全局变量
function foo() {
  this.bar2 = "默认绑定this指向全局"; // 全局变量=> window.bar2
  bar = "全局变量"; // 没有声明变量 实际上是全局变量=>window.bar
}
解决方案:
//方法1
function foo() {
  this.bar2 = "默认绑定this指向全局";
  let bar = "全局变量"; //改为局部变量
}
//方法2
function foo() {
  this.bar2 = "默认绑定this指向全局";
  bar = "全局变量";
}
window.bar = null; //手动释放
delete window.bar2;
  1. 定时器和回调函数
let someResource = getData();
setInterval(function() {
    let node = document.getElementById('Node');
    if(node) {
        node.innerHTML = JSON.stringify(someResource));
        // 定时器也没有清除
    }
    // node、someResource 存储了大量数据 无法回收
}, 1000);
解决方案:
let someResource = getData();
let timer=setInterval(function() {
    let node = document.getElementById('Node');
    if(node) {
        node.innerHTML = JSON.stringify(someResource));
        clearInterval(timer)
    }
}, 1000);
  1. 闭包
function bindEvent() {
  var obj = document.createElement("XXX");
  var unused = function () {
    console.log(obj, "闭包内引用obj obj不会被释放");
  };
/*解决方案*/
 obj = null;
}
var theThing = null;
var replaceThing = function () {
  var originalThing = theThing;
  var unused = function () {
    if (originalThing)
      console.log("hi");
  };
  theThing = {
    longStr: new Array(1000000).join('*'),
    someMethod: function () {
      console.log(someMessage);
    }
  };
/*解决方案*/
originalThing =null
};

4.dom泄漏

var refA = document.getElementById('refA');
document.body.removeChild(refA); // dom删除了
console.log(refA, "refA");  // 但是还存在引用 能console出整个div 没有被回收

解决办法:refA = null;
  1. console.log引起的内存泄漏
慎用console.log

5.echarts引起的内存泄漏

  beforeDestroy() {
    let echartsMap = echarts.init(document.getElementById("lineEcharts"));
    if (echartsMap) {
      echartsMap.dispose();
    }
  },

5.EventListener

function addLeak () {
  var leakObject = new LeakObject();
  window.onresize = function () {
    console.log(leakObject.value.length);
  };
}

解决方案:
  window.onresize = null;

附: js严格模式

function strict() {
  // 函数级别严格模式语法
  'use strict';
  function nested() { 
    return "And so am I!"; 
  }
  return "Hi!  I'm a strict mode function!  " + nested();
}

参考文档:
常见会导致内存泄漏问题及优化
Vue内存泄漏优化
彻底掌握js内存泄漏以及如何避免
javascript常见的内存泄漏

相关文章

网友评论

      本文标题:内存泄漏处理

      本文链接:https://www.haomeiwen.com/subject/eajhlktx.html