关于Ext内存泄漏的部分心得

最新推荐文章于 2014-01-01 22:59:00 发布
最新推荐文章于 2014-01-01 22:59:00 发布
阅读量1.7k 收藏 2
点赞数
分类专栏： EXT ajax 文章标签： ext function 浏览器 object ie html
ajax 同时被 2 个专栏收录
213 篇文章 0 订阅
订阅专栏
EXT
192 篇文章 0 订阅
订阅专栏

首先说明下，本帖所描述的泄漏是指JS运行中的释放问题，它们大多数在页面关闭时都能释放掉。
----
内存释放在使用Ext开发OPOA系统时显得尤为重要
去年开始接触Ext开发，中间花了很多时间来解决内存泄漏。
最开始Ext还是3.0版，泄漏得一塌胡涂，也没什么处理头绪，只知道在onDestroy里加delete语句，用sIEve看效果。
而Ext3.1有了一个很大的进步，基本上绝大多数组件都没有泄漏了。但并不意味着Ext没泄漏，做出的页面也没泄漏。JS是自动回收的，而只要有一个引用没有释放就可能导致一大片JS对象及Dom节点无法释放，所以迟早还是会面对这个问题。

本人不擅长表达，就直接列心得吧。

一、泄漏的分类
1. 组件创建后未销毁(Ext层面)
这里说的组件一般是指继承自Ext.Component的，它在创建时会注册到Ext.ComponentMgr中，不调用destroy方法是不会从中移除的，所以它永远不会被释放。
大部分组件是放置于Container中，Container销毁会将子组件一起销毁，是不存在这个问题。但当它是Ext.Window(没有父容器)或手工render的组件(例如用模板画html，再render到指定Dom节点)时，如果不主动销毁问题就发生了。

2. 组件自身有泄漏或使用不当(JS&Dom层面)
目前Ext原生组件的泄漏已经很少了，但自己扩展的组件不注意的话会造成浏览器无法释放的泄漏。
(参考：http://www.ibm.com/developerworks/cn/web/wa-memleak/index.html)
而使用不当是指破坏了组件内部结构，导致无法完全释放。

3. JS对象泄漏(JS层面)
JS是有自动回收机制，但它也只会回收你用不到的对象（或者说你已经不可能访问到的对象）
所以，如果在一个长时间运行的JS代码中，你创建了很多属性或对象，并且一直保存着它们的引用，也会使内存增长。
正确的做法是，不用的属性就要delete掉，不用的对象也要解除引用。（delete引用的属性或置变量为null）

看似很少，积少成多也不得了，在1,2类泄漏解决完后，就要面对这样的问题了。

4. 浏览器自身比较恶心的bug
虽然JS&Dom循环引用无法释放也算是浏览器的bug，但好像不只是IE独有，所以没有归到此类。
目前我已经知道的IE的两个很恶心的bug：
1. IE Object leaks
http://www.sencha.com/forum/showthread.php?89317-quot-IE-object-leaks-quot-What-s-going-on
简单点描述，就是IE下，将JS对象的属性delete掉后，属性引用的对象是会解除引用，但属性本身占用的内存不会释放。虽然增长很少，但在极端情况也绝不能无视。

2. IE 8 bug
http://www.javaeye.com/topic/617997 
（一点题外话，想不通为什么这帖被评为隐藏帖，大家都这么高手了？国内还真没看到什么人提起过这问题）
在IE8下，form, button, input, select, textarea, a, img, object这些Dom节点，只要创建了就不会被释放掉（其实在IE6/7下，form节点也会有问题）。对这个真的很无语。。。

二、泄漏检查
1. 组件泄漏
这个比较简单，可以写个函数记录Ext.ComponentMgr.all(Ext.util.MixedCollection)中的组件列表，从而判断哪些组件还没有被销毁。

2. 组件内部泄漏
这个就要用sIEve查看了。创建、销毁组件，看Dom列表有无没释放的。

3. JS对象泄漏
当有个内存无法释放的问题，使用sIEve又检查不出Dom节点泄漏，一般就是JS对象的问题了
只能用笨办法：逐步排除
一种是使用Firefox + firebug，直接展开JS对象，查找属性有没有无限制增长。
再一种就是使用IE6/7，调快逻辑执行，长时间运行，记录任务管理器中显示的虚拟内存（不能用其它浏览器，经测试FF和Chrome缓存很厉害，很难测出增长。也不能用sIEve，它监控内存及dom数量时也会造成内存增长，IE8有些bug会影响判断），看有无无限制增长。

4. 浏览器自身bug
对于IE Object leaks，同JS对象泄漏检测。
IE8的，据我测试，sIEve用的是IE7内核，所以无能为力，也是同3的方法。

三、定位并解决
1. 组件泄漏
找到没销毁的，扩展onDestroy，在其中销毁掉。

2. 组件内部泄漏
定位泄漏的Dom节点关联的代码，查检有没有调用removeNode移除，有没有循环引用
具体的不好讲，原因非常多，可以边改边用sIEve看效果。
注意： 请开启Ext.enableListenerCollection = true;这个配置，以便Ext自动回收孤立Dom节点上的事件。默认只会将孤立节点从Ext.elCache中移除，而不会清理事件，可能会导致泄漏。另外需注意Ext每30秒才清理一次，注意分辨。

3. JS对象泄漏
这个没啥办法。。。只能调快操作长时间运行查看平均增长，然后一步步改代码排除了……

4. 浏览器自身bug
IE Object leaks:
参考Ext的解决方案，将对象for in循环复制一份，替换旧的。
IE 8 bug:
尽量避免重复创建form, button, input, select, textarea, a, img, object这些Dom节点，能替换就替换，能复用就复用。

关于内存泄漏的解决方法，以上几乎没写什么有用的东西，说实话，我也不知道该写些什么。
因为我处理的内存泄漏大部分都是排除法定位并解决的，现在除了sIEve能查看Dom节点泄漏，没啥好用的工具能检查与之相关的JS对象的情况。从而导致只能靠蒙来找到造成泄漏的代码。

四、一些泄漏实例
1. 组件泄漏
举些常见的例子
a) 弹出窗口未销毁

