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);
这样的代码很常见, 如果id
为Node
的元素从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 = null
和someMessage = '123'
, 我们设函数结束时, theThing
的值为theThing_1
.
第二次调用replaceThing
, 如果我们的假设成立, originalThing = theThing_1
和someMessage = '123'
.我们设第二次调用函数结束时, theThing
的值为theThing_2
.注意, 此时的originalThing
保存着theThing_1
, theThing_1
包含着和theThing_2
截然不同的someMethod
, theThing_1
的someMethod
中包含一个someMessage
, 同样如果我们的假设成立, 第一次的originalThing = null
应该也在.
所以, 如果我们的假设成立, 第二次调用以后, 内存中有theThing_1
和theThing_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
中定义的变量是保存在一起的, 所以就漏了.
- Contact Manager Web API 示例[4] 异常处理(Exception Handling)
- 你不知道的javaScript笔记(6)
- 创建支持多种屏幕尺寸的Android应用
- 封装多线程处理大量数据操作
- 你不知道的javaScript笔记(5)
- 无特性的 MEF 配置方法
- HTTP协议状态码详解(HTTP Status Code)
- android 中resources管理
- 你不知道的javaScript笔记(4)
- Android网格视图(GridView)
- http响应Last-Modified和ETag以及asp.net web api实现
- 列表视图(ListView和ListActivity)
- 你不知道的javaScript笔记(3)
- 你不知道的javaScript笔记(2)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 我能赢吗
- 最长公共子串/序列问题
- 个性化终端 | zsh bash oh-my-zsh
- VirtualBox无限嵌套方法 | 虚拟机套娃
- Win10 LTSC 激活方法 | Win10专业版(永久激活)长期服务版 LTSC 2019密钥
- Nginx代理以及面向未来的HTTP
- git的基本使用
- 一、玩转Git三剑客-Git基础
- Docker和k8s的故障排除和监控利器 Weave-Scope服务
- docker 配置Consul+registrator实时服务发现
- 使用Docker搭建Zookeeper集群
- GDCRNATools内置的gdc-client不好用
- 字符编码与字符串表达式
- 关于批次效应矫正后出现负值
- 在SAP WebIDE里使用Fiori Elements快速开发SAP UI5应用