美文网首页
内存泄漏处理

内存泄漏处理

作者: 银角大王__ | 来源:发表于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