`
thecloud
  • 浏览: 872035 次
文章分类
社区版块
存档分类
最新评论

几个ajax js性能优化和内存泄露问题及检测分析工具

 
阅读更多
随着项目中应用ext和ajax日益增多,性能问题和内存泄露问题(内存泄露问题的一个例子 IE下闭包引起跨页面内存泄露探讨 http://www.javaeye.com/topic/180611)越来越成为面对的主要问题,下面是推荐的几个小工具,可以帮助更好地发现内存泄露,提升web性能。

----1 web性能分析工具YSlow http://developer.yahoo.com/yslow/ ff版本

这是yahoo的一个工具,可以对页面性能进行评估并给出修改建议,分析出页面访问瓶颈,给出分析报告,必须在安装前安装firebug(没有安装或者不太了解firebug请访问http://www.ibm.com/developerworks/cn/web/wa-aj-firebug/)

功能组件简要介绍
1 performance 性能评估打分,右击箭头可看到改进建议
2 stats 缓存状态分析,传输内容分析
3 components 所有加载内容分析,可以查看传输速度,找出页面访问慢的瓶颈
4 tools 可以查看js和css,并打印页面评估报告

2 内存泄露检测工具 sIEve http://home.wanadoo.nl/jsrosman/

sIEve 是基于ie的内存泄露检测工具,需要下载运行,可以查看dom孤立节点和内存泄露及内存使用情况

中文使用简介http://hi.baidu.com/dqar/blog/item/84242db56512adcb37d3ca7a.html

sf http://sourceforge.net/projects/ieleak/ 貌似已经被和谐了-_-

3 内存泄露提示工具 leak monitor http://dbaron.org/mozilla/leak-monitor/ ff版本

leak monitor 在安装后,当离开一个页面时,比如关闭窗口,如果页面有内存泄露,会弹出一个文本框进行即时提示

ps:一下
在IE下监控页面内存资源和dom节点(sIEve软件使用简介)
先注明一下: 这篇文章只是讲解 在IE下如何利用 sIEve(一个drip的加强版) 来发现 内存泄露和内存回收问题,
而不是讲解关于 IE的内存管理和内存泄露原理的文章.
关于IE的内存管理和内存泄露的更多知识还麻烦大家自行google了.
sIEve 是 一个帮助我们查看ie浏览器(他本身基于操作系统安装的ie内核)内存的使用和内存泄露问题的.
它可以:
Java代码
1 列出当前页面内所有dom节点的基本信息(html id style 等)
2 页面内所有dom节点的高级信息 (内存占用,数量,节点的引用)
3 可以查找出页面中的孤立节点
4 可以查找出页面中的循环引用
5 可以查找出页面中产生内存泄露的节点
1 列出当前页面内所有dom节点的基本信息(html id style 等)2 页面内所有dom节点的高级信息 (内存占用,数量,节点的引用)3 可以查找出页面中的孤立节点4 可以查找出页面中的循环引用5 可以查找出页面中产生内存泄露的节点
更详细的帮助文档见:
http://home.orange.nl/jsrosman/sievehelp.htm
我下面只是简单介绍一下
请大家先下载附件里的 演示文件 和 sIEve 软件
运行后, 在上面的address栏内输入 要测试的页面地址 如 file:///D:/mydev/ie_mem/test_ie.html

下端是内存变化的曲线图 右上角是各种功能按钮
右下角是页面内的信息(很重要),该列表自动定时刷新. 5列信息依次是:
内存总体占用量(单位kb)
和上次列表自动刷新时相比,变化的量
当前的dom节点数目
产生内存泄露的节点数目
日志信息(节点发生异常时记录一些信息 不常用)
下面开始看一下他是如何使用的
1 ie下不好的移除节点的方式
点击测试页面的"_removeNode div_1"按钮
大家可以看到 div被从页面内移除, 但是看右面的信息列表里 "当前的dom节点数目"并没用变化
点击右上角的功能按钮: show in use.
这时候大家可以在弹出的窗口内 看到 的节点 是孤立状态 而没有被回收 (还有两个孤立节点 大家不用管)

(118.26 K)
2008/7/29 12:46:02
2 ie下更好的移除节点的方式
关掉弹出的窗口, 点击 测试页面的"removeElement div_2"按钮, div_2被移除 而且"当前的dom节点数目"减少
查看show in use. 大家可以看到 div_2及其子节点已经被真的移除了.
上面两个试验演示了如何查看孤立节点, 同时说明了第二种移除节点的方法更有效.
3 循环
关掉弹出的窗口, 点击 测试页面的"createCycle div_3"按钮,
然后点击右上角的功能按钮: scan now. (旁边的那个自动检查cycle选项有问题 我这里选上后常常会报错)
然后再点show in use. 查看使用中的节点.
大家可以看到 div_3节点 形成了 Cycle ,同时看后面的outerHTML大致可以分析出循环的原因.
( style节点也会被当作 循环引用, 不知道是ie的问题还是这个软件的问题 ,反正大家没必要在意style)

(26.52 K)
2008/7/29 12:46:02
4 内存泄露
关掉弹出的窗口, 点击 测试页面的"createMemLeak div_4"按钮.
之后页面会自动刷新. 大家可以在右边列表里看到 leaks的数量增加了
点击 show leaks 就可以看到内存泄露的点在哪里了

(24.58 K)
2008/7/29 12:46:02
最后补充一下,在弹出的窗口里 还可以做查看节点的更多信息 (双击节点)
以上只是这个工具的大致用法
更详细的帮助文档请见:
http://home.orange.nl/jsrosman/sievehelp.htm
这个软件似乎很久没更新了 不知道大家还有什么好的类似的工具推荐呢?
分享到:
评论

相关推荐

    JavaScript核心技术 PDF扫描版

    《JavaScript核心技术》最后对于Ajax和几个流行的JavaScript库的介绍,无疑会开阔我们在JavaScript使用上的思路。 《JavaScript核心技术》是一本真正意义上的“新书”,不仅介绍了最新的JavaScript知识和方向,还...

    ExtAspNet v2.2.1 (2009-4-1) 值得一看

    --我们做了优化,现在要使一个Asp.net的按钮能够AJAX提交,你不需要做任何设置(PageManager的属性EnableAjax为true即可,这是默认属性)。 +PageManager的实例方法AddAjaxUpdateControl改名为...

    ExtAspNet_v2.3.2_dll

    -修正了IE下Grid中的一个JS问题(feedback:lqm4108)。 -修正Alert消息中引号未编码导致的JS错误(feedback:sun1299shine)。 +集成extjs3.0.3。 -修正弹出对话框的宽度计算错误(会保持最小的状态)。 -增加新的...

    java面试宝典

    170、Javascript如何发送一个Ajax请求? 41 171、AJAX都有哪些有点和缺点? 41 172、Ajax和javascript的区别? 41 Servlet部分 42 174、JAVA SERVLET API中forward() 与redirect()的区别? 42 178、如何现实servlet...

    千方百计笔试题大全

    170、Javascript如何发送一个Ajax请求? 41 171、AJAX都有哪些有点和缺点? 41 172、Ajax和javascript的区别? 41 Servlet部分 42 174、JAVA SERVLET API中forward() 与redirect()的区别? 42 178、如何现实servlet...

    Java面试宝典2020修订版V1.0.1.doc

    7、简述ajax中Js脚本缓存问题该如何解决? 26 8、同步和异步怎么理解?分别在什么情况下使用。 26 9、java后台如何接收ajax数据? 26 10、为什么要有jquery? 26 11、jQuery选择器有多少种? 27 13、你是如何使用...

    DWR.xml配置文件说明书(含源码)

    有几个术语有必要理解,参数叫做converted,远程Bean叫做created.如果远程Bean A有个方法A.blah(B),那么你需要为A建立一个created,为B建立一个converted. 配置文件init部分声明那些用于建立远程bean和在方法调用中转...

    最新Java面试宝典pdf版

    16. hibernate进行多表查询每个表中各取几个字段,也就是说查询出来的结果集没有一个实体类与之对应如何解决; 123 17.介绍一下Hibernate的二级缓存 123 18、Spring 的依赖注入是什么意思? 给一个 Bean 的 message ...

    Java面试宝典2010版

    16. hibernate进行多表查询每个表中各取几个字段,也就是说查询出来的结果集没有一个实体类与之对应如何解决; 17.介绍一下Hibernate的二级缓存 18、Spring 的依赖注入是什么意思? 给一个 Bean 的 message 属性, ...

    Java面试笔试资料大全

    16. hibernate进行多表查询每个表中各取几个字段,也就是说查询出来的结果集没有一个实体类与之对应如何解决; 123 17.介绍一下Hibernate的二级缓存 123 18、Spring 的依赖注入是什么意思? 给一个 Bean 的 message ...

    Java面试宝典-经典

    16. hibernate进行多表查询每个表中各取几个字段,也就是说查询出来的结果集没有一个实体类与之对应如何解决; 123 17.介绍一下Hibernate的二级缓存 123 18、Spring 的依赖注入是什么意思? 给一个 Bean 的 message ...

    JAVA面试宝典2010

    16. hibernate进行多表查询每个表中各取几个字段,也就是说查询出来的结果集没有一个实体类与之对应如何解决; 123 17.介绍一下Hibernate的二级缓存 123 18、Spring 的依赖注入是什么意思? 给一个 Bean 的 message ...

    java面试题大全(2012版)

    16. hibernate进行多表查询每个表中各取几个字段,也就是说查询出来的结果集没有一个实体类与之对应如何解决; 123 17.介绍一下Hibernate的二级缓存 123 18、Spring 的依赖注入是什么意思? 给一个 Bean 的 message ...

    Java面试宝典2012版

    16. hibernate进行多表查询每个表中各取几个字段,也就是说查询出来的结果集没有一个实体类与之对应如何解决; 123 17.介绍一下Hibernate的二级缓存 123 18、Spring 的依赖注入是什么意思? 给一个 Bean 的 message...

    java面试宝典2012

    16. hibernate进行多表查询每个表中各取几个字段,也就是说查询出来的结果集没有一个实体类与之对应如何解决; 135 17.介绍一下Hibernate的二级缓存 135 18、Spring 的依赖注入是什么意思? 给一个 Bean 的 message ...

    Java面试宝典2012新版

    16. hibernate进行多表查询每个表中各取几个字段,也就是说查询出来的结果集没有一个实体类与之对应如何解决; 123 17.介绍一下Hibernate的二级缓存 123 18、Spring 的依赖注入是什么意思? 给一个 Bean 的 message ...

    applicative-2015:在 Applicative 2015 上探索 JavaScript 中的React式扩展

    仅使用几个函数,您将学习如何执行以下操作: 从简单事件中声明性地构建复杂事件(例如拖放) 协调和排序多个 Ajax 请求响应数据更改以响应方式更新 UI 消除因忽略取消订阅事件而导致的内存泄漏优雅地传播和处理...

    PHP和MySQL Web开发第4版pdf以及源码

    2.10.1 使用普通文件的几个问题 2.10.2 RDBMS是如何解决这些问题的 2.11 进一步学习 2.12 下一章 第3章 使用数组 3.1 什么是数组 3.2 数字索引数组 3.2.1 数字索引数组的初始化 3.2.2 访问数组的内容 ...

Global site tag (gtag.js) - Google Analytics