JavaScript的内存释放问题详解


Posted in Javascript onJanuary 21, 2015

本文详细的讲解了JavaScript及IE浏览器对内存的管理和释放的时机和方法,希望对前端开发人员有所帮助。

一个内存释放的实例

<SCRIPT LANGUAGE="JavaScript">

<!--

strTest = "1";

for ( var i = 0; i < 25; i ++ )

{

strTest += strTest;

}

alert(strTest);

delete strTest;

CollectGarbage();

//-->

</SCRIPT>

CollectGarbage,是IE的一个特有属性,用于释放内存的,使用方法嘛应该是,将该变量或引用对象,设置为null或delete,然后在进行释放动作

在做CollectGarbage前,要必需清楚的两个必备条件:

引用- 一个对象在其生存的上下文环境之外,即会失效。
- 一个全局的对象在没有被执用(引用)的情况下,即会失效。

//---------------------------------------------------------

// JavaScript对象何时失效

//---------------------------------------------------------

function testObject() {

var _obj1 = new Object();

}

function testObject2() {

var _obj2 = new Object();

return _obj2;

}

// 示例1

testObject();

// 示例2

testObject2()

// 示例3

var obj3 = testObject2();

obj3 = null;

// 示例4

var obj4 = testObject2();

var arr = [obj4];

obj3 = null;

arr = [];

在这四个示例中:
- “示例1”在函数testObject()中构造了_obj1,但是在函数退出时,它就已经离开了函数的上下文环境,因此_obj1失效了;

- “示例2”中,testObject2()中也构造了一个对象_obj2并传出,因此对象有了“函数外”的上下文环境(和生存周期),然而由于函数的返回值没有被其它变量“持有”,因此_obj2也立即失效了;

- “示例3”中,testObject2()构造的_obj2被外部的变量obj3持用了,这时,直到“obj3=null”这行代码生效时,_obj2才会因为引用关系消失而失效。

- 与示例3相同的原因,“示例4”中的_obj2会在“arr=[]”这行代码之后才会失效。

但是,对象的“失效”并不等会“释放”。在JavaScript运行环境的内部,没有任何方式来确切地告诉用户“对象什么时候会释放”。这依赖于JavaScript的内存回收机制。——这种策略与.NET中的回收机制是类同的。

在前面的Excel操作示例代码中,对象的所有者,也就是"EXCEL.EXE"这个进程只能在“ActiveX Object实例的释放”之后才会发生。而文件的锁,以及操作系统的权限凭证是与进程相关的。因此如果对象仅是“失效”而不是“释放”,那么其它进程处理文件和引用操作系统的权限凭据时就会出问题。

——有些人说这是JavaScript或者COM机制的BUG。其实不是,这是OS、IE和JavaScript之间的一种复杂关系所导致的,而非独立的问题。

Microsoft公开了解决这种问题的策略:主动调用内存回收过程。

在(微软的)JScript中提供了一个CollectGarbage()过程(通常简称GC过程),GC过程用于清理当前IE中的“失效的对象失例”,也就是调用对象的析构过程。

在上例中调用GC过程的代码是:

//---------------------------------------------------------

// 处理ActiveX Object时,GC过程的标准调用方式

//---------------------------------------------------------

function writeXLS() {

//(略...)

excel.Quit();

excel = null;

setTimeout(CollectGarbage, 1);

}

第一行代码调用excel.Quit()方法来使得excel进程中止并退出,这时由于JavaScript环境执有excel对象实例,因此excel进程并不实际中止。

第二行代码使excel为null,以清除对象引用,从而使对象“失效”。然而由于对象仍旧在函数上下文环境中,因此如果直接调用GC过程,对象仍然不会被清理。

第三行代码使用setTimeout()来调用CollectGarbage函数,时间间隔设为'1',只是使得GC过程发生在writeXLS()函数执行完之后。这样excel对象就满足了“能被GC清理”的两个条件:没有引用和离开上下文环境。

GC过程的使用,在使用了ActiveX Object的JS环境中很有效。一些潜在的ActiveXObject包括XML、VML、OWC(Office Web Componet)、flash,甚至包括在JS中的VBArray。从这一点来看,ajax架构由于采用了XMLHTTP,并且同时要满足“不切换页面”的特性,因此在适当的时候主动调用GC过程,会得到更好的效率用UI体验。

事实上,即使使用GC过程,前面提到的excel问题仍然不会被完全解决。因为IE还缓存了权限凭据。使页的权限凭据被更新的唯一方法,只能是“切换到新的页面”,

因此事实上在前面提到的那个SPS项目中,我采用的方法并不是GC,而是下面这一段代码:

//---------------------------------------------------------

// 处理ActiveX Object时采用的页面切换代码

//---------------------------------------------------------

function writeXLS() {

//(略...)

excel.Quit();

excel = null;

// 下面代码用于解决IE call Excel的一个BUG, MSDN中提供的方法:

// setTimeout(CollectGarbage, 1);

// 由于不能清除(或同步)网页的受信任状态, 所以将导致SaveAs()等方法在

// 下次调用时无效.

location.reload();

}

