专栏首页程序生涯js内存泄漏常见的四种情况(From LeuisKen)

js内存泄漏常见的四种情况(From LeuisKen)

本文主要选取了4 Types of Memory Leaks in JavaScript and How to Get Rid Of Them 这篇文章中的一小部分来说明一下js中产生内存泄漏的常见情况. 对于较难理解的第四种情况, 参考了一些文章来进行说明.

意外的全局变量

js中如果不用var声明变量,该变量将被视为window对象(全局对象)的属性,也就是全局变量.

function foo(arg) {
    bar = "this is a hidden global variable";
}

// 上面的函数等价于
function foo(arg) {
    window.bar = "this is an explicit global variable";
}

所以,你调用完了函数以后,变量仍然存在,导致泄漏.

如果不注意this的话,还可能会这么漏:

function foo() {
    this.variable = "potential accidental global";
}

// 没有对象调用foo, 也没有给它绑定this, 所以this是window
foo();

你可以通过加上'use strict'启用严格模式来避免这类问题, 严格模式会组织你创建意外的全局变量.

被遗忘的定时器或者回调

var someResource = getData();
setInterval(function() {
    var node = document.getElementById('Node');
    if(node) {
        node.innerHTML = JSON.stringify(someResource));
    }
}, 1000);

这样的代码很常见, 如果idNode的元素从DOM中移除, 该定时器仍会存在, 同时, 因为回调函数中包含对someResource的引用, 定时器外面的someResource也不会被释放.

没有清理的DOM元素引用

var elements = {
    button: document.getElementById('button'),
    image: document.getElementById('image'),
    text: document.getElementById('text')
};

function doStuff() {
    image.src = 'http://some.url/image';
    button.click();
    console.log(text.innerHTML);
}

function removeButton() {
    document.body.removeChild(document.getElementById('button'));

    // 虽然我们用removeChild移除了button, 但是还在elements对象里保存着#button的引用
    // 换言之, DOM元素还在内存里面.
}

闭包

先看这样一段代码:

var theThing = null;
var replaceThing = function () {
  var someMessage = '123'
  theThing = {
    someMethod: function () {
      console.log(someMessage);
    }
  };
};

调用replaceThing之后, 调用theThing.someMethod, 会输出123, 基本的闭包, 我想到这里应该不难理解.

解释一下的话, theThing包含一个someMethod方法, 该方法引用了函数中的someMessage变量, 所以函数中的someMessage变量不会被回收, 调用someMethod可以拿到它正确的console.log出来.

接下来我这么改一下:

var theThing = null;
var replaceThing = function () {
  var originalThing = theThing;
  var someMessage = '123'
  theThing = {
    longStr: new Array(1000000).join('*'),        // 大概占用1MB内存
    someMethod: function () {
      console.log(someMessage);
    }
  };
};

我们先做一个假设, 如果函数中所有的私有变量, 不管someMethod用不用, 都被放进闭包的话, 那么会发生什么呢.

第一次调用replaceThing, 闭包中包含originalThing = nullsomeMessage = '123', 我们设函数结束时, theThing的值为theThing_1.

第二次调用replaceThing, 如果我们的假设成立, originalThing = theThing_1someMessage = '123'.我们设第二次调用函数结束时, theThing的值为theThing_2.注意, 此时的originalThing保存着theThing_1, theThing_1包含着和theThing_2截然不同的someMethod, theThing_1someMethod中包含一个someMessage, 同样如果我们的假设成立, 第一次的originalThing = null应该也在.

所以, 如果我们的假设成立, 第二次调用以后, 内存中有theThing_1theThing_2, 因为他们都是靠longStr把占用内存撑起来, 所以第二次调用以后, 内存消耗比第一次多1MB.

如果你亲自试了(使用Chrome的Profiles查看每次调用后的内存快照), 会发现我们的假设是不成立的, 浏览器很聪明, 它只会把someMethod用到的变量保存下来, 用不到的就不保存了, 这为我们节省了内存.

但如果我们这么写:

var theThing = null;
var replaceThing = function () {
  var originalThing = theThing;
  var unused = function () {
    if (originalThing)
      console.log("hi");
  };
  var someMessage = '123'
  theThing = {
    longStr: new Array(1000000).join('*'),
    someMethod: function () {
      console.log(someMessage);
    }
  };
};

unused这个函数我们没有用到, 但是它用了originalThing变量, 接下来, 如果你一次次调用replaceThing, 你会看到内存1MB 1MB的涨.

也就是说, 虽然我们没有使用unused, 但是因为它使用了originalThing, 使得它也被放进闭包了, 内存漏了.

强烈建议读者亲自试试在这几种情况下产生的内存变化.

这种情况产生的原因, 通俗讲, 是因为无论someMethod还是unused, 他们其中所需要用到的在replaceThing中定义的变量是保存在一起的, 所以就漏了.

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 16个超实用的jQuery技巧攻略

    本文我们将为jQuery用户分享8个超实用的技巧攻略。jQuery是JavaScript最好的库之一,主要用于制作动画、事件处理,支持Ajax及HTML 脚本客...

    用户7657330
  • 前端笔试题(附答案)

    var obj = { id:1, name:"jacky" };alert(obj.name);上例表示创建一个具有属性 id (值为 1)、属性 name(...

    用户7657330
  • PHP5中的魔术方法

    php中构造方法是对象创建完成后第一个被对象自动调用的方法。在每个类中都有一个构造方法,如果没有显示地声明它,那么类中都会默认存在一个没有参数且内容为空的构造方...

    用户7657330
  • JavaScript变量和数据类型

    变量 变量就是一个元素,类似于数学中的概念,用来指定表示一个对象。 在JavaScript中,用来指定变量的关键字为var。 当声明新变量时,可以使用关键词 "...

    静默虚空
  • js倒计时,秒倒计时,天倒计时

    距某某开幕式还有 [<script language="JavaScript" type="text/javascript">djs()</script>] 天...

    用户3055976
  • Dart 笔记 4 - 运算符

    condition ? expr1 : expr2 如果条件为真,则计算并返回 expr1 的值,否则计算并返回 expr2 的值。

    七适散人
  • mapboxGL之风流图

    前面的文章说到了Openlayers4中风场的实现,本文将讲述如何在mapbox GL实现类似的效果。

    lzugis
  • javascript基础知识点1.0

    知识点综述: ---- 在复习JavaScript语法,主要看的是w3cschool的教程。 用法: 1.0必须位于<script></s...

    东风冷雪
  • openlayers5中用iconfont作为图标

    前面有文章 openlayers4中用font设置图标样式 就iconfont在ol5中的使用做了一个尝试,后面有很多童鞋问我说实现不了,一直没有时间去做一个...

    lzugis
  • JavaScript设模式---单例模式

    1,单体模式用于创建命名空间,将系列关联的属性和方法组织成一个逻辑单元,减少全局变量。  逻辑单元中的代码通过单一的变量进行访问。

    wfaceboss

扫码关注云+社区

领取腾讯云代金券