javascript内存泄露工具使用

简介: javascript内存泄露的问题一直以来都不受到大家的重视,原因是对用户的影响没有太实际的表现,或许近几年内存发展迅速。脚本内存再泄露也不会有太大影响。当然作为前端开发的同学们,就不能有这样的侥幸心理。

javascript内存泄露的问题一直以来都不受到大家的重视,原因是对用户的影响没有太实际的表现,或许近几年内存发展迅速。脚本内存再泄露也不会有太大影响。
当然作为前端开发的同学们,就不能有这样的侥幸心理。出现memory l
javascript
内存泄露的问题一直以来都不受到大家的重视,原因是对用户的影响没有太实际的表现,或许近几年内存发展迅速。脚本内存再泄露也不会有太大影响。
当然作为前端开发的同学们,就不能有这样的侥幸心理。出现memory leaks很大程度上是因为程序的不成熟和编码不太规范造成的。不过,这里就不说如何出现问题的,对问题的出现有兴趣可以参考以下地址:

Understanding and Solving Internet Explorer Leak Patterns
IE's memory-leak fix greatly exaggerated
Memory Leakage in Internet Explorer – revisited
 
这里主要说说,目前几个检查javascript内存泄露的工具使用方法:

首先我们用到的工具有三个 Drip/sIEve ,Javascript Leaks Detector, leak monitor。其中前两个是用于检查ie的,leak monitor 是用来检查firefox的情况的。这里重点说一下ie下的这两个工具,由于firefoxGC机制比ie强壮,只要ie的问题消除了,其他浏览器基本上不会有什么问题。

 1.Drip/sIEve

DripsIEve的作者应该是同一个人,连open souce上的项目都是在一起的。不过,平时我们主要使用sIEve就可以了,sIEve的功能比Drip强大一些 

img_763a30ff9d15e568ae2ea29513b917e6.png
sIEve 界面很简单,左侧:内嵌了一个浏览器控件,我可以访问任何网址,下方还有个内存检查,这样我们可以方便看出内存的升降情况以及dom使用数量曲线。

右侧面板,我们可以通过 Show in use 看到目前页面使用的dom的情况,Show Leaks 可以看到内存泄露的dom。当然每次显示泄露的情况必须是页面刷新后,看到上一个页面的泄露情况。

同时通过右侧的数据颜色,我们可以看到内存的升降和具体的数量级

img_df744c3860b86a984d833189d5e6181b.png
不过sIEve的工作原理是对所有dom进行了一次hack,然后自己判断那些dom没有被释放掉,但是具体的情况比较难分析出来。而且跟踪有问题的dom需要一定技巧,对于大型的应用程序,跟踪难度大。

 不过用来检测小模块的内存使用情况还是一个不错的选择,特别是大项目模块细分后,对每个模块的单独测试还是比较不错的
 
谢谢怿飞同学提示的下载地址, Drip/sIEve下载地址:
http://home.orange.nl/jsrosman/

2. Javascript Leaks Detector

这是来自微软GPDE团队的一个小工具,下面简称JLD

官网: http://blogs.msdn.com/gpde/pages/javascript-memory-leak-detector.aspx

安装后,我们可以在ie浏览器的 查看->浏览器栏中找到

 img_6050fe8c4c5c179ca4ec5bef40f2376e.png
 JLD
强大之处在于能够模拟IE6IE7GC情况,和真实的回收情况。这样可以做一个比较。

 img_765eae0b0fe24dedee2b096645c4d471.png

这里通常能只能反应IE6IE7的理想情况,我们需要选择下面Actual Leaks来反映当前浏览器的真实情况。

 img_433b6348aec831d8f28995da2666f820.png

浏览器刷新后,我们就可以看到上次页面的结果了,绿色代表没有发现内存泄露,红色代表发现了内存泄露,蓝色是当前加载完成的页面,当然还有黑色,是指正在加载的网页

当我们展开一个有问题的页面时,

img_6233170deeabb459b2989f51f2e0d97a.png
我们可以看到一个有问题分支Leaks.这里列出了有问题的节点,同时还能帮我们列出出现问题的脚本在什么地方。

这点非常方便我们定位出泄露的问题所在。不过要使用脚本调试,我们必须要打开ie的脚本调试功能

  img_05560e5fa12d5100e370d0be1af17194.png