delete 运算符在手册上的说明
引用从对象中删除一个属性,或从数组中删除一个元素。

delete expression

expression 参数是一个有效的 JScript 表达式,通常是一个属性名或数组元素。

说明

如果 expression 的结果是一个对象,且在 expression 中指定的属性存在,而该对象又不允许它被删除,则返回 false。

在所有其他情况下,返回 true。

最后之最后,关于GC的一个补充说明:在IE窗体被最小化时,IE将会主动调用一次CollectGarbage()函数。这使得IE窗口在最小化之后,内存占用会有明显改善

Javascript 相关文章推荐
一个简单的JavaScript 日期计算算法
Sep 11 Javascript
js 动态文字滚动的例子
Jan 17 Javascript
js 3种归并操作的实例代码
Oct 30 Javascript
使用JavaScript获取电池状态的方法
May 03 Javascript
jQuery解析XML与传统JavaScript方法的差别实例分析
Mar 05 Javascript
Vue2.0利用 v-model 实现组件props双向绑定的优美解决方案
Mar 13 Javascript
vue音乐播放器插件vue-aplayer的配置及其使用实例详解
Jul 10 Javascript
JavaScript读写二进制数据的方法详解
Sep 09 Javascript
jQuery实现网页拼图游戏
Apr 22 jQuery
10种JavaScript最常见的错误(小结)
Jun 21 Javascript
javascript刷新父页面方法汇总详解
Oct 10 Javascript
解决Vue的文本编辑器 vue-quill-editor 小图标样式排布错乱问题
Aug 03 Javascript
script标签属性用type还是language
Jan 21 #Javascript
JS交换变量的方法
Jan 21 #Javascript
setinterval()与clearInterval()JS函数的调用方法
Jan 21 #Javascript
js实现DOM走马灯特效的方法
Jan 21 #Javascript
浅谈javascript 迭代方法
Jan 21 #Javascript
js实现用户注册协议倒计时的方法
Jan 21 #Javascript
浅谈javascript 归并方法
Jan 21 #Javascript
You might like
php图片上传存储源码并且可以预览
2011/08/26 PHP
win7 wamp 64位 php环境开启curl服务遇到的问题及解决方法
2018/09/16 PHP
许愿墙中用到的函数
2006/10/07 Javascript
Javscript删除数组中指定元素并返回新数组
2014/03/06 Javascript
JS小游戏之象棋暗棋源码详解
2014/09/25 Javascript
jQuery判断多个input file 都不能为空的例子
2015/06/23 Javascript
AngularJS模仿Form表单提交的实现代码
2016/12/08 Javascript
jQuery插件autocomplete使用详解
2017/02/04 Javascript
jQuery使用EasyUi实现三级联动下拉框效果
2017/03/08 Javascript
nodejs使用redis作为缓存介质实现的封装缓存类示例
2018/02/07 NodeJs
JS实现的input选择图片本地预览功能示例
2018/08/29 Javascript
如何使用 vue + d3 画一棵树
2018/12/03 Javascript
iview实现select tree树形下拉框的示例代码
2018/12/21 Javascript
详解JS取出两个数组中的不同或相同元素
2019/03/20 Javascript
原生js+canvas实现下雪效果
2020/08/02 Javascript
使用python opencv对目录下图片进行去重的方法
2019/01/12 Python
python实现维吉尼亚算法
2019/03/20 Python
numpy concatenate数组拼接方法示例介绍
2019/05/27 Python
Python unittest 自动识别并执行测试用例方式
2020/03/09 Python
使用 django orm 写 exists 条件过滤实例
2020/05/20 Python
python3中TQDM库安装及使用详解
2020/11/18 Python
使用CSS3来匹配横屏竖屏的简单方法
2015/08/04 HTML / CSS
通过CSS3的object-fit来调整图片适配尺寸的技巧简介
2016/02/27 HTML / CSS
html5 canvas里绘制椭圆并保持线条粗细均匀的技巧
2013/03/25 HTML / CSS
逼真的HTML5树叶飘落动画
2016/03/01 HTML / CSS
音乐学院硕士生的自我评价分享
2013/11/01 职场文书
校本教研活动总结
2014/07/01 职场文书
2014年党员加强作风建设思想汇报
2014/09/15 职场文书
2015年法院工作总结范文
2015/04/28 职场文书
海上钢琴师的观后感
2015/06/11 职场文书
就业证明函
2015/06/17 职场文书
“5.12”护士节主持词
2015/07/04 职场文书
中学政教处工作总结
2015/08/13 职场文书
JavaScript展开运算符和剩余运算符的区别详解
2022/02/18 Javascript
浅谈Redis跟MySQL的双写问题解决方案
2022/02/24 Redis
Python利用zhdate模块实现农历日期处理
2022/03/31 Python