Js代码 复制代码  收藏代码
  1. Ext.ns("Ext.ux");   
  2. Ext.ux.MyWindow = Ext.extend(Ext.Window, {   
  3.     closeAction : "hide",   
  4.     modal : true,   
  5.     initComponent : function(){   
  6.         this.buttons = [{   
  7.             text : "确定",   
  8.             handler : function(){   
  9.                 this.fireEvent("confirm");   
  10.                 this.hide();   
  11.             },   
  12.             scope : this  
  13.         }];   
  14.         Ext.ux.MyWindow.superclass.initComponent.apply(this, arguments);   
  15.     }   
  16. });   
  17. Ext.ux.MyComponent = Ext.extend(Ext.Panel, {   
  18.     initComponent : function(){   
  19.         // 它创建出来，没有父容管理，也没有主动销毁   
  20.         this.win = new Ext.ux.MyWindow({   
  21.             width : 300,   
  22.             height : 400,   
  23.             title : "配置xxx",   
  24.             html : "内容xxx"  
  25.         });   
  26.         this.win.on("confirm", this.confirmCfg, this);   
  27.         this.tbar = [{   
  28.             text : "设置xxx",   
  29.             handler : function(){   
  30.                 this.win.show();   
  31.             },   
  32.             scope : this  
  33.         }];   
  34.         Ext.ux.MyComponent.superclass.initComponent.apply(this, arguments);   
  35.     },   
  36.     confirmCfg : function(){   
  37.         // do something   
  38.     }   
  39. });   
  40.   
  41. var test = new Ext.ux.MyComponent({   
  42.     title : "测试面板",   
  43.     html : "test",   
  44.     renderTo : Ext.getBody()   
  45. });   
  46.   
  47. // 创建&销毁   
  48. test.destroy();   
  49. test = null;  



b) 创建出来未使用，也未销毁

Js代码 复制代码  收藏代码
  1. Ext.ns("Ext.ux");   
  2. Ext.ux.MyComponent = Ext.extend(Ext.Panel, {   
  3.     initComponent : function(){   
  4.         this.btnA = new Ext.Button({   
  5.             text : "模式A",   
  6.             handler : function(){}   
  7.         });   
  8.         this.btnB = new Ext.Button({   
  9.             text : "模式B",   
  10.             handler : function(){}   
  11.         });   
  12.         // btnA与btnB必有一个未纳入Toolbar管理，也未主动销毁   
  13.         this.tbar = [this.mode==="a" ? this.btnA : this.btnB];   
  14.         Ext.ux.MyComponent.superclass.initComponent.apply(this, arguments);   
  15.     }   
  16. });   
  17.   
  18. // 创建&销毁   
  19. var test = new Ext.ux.MyComponent({   
  20.     title : "测试面板",   
  21.     html : "test",   
  22.     renderTo : Ext.getBody()   
  23. });   
  24.   
  25. test.destroy();   
  26. test = null;  



