Js内存泄露问题总结
最近接受了一个Js职位的面试,问了很多Js的高级特性,才发现长时间使用已知的特性进行开发而忽略了对这门语言循序渐进的理解,包括Java我想也是一样,偶尔在Sun官方看到JDK6.0列举出来的new features才发现很多东西是自己并不知道或者遗忘了的。看来还是要坚持总结技术,反复理解和运用才能保持对任何技术的掌握运用能力阿。
翻了一些Js的新老资料,准备先讲讲Js的内存泄露问题——
当一个DOM对象包含一个Js对象的引用(例如一个Event Handler), 而这个Js对象又持有对这个DOM对象的引用时,一个环状引用就行成了。这本身并不是什么错误或者Bug,因为Js的回收机制能理解这种环状的引用结构并且在没有其他对象能关联到环上的时候回收这个环上的所有对象内存。可不幸的是IE浏览器中的DOM结构并不受Js解释机制管理,所以它并不能理解这种失去外界引用的环状结构,导致环上任何对象都无法被访问到,可是内存依旧占据着,这也就是所谓的Js内存泄露了。
我们来看一个经典的例子说明问题——
- JScript code
(function(limit, delay){
var queue=new Array(10);
var n;
function makeSpan(n){
var s=document.createElement(‘span’);
document.body.appendChild(s);
var t=document.createTextNode(‘ ’+n);
s.appendChild(t);
s.onclick=function(e){
s.style.backgroundColor=’red’;
alert(n);
};
return s;
}
function process(n){
queue.push(makeSpan(n));
var s=queue.shift();
if(s)
s.parentNode.removeChild(s);
}
function loop()}{
if(n<limit){
process(n);
n+=1;
setTimeout(loop,delay);
}
}
loop();
})(10000,10);
这个例子的意义是创建出10000个span元素来添加到DOM的body上,并且对其内容填充序号n,紧接着从queue的第一个位置移除创建的span元素,也就是说10000个为止,不断的创建再移除,永远只保留最新创建的那10个。这个例子满足的条件就是DOM元素带有Js对象即click事件的Event Handler,而Event Handler里面又带有这个DOM元素的引用,于是环状结构行程。
当我在IE上运行这个Js的时候打开任务管理器,很明显的看到此网页的内存从55M左右起很稳定的增长直到结束第10000个span创建完毕停止增长时已经到了167M,而在Firefox上运行此Js得到的数据是从头到尾内存都不会超过70M。这已经说明IE一直都没有解决这种Js内存泄露的问题,即使我用的版本已经是最新的IE8.0。
可以想象在如今Ajax运用越来越多,用户体验要求越来越高的情况下,网页的体积会越来越庞大,可能很频繁的Js程序员需要做的事情就是在某个DOM元素例如Div里添加很多Html代码,用innerHTML赋值进去,然后用户触发某事件后又整个替换掉innerHTML,那么被替换以前的Html代码很可能带有这样的环状结构,导致页面只要不刷新,内存就会一直泄露着越来越严重,直到吃光机器内存。
所以我们提倡人为的打破这种环状结构, 即在DOM元素被抛弃之前移除绑定在上面的Js Event Handler,移除的方法就涉及到DOM事件模型的讨论范围了,我已在另外一篇讨论文章中详细机讲解W3C标准的DOM事件模型和IE的到底有什么区别了,有兴趣的可以看一看。
当然浏览器厂商特别是IE也希望能负起一定的责任起来,早日大一统,算是为广大Js程序员造福吧!
Js内存泄露问题总结的更多相关文章
- JS内存泄露常见原因
详细内容请点击 分享的笔记本-前端 开发中,我们常遇见的一些关于js内存泄露的问题,有时候我们常常会找半天找不出原因,这里给大家介绍简单便捷的方法 1.闭包上下文绑定后没有释放: 2.观察者模式在 ...
- js内存泄露的几种情况详细探讨
内存泄露是指一块被分配的内存既不能使用,又不能回收,直到浏览器进程结束.在C++中,因为是手动管理内存,内存泄露是经常出现的事情.而现在流行的C#和Java等语言采用了自动垃圾回收方法管理内存,正常使 ...
- js内存泄露的几种情况
想解决内存泄露问题,必须知道什么是内存泄露,什么情况下出现内存泄露,才能在遇到问题时,逐个排除.这里只讨论那些不经意间的内存泄露. 一.什么是内存泄露 内存泄露是指一块被分配的内存既不能使用,又不能回 ...
- javascript js 内存泄露
JavaScript 内存泄露 1.什么是闭包.以及闭包所涉及的作用域链这里就不说了. 2.JavaScript垃圾回收机制 JavaScript不需要手动地释放内存,它使用一种自动垃圾回收机制(ga ...
- 一个JS内存泄露实例分析
在看JS GC 相关的文章时,好几次看到了下面这个设计出来的例子,比较巧妙,环环相扣. var theThing = null; var replaceThing = function () { ...
- 浅谈 JS 内存泄露方式与避免方法(二)
Concept WHAT : 内存泄露是指一块被分配的内存既不能使用,又不能回收,直到浏览器进程结束.正常情况下,垃圾回收器在DOM元素和event处理器不被引用或访问的时候回收它们.但是,IE的早些 ...
- Node.js 内存泄露 定位
之前我们在64位Linux服务器上使用Node.js时,当Node进程物理内存接近1.6G,由于谷歌V8引擎对内存的限制,会导致进程退出! 显然我们自身编码或npm加载的第3行模块存在内存泄露问题,那 ...
- node.js内存泄露问题记录
先说一下.事情的来龙去脉. 公司开发一款游戏棋牌游戏,服务端的开发是IO密集型,开发的时候,考虑过使用python,java,node.js. 终于选择了node.js(node.js宣传的杀手功能. ...
- javascript js 内存泄露工具使用
javascript内存泄露工具使用 原文:http://lanhy2000.blog.163.com/blog/static/43678608201121472644851/ 2011-03-14 ...
随机推荐
- JavaScript时钟实例
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- 华为GVRP理解
类似于CISCO的VTP 在大型的网络中,华为交换机之间的串联是很普遍的.一般交换机互联端口都是配置成Trunk,即允许透传多个VLAN的.对于用户来说,手工配置太麻烦.一个规模比较大的网络可能包含多 ...
- poj 2965
http://poj.org/problem?id=2965 本题要结合poj 1753 来看最好...又有了一点搜索的经验..加油... #include <iostream> #inc ...
- 强大的Mockito测试框架(转)
1.自动生成Mock类在需要Mock的属性上标记@Mock注解,然后@RunWith中配置Mockito的TestRunner或者在setUp()方法中显示调用MockitoAnnotations.i ...
- 2015暑假acm短训小结
时间很快,短训已经结束,短短20天,心里有一些思绪想要记下. 收获: 从最近发的随笔中可以看出,做得最多的是搜索——Dfs,Bfs.对于搜索,如何描述状态,如何压缩状态,如何决定下一个结点,是否可以剪 ...
- C与C++ 无参函数的区别
在<C++ 编程思想>:“关于无参函数声明,C与C++有很大的差别.在C语言中,声明int fun1(),意味着一个可以有任意数目和类型的函数:而在C++中,指的却是一个没有参数的函数”. ...
- for循环语句之棋盘放粮食、百鸡百钱、纸张的折叠问题
1.棋盘放粮食 ; ; i < ; i++) { ; ; j <= i; j++) { x = x * ; } lszl = lszl + x; } double zl = lszl * ...
- iOS导航条渐变透明
来源:HelloYeah 链接:http://www.jianshu.com/p/b8b70afeda81 下面这个界面有没有觉得很眼熟.打开你手里的App仔细观察,你会发现很多都有实现这个功能.比如 ...
- iOS 日历控件
近期需要写一个交互有点DT的日历控件,具体交互细节这里略过不表. 不过再怎么复杂的控件,也是由基础的零配件组装起来的,这里最基本的就是日历控件. 先上图: 从图中可以看出日历控件就是由一个个小方块组成 ...
- Currency System in Geraldion (Codeforces 560A)
A Currency System in Geraldion Time Limit:2000MS Memory Limit:262144KB 64bit IO Format:%I64 ...