web前端的内存泄漏

川长思鸟来 2022-02-04 11:01 302阅读 0赞

## 什么是内存泄漏 ##

JavaScript中的内存泄漏就是被分配的内存没有被使用，但是也不能被回收的一种现象。简单来说，我们已经无法再通过js代码来引用到某个对象，但垃圾回收器却认为这个对象还在被引用，因此在回收的时候不会释放它，这样导致内存一直被占用，会导致内存不够用而系统崩溃。

## 内存泄漏常见的的几种情况 ##

#### 全局变量 ####

全局变量是不可回收的销毁的，所以谨慎使用，如果存入数据过大，可以再用完之后进行清空，设置为null或重新定义。

#### 闭包 ####

> 根据闭包的特性，内部函数有权访问外部函数的变量对象。所以当fn()执行之后，DOM元素已经存在于内存。

function fn(){   
        var dom = document.createElement("XXX"); 
        dom .onclick = function(){  
            console.log("DOM被闭包引用，不进行回收处理")
        }
    }
    fn()

#### 没有清理的 DOM 元素引用 ####

function processData(data) { 
      if (!data) { 
        return
      }
      const url = window.URL.createObjectURL(new Blob([data]))
      const link = document.createElement('a')
      link.style.display = 'none'
      link.href = url
      link.setAttribute('download', fileName)
      document.body.appendChild(link)
      link.click()
       // document.body.removeChild(link) 记得要手动清除
    }
    processData(data)

#### 被遗忘的计时器或回调 ####

var times = new Date(); 
    setInterval(function() {  
        var dom = document.getElementById('XXXX'); 
        if(dom) {  
            // 处理 dom 和 times 
            node.innerHTML = JSON.stringify(times)); 
        } 
    }, 1000);

## 内存泄漏查找方式 ##

*  调试工具——Memory——Profiles——Take snapshot  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FsaXNhX2xpc2E_size_16_color_FFFFFF_t_70]
 *  summary对照表  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FsaXNhX2xpc2E_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FsaXNhX2xpc2E_size_16_color_FFFFFF_t_70]: /images/20220204/e30d0d387c3a443facd7b00881732993.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FsaXNhX2xpc2E_size_16_color_FFFFFF_t_70 1]: /images/20220204/e80b56ca4ebe4ab7ac573065e9d7ee1b.png