c) 直接render到dom子节点中，未显式销毁

Js代码 复制代码  收藏代码
  1. Ext.ns("Ext.ux");   
  2. Ext.ux.MyComponent = Ext.extend(Ext.BoxComponent, {   
  3.     tpl : "{text}：<div class='combo'></div>",   
  4.     afterRender : function(){   
  5.         Ext.ux.MyComponent.superclass.afterRender.apply(this, arguments);   
  6.         this.setCombo();   
  7.     },   
  8.     update : function(){   
  9.         Ext.ux.MyComponent.superclass.update.apply(this, arguments);   
  10.         this.setCombo();   
  11.     },   
  12.     setCombo : function(){   
  13.         // this.combo每次更新时都创建了新实例，没有销毁旧的，组件销毁时也未销毁它。   
  14.         this.combo = new Ext.form.ComboBox({   
  15.             store : new Ext.data.ArrayStore({   
  16.                 fields: ['id', 'mode'],   
  17.                 data :  [   
  18.                     ['1', 'mode1'],   
  19.                     ['2', 'mode2']   
  20.                  ]   
  21.             }),   
  22.             valueField : "id",   
  23.             displayField:'mode',   
  24.             mode: 'local',   
  25.             triggerAction: 'all',   
  26.             emptyText:'请选择模式',   
  27.             selectOnFocus:true  
  28.         });   
  29.         this.combo.render(this.el.child("div.combo"));   
  30.     }   
  31. });   
  32.   
  33. // 创建&销毁   
  34. var test = new Ext.ux.MyComponent({   
  35.     data : {   
  36.         text : "请选择模式"  
  37.     },   
  38.     renderTo : Ext.getBody()   
  39. });   
  40.   
  41. test.destroy();   
  42. test = null;  



2. 组件内部泄漏
这一类例子不太好举，Ext自身几乎不存在这种泄漏了，就以excanvas为例吧：

Js代码 复制代码  收藏代码
  1.     /**  
  2.      * Public initializes a canvas element so that it can be used as canvas  
  3.      * element from now on. This is called automatically before the page is  
  4.      * loaded but if you are creating elements using createElement you need to  
  5.      * make sure this is called on the element.  
  6.      * @param {HTMLElement} el The canvas element to initialize.  
  7.      * @return {HTMLElement} the element that was created.  
  8.      */  
  9.     initElement: function(el) {   
  10.       if (!el.getContext) {   
  11.   
  12.         el.getContext = getContext; // 给Dom节点添加了方法属性，造成dom -> js引用   
  13.   
  14.         // Remove fallback content. There is no way to hide text nodes so we   
  15.         // just remove all childNodes. We could hide all elements and remove   
  16.         // text nodes but who really cares about the fallback content.   
  17.         el.innerHTML = '';   
  18.   
  19.         // do not use inline function because that will leak memory   
  20.         el.attachEvent('onpropertychange', onPropertyChange); // 添加了事件，造成dom -> js引用   
  21.         el.attachEvent('onresize', onResize);   
  22.   
  23.         var attrs = el.attributes;   
  24.         if (attrs.width && attrs.width.specified) {   
  25.           // TODO: use runtimeStyle and coordsize   
  26.           // el.getContext().setWidth_(attrs.width.nodeValue);   
  27.           el.style.width = attrs.width.nodeValue + 'px';   
  28.         } else {   
  29.           el.width = el.clientWidth;   
  30.         }   
  31.         if (attrs.height && attrs.height.specified) {   
  32.           // TODO: use runtimeStyle and coordsize   
  33.           // el.getContext().setHeight_(attrs.height.nodeValue);   
  34.           el.style.height = attrs.height.nodeValue + 'px';   
  35.         } else {   
  36.           el.height = el.clientHeight;   
  37.         }   
  38.         //el.getContext().setCoordsize_()   
  39.       }   
  40.       return el;   
  41.     },   
  42. // ......   
  43.   /**  
  44.    * This funtion is assigned to the <canvas> elements as element.getContext().  
  45.    * @this {HTMLElement}  
  46.    * @return {CanvasRenderingContext2D_}  
  47.    */  
  48.   function getContext() {   
  49.     // 调用getContext，在dom上添加了js对象引用，造成dom -> js引用   
  50.     return this.context_ ||   
  51.         (this.context_ = new CanvasRenderingContext2D_(this));   
  52.   }   
  53. //.....   
  54.   /**  
  55.    * This class implements CanvasRenderingContext2D interface as described by  
  56.    * the WHATWG.  
  57.    * @param {HTMLElement} surfaceElement The element that the 2D context should  
  58.    * be associated with  
  59.    */  
  60.   function CanvasRenderingContext2D_(surfaceElement) {   
  61.     this.m_ = createMatrixIdentity();   
  62.   
  63.     this.mStack_ = [];   
  64.     this.aStack_ = [];   
  65.     this.currentPath_ = [];   
  66.   
  67.     // Canvas context properties   
  68.     this.strokeStyle = '#000';   
  69.     this.fillStyle = '#000';   
  70.   
  71.     this.lineWidth = 1;   
  72.     this.lineJoin = 'miter';   
  73.     this.lineCap = 'butt';   
  74.     this.miterLimit = Z * 1;   
  75.     this.globalAlpha = 1;   
  76.     this.canvas = surfaceElement; // 在JS对象上引用了dom节点，这里算是一个循环引用。   
  77.   
  78.     var el = surfaceElement.ownerDocument.createElement('div');   
  79.     el.style.width =  surfaceElement.clientWidth + 'px';   
  80.     el.style.height = surfaceElement.clientHeight + 'px';   
  81.     el.style.overflow = 'hidden';   
  82.     el.style.position = 'absolute';   
  83.     surfaceElement.appendChild(el);   
  84.   
  85.     this.element_ = el; // 同样，JS对象引用dom节点   
  86.     this.arcScaleX_ = 1;   
  87.     this.arcScaleY_ = 1;   
  88.     this.lineScale_ = 1;   
  89.   }  



