简单三步,搞掂内存泄漏_YUI.Ext相关

原文地址: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!?!?),花点时间,做足功夫,让我(或其他人)浏览你的网页而不遭受内存泄漏。

时间: 2024-10-12 09:04:07

简单三步,搞掂内存泄漏_YUI.Ext相关的相关文章

简单三步合成梦幻的心形情侣图片

简单三步合成梦幻的心形情侣图片 教程效果非常漂亮,用到的步骤也很少.重点是创意思维及素材的选区.大致过程:只需要把人物素材拖到心形背景上面,适当溶图即可. 最终效果 <点小图查看大图> 1.打开下图所示的背景素材,用钢笔工具或套索工具把心形部分抠出来,转为选区后按Ctrl + Alt + D 适当羽化,数值自定,然后保存选区. 2.打开人物素材,拖进来,按Ctrl + T 适当调整大小,可先将人物素材的不透明度降低,放到心形上面,方便查看. 3.选择人物图片,把透明度调回到100%,然后再调成

Photoshop简单三步快速打造一张黄色的花朵图片

  Photoshop简单三步快速打造一张黄色的花朵图片 效果   原图   处理过程: 1.打开原图,复制一层,点通道面板,选择蓝色通道,填充黑色.这一步的目的是把花朵改成黄色.   2.点击RGB通道回到图层面板,盖印图层.图层混合模式改为"强光",降低图层不透明度.这一步 的目的是增强图片的对比.   3.盖印图层,用你最擅长的方法给图片锐化一下,完成效果.            注:更多精彩教程请关注三联photoshop教程栏目,三联PS群:182958314欢迎你的加入 分

简单三步教你打造创意人物碎片感照片

  最近很多人问我人物碎片感的照片怎么做,方法有很多种,我选取了其中两种方法,一种是素材制作,一种是手工用图章制作.可以下载不同的素材,放在图片上制作飘零的感觉. 下面一起来看看吧. 原图. 做好的效果图. 下面看看,如何用简单几步做出如此的效果. 第一步,首先,通过百度搜词"碎片素材"找个相关素材.如同所示: 接着删除白色部分,只留飘零的树叶. 第二步:把素材置于图片之中. 接着,按住红线框按钮,将图层锁定. 第三步,使用图章工具,按住ALT键选点,然后涂到素材图层上,记住,要选择素

photoshop简单三步搞定毛笔字形制作教程

给各位photoshop软件的使用者们来详细的解析分享一下简单三步搞定毛笔字形的制作教程. 教程分享:   毛笔字体恣意洒脱,有摧枯拉朽之势,无奈中文字库里面的字型只有其形,却无其势,让我们的作品呈现出的感觉大打折扣.问题所在就是缺少了书法应有的飞白,其实想要设计出一款非常好看的毛笔字形其实很简单,简单到只要三步就可以完成,一起来看吧. [第一步 确立字形](书法好的朋友可以写出来再按照我的方法生成,我就不献丑了) 很多网站都有毛笔字体在线生成的功能(百度毛笔字在线生成即可找到),我们需要选用一

如何简单地用YUI做JavaScript动画_YUI.Ext相关

原文地址:http://www.jackslocum.com/blog/2006/08/24/javascript-animations-with-yahoo-ui-made-easy/ YUI的动画类简直就是一门艺术工作.不像其它的传统的JS库,提供了已经"预设好"的直接可运行的效果,相反,它由开发者做自己喜欢的.在这点,我比较喜欢适当地运行一些动画和变换效果,越多越好. 按照这么地说,也会有个问题.动画API是非常"底层"的工作,而且需要您花时间去弄的,子类的构

FLASH简单三步制作飞越星空效果

动画效果: 首先新建一长和宽为420PX:帧频:25:背景色为黑色的影片: 第一步:先建一影片剪辑:共30帧:是一个白色的圆从大到小水平运动的动画:及第一帧是长和宽为10的大圆:透明度为100:第30帧是一个长和宽为1PX的小圆:透明度为0:如下图: 第二步:回到主场景:将刚刚制作好的MC:拖到主场景一帧,并命名为:zishu ;然后在第二帧插入帧: 第三步:新建一层:在第一帧加入如下AS: 程序代码 bobo = random(100); setProperty("zishu", _

简单三步 日系摄影师教你实景变成动画

  他喜欢有故事的画面和有画面的音乐,而他的摄影作品也确实像动画一样,故事感中夹杂着质感.而那些散发着浓浓动画feel的作品,后期步骤仅需简单的三步这你又能想到吗?今天就来看看如何通过简单的三步还原动画吧! 这张作品拍摄于东京丰岛区一条坡道上,近处是一栋古宅,远处是新宿的高楼群,正是夕阳西下,很符合动画里的场景和氛围.于是按下了这张(NlKON D8OO,35mm f2d). 由于数码相机不能像胶片机那样有很大的色彩宽容度,于是需要通过后期调色来让它具有动画场景的感觉. 1.减少光比,意义就是让

简单三步 为你的系统快速打补丁

  一台计算机在使用过程中,在系统补丁方面可能存在以下问题: 一是计算机已经打了补丁,但却不一定完整,而且在补丁的后续更新方式和更新时间方面存在一定的问题; 二是计算机根本就没有打补丁,因而存在较多的安全隐患,当然最新发布的后续漏洞补丁就更没有处理了. 目前处理漏洞补丁的常用方法是通过漏洞扫描工具软件,如瑞星杀病毒系统.30安全卫士软件.金山毒霸系统等扫描本机漏洞后,把相应的补丁从互联网下载到本机后运行,给系统打上补丁.这种方法存在以下具体的问题: 首先需要接入互联网,假如计算机是单机使用或是只

简单三步轻松实现ORACLE字段自增_oracle

第一步:创建一个表. 复制代码 代码如下: create table Test_Table ( ID number(11) primary key, Name varchar(50) not null, Value1 varchar(50) not null ) 第二步:创建一个自增序列以此提供调用函数. 复制代码 代码如下: create sequence AutoID start with 1 //根据需要自己可修改该数值 increment by 1 //步长值 minvalue 1 no