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
中定义的变量是保存在一起的, 所以就漏了.
js内存泄漏常见的四种情况(From LeuisKen)相关推荐
- [摘译]js内存泄漏常见的四种情况
本文主要选取了4 Types of Memory Leaks in JavaScript and How to Get Rid Of Them 这篇文章中的一小部分来说明一下js中产生内存泄漏的常见情 ...
- 四种情况会造成内存的泄漏:
以下四种情况会造成内存的泄漏: 意外的全局变量: 由于使用未声明的变量,而意外的创建了一个全局变量,而使这个变量一直留在内存中无法被回收. 被遗忘的计时器或回调函数: 设置了 setInterval ...
- js和php能生成一样的随机数_JavaScript_JS生成某个范围的随机数【四种情况详解】,前言:
JS没有现成的函数,能 - phpStudy...
JS生成某个范围的随机数[四种情况详解] 前言: JS没有现成的函数,能够直接生成指定范围的随机数. 但是它有个函数:Math.random() 这个函数可以生成 [0,1) 的一个随机数. 利用它 ...
- JS内存泄漏排查方法——Chrome Profiles
本文转自JS内存泄漏排查方法--Chrome Profiles 概述 Google Chrome浏览器提供了非常强大的JS调试工具,Heap Profiling便是其中一个.Heap Profilin ...
- 对Java中常见的四种I/O模型理解
对Java中常见的四种I/O模型理解 1.1 知识科普 1.1.1 同步阻塞I/O(Blocking I/O) 1.1.1.1 阻塞与非阻塞 1.1.1.2 同步与异步 1.1.1.3 同步阻塞I/O ...
- 【JS继承】常见的7种继承方式
自我介绍:大家好,我是吉帅振的网络日志:微信公众号:吉帅振的网络日志:前端开发工程师,工作4年,去过上海.北京,经历创业公司,进过大厂,现在郑州敲代码. JS继承专栏 1[JS继承]什么是JS继承? ...
- 内存泄漏常见场景及处理方法
1.Java垃圾回收(GC) Java 是如何管理内存 为了判断Java中是否有内存泄露,我们首先必须了解Java是如何管理内存的.Java的内存管理就是对象的分配和释放问题.在Java中,程序员需要 ...
- 【Kotlin】Kotlin 类的继承 二 ( 属性覆盖 | 属性覆盖的四种情况 | 常量 / 变量 属性覆盖 | 子类初始化与属性覆盖 )
文章目录 I . 属性覆盖基本方式 II . 属性覆盖的四种情况 III . 常量 ( val ) / 变量 ( var ) 属性覆盖 IV . 子类初始化时考虑覆盖属性的使用 I . 属性覆盖基本方 ...
- 海康服务器装win7系统,详解win7旗舰版系统必须重装的四种情况
在使用windows7操作系统过程中,难免会遇到一些故障,比如系统中毒或者无法进入系统等这些情况,可是很多人遇到这些问题并不会想到要重装系统,其实重装的方法很简单,而且也是可以彻底解决那些问题的最佳方 ...
最新文章
- Android媒体相关开发应用程序接口
- 配置浮动路由,实现链路冗余
- Openfire及Spark配置(Mac)
- 与年轻人的“要疯”五年,安踏如何保持新鲜感与吸引力?
- 计算智能-群智能算法-粒子群算法matlab实现
- 基于ArcSDE、Oralce空间数据库冷备份与恢复
- 自定义线程池-参数设计分析
- ubuntu14.04设置静态IP
- git 配置图形比较工具
- MySQL使用技巧收集,持续更新中......
- import是引进外部函数吗_CMake之引入外部项目的三种方法
- Python 之父重回决策层,未来如何发展?
- 【解决】解决每次打开Office 2013都提示配置进度的解决方法
- 算法之 --- 背包01版+ 挖金矿问题
- 层次分析法(AHP)模型的应用案例
- React hook必须要知道的知识: useEffect的cleanup
- Oralce性能优化-绑定变量窥视
- mysql异地双活架构,银行跨数据中心数据库双活架构设计:五大难点攻克
- 矩阵的转置与矩阵的逆
- Java如何快速获取网站图片
热门文章
- 检索数据_21_处理空值的排序
- jmeter constant timer 如何添加_阿里巴巴在开源压测工具 JMeter 上的实践和优化
- es6与java的相似度_计算字符串的相似度-两种解法
- 经典卷积神经网络--AlexNet的详解
- 编译protobuf-3.11.4 错误: aclocal-1.15: command not found的解决办法
- asp.net mvc的初学
- 02.Android之IPC机制问题
- Kafka C++客户端库librdkafka笔记
- 2014末,Surface Pro 3叫好不叫座只是价格问题?
- OpenSSL 之 RSA 相关命令学习笔记