简单三步,搞掂内存泄漏


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 相关文章推荐
JavaScript初学者应注意的七个细节详细介绍
Dec 27 Javascript
js实现瀑布流的一种简单方法实例分享
Nov 04 Javascript
jQuery如何取id有.的值一般的方法是取不到的
Apr 18 Javascript
iframe里的页面禁止右键事件的方法
Jun 10 Javascript
js 动态修改css文件用到了cssRule
Aug 20 Javascript
ECMAScript中函数function类型
Jun 03 Javascript
JS实现网页游戏中滑块响应鼠标点击移动效果
Oct 19 Javascript
Angular2安装angular-cli
May 21 Javascript
js实现首屏延迟加载实现方法 js实现多屏单张图片延迟加载效果
Jul 17 Javascript
浅谈es6中export和export default的作用及区别
Feb 07 Javascript
vue 对象添加或删除成员时无法实时更新的解决方法
May 01 Javascript
JavaScript实现沿五角星形线摆动的小圆实例详解
Jul 28 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中运用jQuery的Ajax跨域调用实现代码
2012/02/21 PHP
PHP中获取文件扩展名的N种方法小结
2012/02/27 PHP
Laravel 5框架学习之用户认证
2015/04/09 PHP
php进程(线程)通信基础之System V共享内存简单实例分析
2019/11/09 PHP
Laravel Eloquent分表方法并使用模型关联的实现
2019/11/25 PHP
尽可能写"友好"的"Javascript"代码
2007/01/09 Javascript
jquery 新浪网易的评论块制作
2010/07/01 Javascript
手机端页面rem宽度自适应脚本
2015/05/20 Javascript
js实现微信分享代码
2020/10/11 Javascript
Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法
2016/06/23 Javascript
JS生成不重复的随机数组的简单实例
2016/07/10 Javascript
jQuery购物网页经典制作案例
2016/08/19 Javascript
AngularJS入门教程之数据绑定用法示例
2016/11/01 Javascript
react-native 完整实现登录功能的示例代码
2017/09/11 Javascript
Webpack4+Babel7+ES6兼容IE8的实现
2019/04/10 Javascript
个人小程序接入支付解决方案
2019/05/23 Javascript
jquery validate 实现动态增加/删除验证规则操作示例
2019/10/28 jQuery
[54:08]LGD女子刀塔学院 DOTA2炼金术士教学
2014/01/09 DOTA
[05:31]DOTA2英雄梦之声_第04期_光之守卫
2014/06/23 DOTA
[03:20]2015国际邀请赛全明星表演赛
2015/08/08 DOTA
Python实现简单字典树的方法
2016/04/29 Python
Python基于二分查找实现求整数平方根的方法
2016/05/12 Python
Python3下错误AttributeError: ‘dict’ object has no attribute’iteritems‘的分析与解决
2017/07/06 Python
selenium设置proxy、headers的方法(phantomjs、Chrome、Firefox)
2018/11/29 Python
python实现任意位置文件分割的实例
2018/12/14 Python
Python操作远程服务器 paramiko模块详细介绍
2019/08/07 Python
python使用正则表达式匹配txt特定字符串(有换行)
2020/12/09 Python
创业资金计划书
2014/02/06 职场文书
预备党员的自我评价
2014/03/12 职场文书
绿色家庭事迹材料
2014/05/01 职场文书
捐助贫困学生倡议书
2014/05/16 职场文书
个人剖析材料范文
2014/09/30 职场文书
2014年教师教学工作总结
2014/11/08 职场文书
介绍信的写法
2015/01/31 职场文书
珍惜时间的诗歌赏析
2019/08/23 职场文书
spring cloud gateway中如何读取请求参数
2021/07/15 Java/Android