简单三步,搞掂内存泄漏


Posted in Javascript onMarch 10, 2007
原文地址:http://www.jackslocum.com/blog/2006/10/02/3-easy-steps-to-avoid-javascript-memory-leaks/
你可能还未知道,你浏览的大多数的js网站,会引起 内存泄漏。听起来有点夸张,但这是事实,难道我会骗你吗?
泄漏监视器
Leak Monitor
 这是个方便的FireFox扩展,当你离开那页的时候它便会指向JavsScript对象,如果出现泄漏的话会弹出一个窗口显示细节内容,而且能够告诉你是那个对象或函数引起的泄漏。
离开http://script.aculo.us/的时候
这应该我是最常见的泄漏  prototype.js, line 74:3
 
简单三步,搞掂内存泄漏
The Dojo Mail 例子页面
严重的泄漏,一下子弹出两个窗口 (注意滚动条!)。
简单三步,搞掂内存泄漏
Word Press
这个更离谱。我每次写完Word press,就会出现!
简单三步,搞掂内存泄漏

访问一般的站点,你会发现大多数站点都会出现这类问题。的确,如果一些网站没有经过这样的测试,多少会让人感到震惊,--本来适当一下的修改就可以确保这种问题不会发生。
 虽然这网站(Jack'sBlog、范例)统统都是JavaScript的,但你不必担心任何泄漏的危险。


如下简单的三步:
       1. 当你完成后,设置你的 XMLHttpRequest onreadystatechange handlers 为null,
我使用 YAHOO.util.Connect 来进行XHR链接 ,因为它使用了 polling mechanism来代替readstate, 这样我不用手工set null了。我推荐你,在允许的情况下,使用YAHOO.util.Connect (或建于其之上的 YAHOO.ext.UpdateManager)。
      2. 在unload事件中清除所有 DOM event handlers object ,如果它们有引用 (Refence)的机会的话。
能够让Library做的,就不要用自己的方法做! 对于事件event的机制,我均使用了YAHOO.util.Event来处理. 其它的library (prototype, dojo, etc) 亦有自己的相应的机制来处理。 --尽管我不清楚它们的执行效率去到那里。 如果你再仔细看看上面的截图,你会发现上面的泄漏代码都会关联到这些library里面去(用事实证明事故的源头,Frank注)
      3.除了一些基本类型的数据primitive value (String 、Number),切勿放其它任何东西在 DOM expando 或 property 。当然,你能保证及时清除它的话,便是一个例外。
       这就是最重要的金科玉律了。在DOM expando放东西,你会觉得很方便, 然后用 $()获取它, 但千万不要这样做。 真的,我知道你在想什么,现在的我已经有线想妄想症的认了.没错,很多场合都会把JS对象放到 DOM expando,也没啥状况发生,但也会有很多。。。。这种情况不容易检查出来啊!(例如:闭包closures). 所以要避免任何可能的发生,我只会按照这样的规律做.
摘要

解决这个问题并不是太难。它不需要任何技巧或经验之谈。只要注意好以上几点,一个新手novice也知道如何避免泄漏。
请拜托一些大网站(包括新的 Yahoo Mail!?!?),花点时间,做足功夫,让我(或其他人)浏览你的网页而不遭受内存泄漏。

Javascript 相关文章推荐
JQuery1.6 使用方法三
Nov 23 Javascript
jquery连缀语法如何实现
Nov 29 Javascript
JS继承--原型链继承和类式继承
Apr 08 Javascript
js仿土豆网带缩略图的焦点图片切换效果实现方法
Feb 23 Javascript
Javascript中的迭代、归并方法详解
Jun 14 Javascript
JS三目运算(三元运算)方法详解
Mar 01 Javascript
详解vue+axios给开发环境和生产环境配置不同的接口地址
Aug 16 Javascript
Vue移动端项目实现使用手机预览调试操作
Jul 18 Javascript
浅谈实现在线预览PDF的几种解决办法
Aug 10 Javascript
JavaScript语法约定和程序调试原理解析
Nov 03 Javascript
使用Vue实现一个树组件的示例
Nov 06 Javascript
Rust中的Struct使用示例详解
Aug 14 Javascript
如何简单地用YUI做JavaScript动画
Mar 10 #Javascript
可缩放Reloaded-一个针对可缩放元素的复用组件
Mar 10 #Javascript
为Yahoo! UI Extensions Grid增加内置的可编辑器
Mar 10 #Javascript
Gird事件机制初级读本
Mar 10 #Javascript
Gird组件 Part-3:范例RSSFeed Viewer
Mar 10 #Javascript
对YUI扩展的Gird组件 Part-2
Mar 10 #Javascript
对YUI扩展的Gird组件 Part-1
Mar 10 #Javascript
You might like
php 模拟post_验证页面的返回状态(实例讲解)
2013/10/28 PHP
详解WordPress中提醒安装插件以及隐藏插件的功能实现
2015/12/25 PHP
PHP自定义函数获取汉字首字母的方法
2016/12/01 PHP
详解thinkphp5+swoole实现异步邮件群发(SMTP方式)
2017/10/13 PHP
PHP 图片合成、仿微信群头像的方法示例
2019/10/25 PHP
jquery 可排列的表实现代码
2009/11/13 Javascript
放弃用你的InnerHTML来输出HTML吧 jQuery Tmpl不详细讲解
2013/04/20 Javascript
js中的eventType事件及其浏览器支持性介绍
2013/11/29 Javascript
javascript如何创建表格(javascript绘制表格的二种方法)
2013/12/10 Javascript
如何让浏览器支持jquery ajax load 前进、后退功能
2014/06/12 Javascript
JavaScript截取字符串的2个函数介绍
2014/08/27 Javascript
jQuery实现简单的图片查看器
2020/09/11 Javascript
实现隔行换色效果的两种方式【实用】
2016/11/27 Javascript
prototype与__proto__区别详细介绍
2017/01/09 Javascript
jQuery.Form上传文件操作
2017/02/05 Javascript
老生常谈js中0到底是 true 还是 false
2017/03/08 Javascript
SeaJS中use函数用法实例分析
2017/10/10 Javascript
jquery实现掷骰子小游戏
2019/10/24 jQuery
CentOS6.5设置Django开发环境
2016/10/13 Python
python计算两个地址之间的距离方法
2018/06/09 Python
Python实现朴素贝叶斯分类器的方法详解
2018/07/04 Python
pandas 对日期类型数据的处理方法详解
2019/08/08 Python
使用pytorch实现可视化中间层的结果
2019/12/30 Python
Python 如何展开嵌套的序列
2020/08/01 Python
使用css实现android系统的loading加载动画
2019/07/25 HTML / CSS
几道数据库的概念性面试题
2014/05/30 面试题
简短证婚人证婚词
2014/01/09 职场文书
农民致富事迹材料
2014/01/23 职场文书
人事专员的职责
2014/02/26 职场文书
2014年客房服务员工作总结
2014/11/18 职场文书
2014年乡镇工作总结
2014/11/21 职场文书
给学校的建议书400字
2015/09/14 职场文书
React-vscode使用jsx语法的问题及解决方法
2021/06/21 Javascript
java解析XML详解
2021/07/09 Java/Android
基于HTML十秒做出淘宝页面
2021/10/24 HTML / CSS
SpringBoot深入分析讲解监听器模式下
2022/07/15 Java/Android