3. JS对象泄漏
在前面已经介绍过Ext.lib.Ajax存在的属性未移除情况，如果想要更详细，可以看这里：
http://www.sencha.com/forum/showthread.php?103148-OPEN-1099-Tiny-memory-increase-in-Ext.lib.Ajax-so-tiny...

4. 浏览器bug
IE Object leaks，参考Ext作法：

Js代码 复制代码  收藏代码
  1. if (Ext.isIE) {   
  2.     var t = {};   
  3.     for (eid in EC) {   
  4.         t[eid] = EC[eid];   
  5.     }   
  6.     EC = Ext.elCache = t;   
  7. }  


IE 8 bug，没啥说的，bug描述得很清楚，怎么避免各显神通吧

PS：有个firefox相关的工具可以查看JS运行状态，非常详细非常专业，但我研究了一天没弄懂
有会用的人发发心得吧。。。
http://www.softwareverify.com/javascript/memory/index.html
点页面右边的eval获取评估版注册码。

冷月宫主
关注
专栏目录
Ext3.4部分使用心得
04-15
NULL 博文链接：https://xnbhnly.iteye.com/blog/1758105
ExtJS开发时，注意"游离"的组件实例引发内存泄漏
小桥流水丿小溪
06-28 414
情形 最常见的情况，就是不断创建右键菜单，如下： 上面的代码，每次右键点击，都创建了一个 menu 实例，用完未销毁。以后再也无法引用到这些实例，这样就引发内存泄漏。这种错误的做法一般新人都会经历的。 组件 不同于 一般的 object，一般的 object 可能可以被垃圾回收，但是组件实例因为有 dom 存在，需要销毁。 一般，父容器的销毁，会自动销毁其下的子组件。然而上述代码中创建的 men...
解决Ext的窗口关闭还占用内存的问题
winjiajia的专栏
06-22 104
/**  解决Ext的窗口关闭还占用内存的问题**/Ext.Window.prototype.beforeDestroy = function(){        Ext.destroy(   this.focusEl,  // 新增   this.bwrap, // 新增            this.resizer,            this.dd,            this.p...
Ext的destroy机制引起的内存问题的分析( 二 )
大城小胖的大城
03-20 454
前几天讨论了一下 ext的 Destroy机制引起的内存问题 发现出现问题的核心点 是 element.removeAllListeners 方法. 相关讨论见: Ext2.02事件机制缺陷分析,以及解决方案 http://fins.iteye.com/blog/173818 EXT的destroy方法是不是存在漏洞? http://fins.iteye.com/blog/...
js、document.createElement()的用法
bugstack虫洞栈
08-21 1899
分析代码时，发现自己的盲点——document.createElement()，冲浪一番，总结了点经验。 document.createElement()是在对象中创建一个对象，要与appendChild() 或 insertBefore()方法联合使用。其中，appendChild() 方法在节点的子节点列表末添加新的子节点。insertBefore() 方法在节点的
ExtJs发布大量内存泄露的解决办法
冷月宫主的专栏
02-12 1069
代表EXT团队，我非常高兴地宣布的 Ext JS 3.1的最终版本正式发布。在这个版本中，我们再次承诺会让EXT JS 的功能和性能都变得更好。你可以在下载页面看到一个完整的变更和联机日志文件。 Internet Explorer 内存优化 单页的，组合的，web应用程序已经越来越较为普遍，在所有浏览器上的内存管理器已成为一个至关重要的问题。在EXT JS 3.1中，我们已应用了很多内存泄
ext2.2的内存泄漏补丁
12-06
"ext2.2的内存泄漏补丁"针对的就是这个问题，它是一个专为解决EXT2.2框架中内存泄漏问题而设计的更新。 EXT是一个流行的JavaScript库，用于构建富客户端Web应用程序。EXT2.2是这个库的一个特定版本，它提供了丰富的...
ext内存泄露的两个补兵
02-06
通过重写源码以增强内存管理，以及利用内存分析工具定位问题，可以有效地解决EXT内存泄露，提升应用的性能和稳定性。在实践中，结合良好的编程习惯和内存管理策略，将有助于构建高效且健壮的EXT应用。
ext内存泄露补丁文件！！
11-06
"ext内存泄露补丁文件"指的是EXTJS框架中针对内存泄露问题的修复补丁。EXTJS是一个流行的JavaScript库，用于构建富客户端应用程序，其组件化的设计使得开发者能够创建复杂的用户界面。然而，由于JavaScript的异步...
ext5第三部分
01-05
【标题】：“ext5第三部分” 【描述】：“ext5第三部分”可能指的是Linux文件系统EXT4（Extended File System）的扩展或改进的第三个阶段，虽然实际上EXT5并不存在。EXT4是EXT3的后续版本，它在2008年被引入Linux...
ExtJS内存泄漏问题详解
06-04
关于ExtJS内存泄漏问题，一直是ExtJS开发人员困扰的问题，这篇文档很好地解释了什么是内存泄漏，为什么会产生内存泄漏。能够帮助程序员使用ExtJS开发出更高效安全的代码。
EXT 内存泄漏原因分解？
xiongjiuliang的专栏
04-18 525
<br />使用Ext的时候，发现即使不使用ext-all，而是依赖什么就添加依赖的js之后一个简单的Panle展示还是要消耗掉7-8M内存即使什么都不展示，只引入ext-all.js，浏览器就会增加7-8M内存，这是无法忍受的。假如我一个页面有好几个IFrame的话，每个都占5-6M内存（注意IFrame是不能共享js的，所有每一个都要有ext-all.js），这样4个就要20M内存。大家有没有什么好的想法，可以减少内存消耗呢<br />
IE8中的内存泄露
雾塔晨钟
03-17 267
最近开发的时候对页面使用了定时的局部更新，结果在ie6，7和Firefox下，一切正常，而在ie8下过上几个小时就浏览器就崩溃了，显示是内存溢出，我以为是代码写的不好导致内存泄露，但是ie6，7又正常，调查了一下，原来这是ie8的bug。 [size=large]问题点[/size] 在IE8中，生成特定Dom节点所占用的内存是不会被释放的，即使这些节点被删除内存也不会被释放。 ...
Extjs内存泄漏与解决思路
chimu9074的博客
01-01 401
JS是自动回收的，而只要有一个引用没有释放就可能导致一大片JS对象及Dom节点无法释放，所以迟早还是会面对这个问题。 一、泄漏的分类 1. 组件创建后未销毁(Ext层面) 这里说的组件 一般是指继承自Ext.Component的，它在创建时会注册到Ext.Co...
Ext JS无限级树形菜单实现：内存多叉树方法
"基于内存多叉树的Ext JS无限级树形菜单实现方案，通过一次构建多级JSON字符串，一次性生成树形菜单，适用于小数据量的无限层级菜单展示。" 在Web应用程序开发中，Ext JS框架因其丰富的客户端组件和优秀的用户体验...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值