javascript js内存泄漏四种-转写
2017-02-13 13:41
155 查看
1 意外的全局变量
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’ 启用严格模式来避免这类问题, 严格模式会组织你创建意外的全局变量.
2 被遗忘的定时器或者回调
var someResource = getData();
setInterval(function() {
var node = document.getElementById(‘Node’);
if(node) {
node.innerHTML = JSON.stringify(someResource));
} }, 1000);
这样的代码很常见, 如果 id 为 Node 的元素从 DOM 中移除, 该定时器仍会存在, 同时, 因为回调函数中包含对 someResource 的引用, 定时器外面的 someResource 也不会被释放.
3 没有清理的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’));
4 闭包
先看这样一段代码:
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 中定义的变量是保存在一起的, 所以就漏了.
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’ 启用严格模式来避免这类问题, 严格模式会组织你创建意外的全局变量.
2 被遗忘的定时器或者回调
var someResource = getData();
setInterval(function() {
var node = document.getElementById(‘Node’);
if(node) {
node.innerHTML = JSON.stringify(someResource));
} }, 1000);
这样的代码很常见, 如果 id 为 Node 的元素从 DOM 中移除, 该定时器仍会存在, 同时, 因为回调函数中包含对 someResource 的引用, 定时器外面的 someResource 也不会被释放.
3 没有清理的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元素还在内存里面. }
4 闭包
先看这样一段代码:
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 中定义的变量是保存在一起的, 所以就漏了.
相关文章推荐
- Java更新XML的四种常用方法简介 (转)
- Android颜色值(RGB)所支持的四种常见形式
- 四种排序算法的时间比较
- EventBus的使用及接收消息的四种模式介绍
- Windows上获得IP地址的四种方法
- objective-c数组的四种遍历方法总结
- 四种常见的 POST 提交数据方式
- loadrunner中事务的四种状态以及分别的含义
- C#中方法的参数有四种类型
- 成为黑客必须做四种事情
- Activity的四种启动模式-图文并茂【Android】
- Spring MVC中Controller的四种配置方法
- ASP.NET四种页面导航方式之比较与选择
- C语言的四种排序代码
- 四种跨域方式
- Spring 实现AOP的四种方式
- ASP.NET四种页面导航方式的比较与选择
- java解析XML 四种技术
- 数据库四种隔离级别
- iOS-App跳转至系统相关界面的四种方法