【谢绝迁延】罕见的JavaScript内存泄漏缘由及解决方案

2019年9月1日 148次阅读 来源: 拾贰

媒介

内存走漏指由于忽视或毛病形成顺序未能开释已不再运用的内存。内存走漏并不是指内存在物理上的消逝，而是应用顺序分派某段内存后，由于设想毛病，致使在开释该段内存之前就失去了对该段内存的掌握，从而形成了内存的糟蹋。这里就讲一些罕见会带来内存泄漏的缘由。

0. 全局变量

JavaScript自在的个中一种体式格局是它能够处置惩罚没有声明的变量：一个未声明的变量的援用在全局对象中创建了一个新变量。在浏览器的环境中，全局对象是window。

function foo(){
  name = '前端曰'；
}
// 实际上是把name变量挂载在window对象上
function foo(){
  window.name = '前端曰'；
}

// 又或许
function foo(){
  this.name = '前端曰'；
}
foo() // 实在这里的this就是指向的window对象

如许无意中一个不测的全局变量就被创建了，为了阻挠这类毛病发作，在你的Javascript文件最前面增加 'use strict;' 。这开启了剖析JavaScript的阻挠不测全局的更严厉的形式。或许本身注重好变量的定义！

1. 轮回援用

在js的内存治理环境中，对象 A 假如有接见对象 B 的权限，叫做对象 A 援用对象 B。援用计数的战略是将“对象是不是不再须要”简化成“对象有无其他对象援用到它”，假如没有对象援用这个对象，那末这个对象将会被接纳 。

function func() {  
    let obj1 = {};  
    let obj2 = {};  
  
    obj1.a = obj2; // obj1 援用 obj2  
    obj2.a = obj1; // obj2 援用 obj1  
}

当函数 func 实行完毕后，返回值为 undefined，所以全部函数以及内部的变量都应该被接纳，但依据援用计数要领，obj1 和 obj2 的援用次数都不为 0，所以他们不会被接纳。要处理轮回援用的题目，最好是在不运用它们的时刻手工将它们设为空。

处理方案：obj1 和 obj2 都设为 null 。

2. 陈词滥调的闭包

闭包：匿名函数能够接见父级作用域的变量。

var names = (function(){  
    var name = 'js-say';
    return function(){
        console.log(name);
    }
})()

闭包会形成对象援用的生命周期离开当前函数的上下文，假如闭包假如运用不当，能够致使环形援用（circular reference），类似于死锁，只能防止，没法发作以后处理，纵然有渣滓接纳也照样会内存泄漏。

3. 被遗忘的延时器/定时器

在我们的一样平常需求中，可能会常常试用到 setInterval/setTimeout ，然则运用完以后一般遗忘清算。

var someResource = getData(); 
setInterval(function() { 
    var node = document.getElementById('Node'); 
    if(node) { 
        // 处置惩罚 node 和 someResource 
        node.innerHTML = JSON.stringify(someResource)); 
    } 
}, 1000);

setInterval/setTimeout 中的 this 指向的是window对象，所以内部定义的变量也挂载到了全局；if 内援用了 someResource 变量，假如没有消灭 setInterval/setTimeout 的话someResource 也得不到开释；同理实在 setTimeout 也一样。所以我们用完须要记得去 clearInterval/clearTimeout。

4. DOM引发的内存泄漏

  • 未消灭DOM援用
var refA = document.getElementById('refA');
document.body.removeChild(refA);
// #refA不能接纳，由于存在变量refA对它的援用。将其对#refA援用开释，但照样没法接纳#refA。

处理方案：refA = null 。

  • DOM对象增加的属性是一个对象的援用
var MyObject = {}; 
document.getElementById('myDiv').myProp = MyObject;

处理方案：在页面 onunload 事宜中开释 document.getElementById('myDiv').myProp = null; 。

DOM被删除或清空没有清晰绑定事宜这类状况应该是比较罕见的，同时也应该是比较轻易被疏忽的。

  • 给DOM对象绑定事宜
var btn = document.getElementById("myBtn"); 
btn.onclick = function(){ 
    document.getElementById("myDiv").innerHTML = "wechat: js-say"; 
}

document.body.removeChild(btn);
btn = null;

这里把DOM移除了，然则绑定的事宜仍没被移除，会引发内存泄漏所以须要消灭事宜。

var btn = document.getElementById("myBtn"); 
btn.onclick = function(){ 
  btn.onclick = null;
    document.getElementById("myDiv").innerHTML = "wechat: js-say"; 
}

document.body.removeChild(btn);
btn = null;

小广告

我本身运营的民众号，纪录我本身的生长！

每周最少一篇博客，谢绝迁延从我做起！

民众号：前端曰

民众号ID：js-say

ps：是(yue)不是(ri)

《【谢绝迁延】罕见的JavaScript内存泄漏缘由及解决方案》

    原文作者：拾贰
    原文地址: https://segmentfault.com/a/1190000019366867
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