IE JS编程需注意的内存释放问题


Posted in Javascript onJune 23, 2009

1、给DOM对象添加的属性是一个对象的引用。范例:
var MyObject = {};
document.getElementById('myDiv').myProp = MyObject;
解决方法:
在window.onunload事件中写上: document.getElementById('myDiv').myProp = null;

2、DOM对象与JS对象相互引用。范例:
function Encapsulator(element) {
    this.elementReference = element;
    element.myProp = this;
}
new    Encapsulator(document.getElementById('myDiv'));
解决方法:
在onunload事件中写上: document.getElementById('myDiv').myProp = null;

3、给DOM对象用attachEvent绑定事件。范例:
function doClick() {}
element.attachEvent("onclick", doClick);
解决方法:
在onunload事件中写上: element.detachEvent('onclick', doClick);

4、从外到内执行appendChild。这时即使调用removeChild也无法释放。范例:
var parentDiv =    document.createElement("div");
var childDiv = document.createElement("div");
document.body.appendChild(parentDiv);
parentDiv.appendChild(childDiv);
解决方法:
从内到外执行appendChild:
var parentDiv =    document.createElement("div");
var childDiv = document.createElement("div");
parentDiv.appendChild(childDiv);
document.body.appendChild(parentDiv);

5、反复重写同一个属性会造成内存大量占用(但关闭IE后内存会被释放)。范例:
for(i = 0; i < 5000; i++) {
    hostElement.text = "asdfasdfasdf";
}
这种方式相当于定义了5000个属性!
解决方法:
其实没什么解决方法:P~~~就是编程的时候尽量避免出现这种情况咯~~

说明:
1、以上资料均来源于微软官方的MSDN站点,链接地址:
http://msdn.microsoft.com/librar ... e_leak_patterns.asp
大家可以到上面这个地址中看到详细的说明,包括范例和图例都有。只是我英文不太好,看不太懂,如果我上述有失误或有需要补充的地方请大家指出。

2、对于第一条,事实上包括 element.onclick = funcRef 这种写法也算在其中,因为这也是一个对对象的引用。在页面onunload时应该释放掉。

3、对于第三条,在MSDN的英文说明中好像是说即使调用detachEvent也无法释放内存,因为在attachEvent的时候就已经造成内存“LEAK”了,不过detachEvent后情况还是会好一点。不知道是不是这样,请英文好的亲能够指出。

4、在实际编程中,这些内存问题的实际影响并不大,尤其是给客户使用时,客户对此绝不会有察觉,然而这些问题对于程序员来说却始终是个心病 --- 有这样的BUG心里总会觉得不舒服吧?能解决则给与解决,这样是最好的。事实上我在webfx.eae.net这样顶级的JS源码站点中,在它们的源码里都会看到采用上述解决方式进行内存的释放管理。

研究 jsvm 的时候,发现 js.lang.System 里面定义了 gc() 方法

System.gc = function ()
{

if (System.isIeBrowser())

{

CollectGarbage();

setTimeout("CollectGarbage();", 1);

}
}

CollectGarbage() 是ie特有的一个释放内存函数

Javascript 相关文章推荐
浅析javascript闭包 实例分析
Dec 25 Javascript
jQuery1.4.2与老版本json格式兼容的解决方法
Feb 12 Javascript
js异步加载的三种解决方案
Mar 04 Javascript
JavaScript将取代AppleScript?
Sep 18 Javascript
用canvas 实现个图片三角化(LOW POLY)效果
Feb 18 Javascript
JS实现太极旋转思路分析
Dec 09 Javascript
Vue 让元素抖动/摆动起来的实现代码
May 31 Javascript
jQuery实现仿京东防抖动菜单效果示例
Jul 06 jQuery
webpack4打包vue前端多页面项目
Sep 17 Javascript
vue2.0中set添加属性后视图不能更新的解决办法
Feb 22 Javascript
怎样使你的 JavaScript 代码简单易读(推荐)
Apr 16 Javascript
深入理解Vue的数据响应式
May 15 Vue.js
js form 验证函数 当前比较流行的错误提示
Jun 23 #Javascript
javascript form 验证函数 弹出对话框形式
Jun 23 #Javascript
WordPress 照片lightbox效果的运用几点
Jun 22 #Javascript
WordPress JQuery处理沙发头像
Jun 22 #Javascript
JQuery 前台切换网站的样式实现
Jun 22 #Javascript
利用JQuery为搜索栏增加tag提示
Jun 22 #Javascript
web 页面分页打印的实现
Jun 22 #Javascript
You might like
php连接Access数据库错误及解决方法
2013/06/20 PHP
PHP 如何获取二维数组中某个key的集合
2014/06/03 PHP
php中base_convert()进制数字转换函数实例
2014/11/20 PHP
PHP常用的小程序代码段
2015/11/14 PHP
CI(Codeigniter)的Setting增强配置类实例
2016/01/06 PHP
javascript void(0)的妙用
2009/10/21 Javascript
jquery html动态生成select标签出问题的解决方法
2013/11/20 Javascript
javascript正则表达式使用replace()替换手机号的方法
2015/01/19 Javascript
JavaScript实现文字与图片拖拽效果的方法
2015/02/16 Javascript
jQuery+CSS3折叠卡片式下拉列表框实现效果
2015/11/02 Javascript
编写高质量JavaScript代码的基本要点
2016/03/02 Javascript
总结jQuery插件开发中的一些要点
2016/05/16 Javascript
简单实现轮播图效果的实例
2016/07/15 Javascript
BootStrap中按钮点击后被禁用按钮的最佳实现方法
2016/09/23 Javascript
基于angularJS的表单验证指令介绍
2016/10/21 Javascript
Vue.js原理分析之observer模块详解
2017/02/17 Javascript
学习使用Bootstrap输入框、导航、分页等常用组件
2017/05/11 Javascript
ES6中的Promise代码详解
2017/10/09 Javascript
基于对象合并功能的实现示例
2017/10/10 Javascript
fullpage.js最后一屏滚动方式
2018/02/06 Javascript
JavaScript函数的4种调用方法实例分析
2019/03/05 Javascript
Node.js折腾记一:读指定文件夹,输出该文件夹的文件树详解
2019/04/20 Javascript
js对象属性名驼峰式转下划线的实例代码
2020/09/17 Javascript
机器学习10大经典算法详解
2017/12/07 Python
Python面向对象类的继承实例详解
2018/06/27 Python
解决tensorflow测试模型时NotFoundError错误的问题
2018/07/26 Python
Python实现二叉搜索树BST的方法示例
2019/07/30 Python
Python人工智能之路 之PyAudio 实现录音 自动化交互实现问答
2019/08/13 Python
在keras里面实现计算f1-score的代码
2020/06/15 Python
Cynthia Rowley官网:全球领先的生活方式品牌
2020/10/27 全球购物
企事业单位求职者的自我评价
2013/12/28 职场文书
销售行政专员岗位职责
2014/06/10 职场文书
同意迁入证明模板
2014/10/26 职场文书
2014年安全员工作总结
2014/11/13 职场文书
公司规章制度范本
2015/08/03 职场文书
JS前端可视化canvas动画原理及其推导实现
2022/08/05 Javascript