简单三步,搞掂内存泄漏


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 相关文章推荐
特殊字符、常规符号及其代码对照表
Jun 26 Javascript
仿163填写邮件地址自动显示下拉(无优化)
Nov 05 Javascript
基于Jquery插件开发之图片放大镜效果(仿淘宝)
Nov 19 Javascript
使用js实现数据格式化
Dec 03 Javascript
jQuery元素的隐藏与显示实例
Jan 20 Javascript
jquery实现input框获取焦点的方法
Feb 06 Javascript
Avalonjs双向数据绑定与监听的实例代码
Jun 23 Javascript
vue父组件向子组件动态传值的两种方法
Nov 11 Javascript
Node错误处理笔记之挖坑系列教程
Jun 05 Javascript
vue完成项目后,打包成静态文件的方法
Sep 03 Javascript
vue使用echarts图表的详细方法
Oct 22 Javascript
17道题让你彻底理解JS中的类型转换
Aug 08 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开发中的中文编码问题
2013/08/08 PHP
PHP遍历目录文件的常用方法小结
2017/02/03 PHP
php+webSoket实现聊天室示例代码(附源码)
2017/02/17 PHP
javascript之通用简单的table选项卡实现(二)
2010/05/09 Javascript
善用事件代理,警惕闭包的性能陷阱。
2011/01/20 Javascript
jquery mobile实现拨打电话功能的几种方法
2013/08/05 Javascript
jQuery的css()方法用法实例
2014/12/24 Javascript
js基础知识(公有方法、私有方法、特权方法)
2015/11/06 Javascript
JavaScript编写Chrome扩展实现与浏览器的交互及时间通知
2016/05/16 Javascript
再谈javascript注入 黑客必备!
2016/09/14 Javascript
解析Javascript单例模式概念与实例
2016/12/05 Javascript
BootStrap组件之进度条的基本用法
2017/01/19 Javascript
jQuery、layer实现弹出层的打开、关闭功能
2017/06/28 jQuery
js使用formData实现批量上传
2020/03/27 Javascript
JS实现图片轮播效果实例详解【可自动和手动】
2019/04/04 Javascript
vue路由对不同界面进行传参及跳转的总结
2019/04/20 Javascript
nodejs搭建本地服务器并访问文件操作示例
2019/05/11 NodeJs
JS实现的简单tab切换功能完整示例
2019/06/20 Javascript
vue 实现购物车总价计算
2019/11/06 Javascript
webpack优化之代码分割与公共代码提取详解
2019/11/22 Javascript
[02:04]2020年夜魇暗潮预告片
2020/10/30 DOTA
测试、预发布后用python检测网页是否有日常链接
2014/06/03 Python
Python异常处理总结
2014/08/15 Python
Python获取邮件地址的方法
2015/07/10 Python
解决Pymongo insert时会自动添加_id的问题
2020/12/05 Python
CSS3 icon font完全指南(CSS3 font 会取代icon图标)
2013/01/06 HTML / CSS
Subside Sports德国:足球球衣和球迷商品
2019/06/08 全球购物
机械电子工程专业推荐信范文
2013/11/20 职场文书
外贸专业求职信
2014/03/09 职场文书
2015年南京大屠杀纪念日活动总结
2015/03/24 职场文书
工作会议通知
2015/04/15 职场文书
德能勤绩工作总结
2015/08/11 职场文书
实例讲解Python中sys.argv[]的用法
2021/06/03 Python
分享Python获取本机IP地址的几种方法
2022/03/17 Python
vue里使用create, mounted调用方法
2022/04/26 Vue.js
Python测试框架pytest核心库pluggy详解
2022/08/05 Golang