ie选项的高级中,我们去掉这两个勾即可

3. Leak Monitor

这是firefox上唯一一个检查内存泄露的工具,不过这里舜子不太推荐使用。因为firefox的内存GC机制比IE强悍,不必作为重点考虑对象。只要ie的问题能处理好,firefox上基本上也没有什么问题。而且有ie这两个强悍的软件帮忙基本上能解决大部分问题了。

 

 可惜这个工具的体验很糟糕,会让人很有一种抓狂的感觉。如果您还要继续尝试可以到这里下载: https://addons.mozilla.org/zh-CN/firefox/addon/2490

var wumiiPermaLink = "http://blog.163.com/lanhy2000/blog/static/43678608201121472644851/"; //文章的永久链接,作为文章的唯一标识 var wumiiTags = "泄露,sieve,内存,javascript,leaks"; //文章标签,以英文逗号分隔,如:"标签1,标签2" var wumiiSitePrefix = "http://blog.163.com/lanhy2000/"; //博客的主页地址,作为博客的唯一标识 var wumiiParams = "&num=5&mode=3&pf=blog163"; //num为默认显示的相关文章数目,mode为默认的显示模式(1为文字,2为图片,3为自动)

 

 

目录
相关文章
|
5月前
|
存储 自然语言处理 前端开发
抖音快手小红书虚拟评论截图生成器,模拟对话制作工具,html+js+css
这是一款纯前端实现的多平台虚拟评论生成器,支持抖音、快手、小红书风格,适用于产品演示与UI设计。采用Vanilla JS与Flexbox布局,利用IndexedDB存储数据,CSS Variables切换主题。
|
4月前
|
JavaScript 前端开发 API
淘宝店铺阿里旺旺采集工具,连接批量转旺旺ID,用Js接口实现效果
以下是淘宝店铺阿里旺旺采集工具的JS实现代码,包含批量获取店铺旺旺ID功能,当然仅
|
3月前
|
编解码 JavaScript 前端开发
如何在网页播放英文的m3u8文件(基于Javascript搭建的在线网页工具)
什么是m3u8?又该如何在网页中高效、便捷地播放英文的m3u8文件呢?今天这篇文章就带你一起了解,并推荐一种基于Javascript搭建的在线网页工具,让你轻松解决播放问题。
773 0
|
5月前
|
存储 前端开发 安全
病历单生成器在线制作,病历单生成器app,HTML+CSS+JS恶搞工具
本项目为医疗病历模拟生成器,旨在为医学教学和软件开发测试提供数据支持,严格遵守《医疗机构病历管理规定》。
|
5月前
|
存储 前端开发 JavaScript
仿真银行app下载安装, 银行卡虚拟余额制作app,用html+css+js实现逼真娱乐工具
这是一个简单的银行账户模拟器项目,用于学习前端开发基础。用户可进行存款、取款操作,所有数据存储于浏览器内存中
|
5月前
|
存储 Ubuntu Linux
内存卡格式化必看!4个格式化工具与注意事项
今天就给大家推荐几款经过实测的内存卡格式化工具,它们不仅使用简单、支持多种格式,而且在修复损坏卡方面也表现稳定,是实用性与安全性兼具的好帮手。
|
6月前
|
人工智能 监控 前端开发
基于 Next.js 的书法字体生成工具架构设计与 SSR 优化实践
本项目是一款书法字体生成工具,采用 Next.js 14(App Router)与 Tailwind CSS 构建前端,阿里云 Serverless 部署后端。通过混合渲染策略(SSG/SSR/CSR)、Web Worker 异步计算及 CDN 字体分片加载优化性能。服务端借助阿里云函数计算处理计算密集型任务,将平均耗时从 1200ms 降至 280ms,支持 1000+ QPS。动态路由与 ARMS 监控提升工程化水平,未来计划引入 WebGPU 和 AI 字体风格迁移技术,进一步优化用户体验。
|
9月前
|
数据采集 JavaScript Android开发
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
306 7
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
|
12月前
|
监控 JavaScript 算法
如何使用内存监控工具来定位和解决Node.js应用中的性能问题?
总之,利用内存监控工具结合代码分析和业务理解,能够逐步定位和解决 Node.js 应用中的性能问题,提高应用的运行效率和稳定性。需要耐心和细致地进行排查和优化,不断提升应用的性能表现。
410 77