`
flyfox1982
  • 浏览: 81075 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

前端内存泄漏的分析案例

 
阅读更多

<div class="iteye-blog-content-contain" style="font-size: 14px"></div>

 在最近给客户交付的一个项目中,客户反映系统跑一段时间就会奔溃掉。我的第一直觉就是可能发生了内存泄漏。

复现bug

为了能够让bug复现,我让开发的小伙,先把模拟系统在本地跑起来。要知道,bug复现是很重要的。bug复现,能够让开发人员直观的感受到bug发生的过程。另外如果bug不能复现,程序员的反应可能是这样的:

我的这边是好的呀,没有什么问题。
哎呀,是不是你的使用方法不对啊。

看到了吗,如果bug不能复现,会直接极大的减少程序员想要修复bug的意愿的。
我后来问他,测试的怎么样,他说没有问题呀。我问题跑了多久,他说有一会儿吧,看没问题就关闭了。
一般来说,内存泄漏最终导致奔溃的需要挺长一段时间的,所以我告诉他一直跑,跑到奔溃为止。
后来第二天,他说果然奔溃了。

查找原因

因为更新了的版本才出现内存泄漏的问题,所以有理由怀疑,就是新增加的功能导致的内存泄漏。 新加的功能是,在一个TWaver的表格中,部分单元格中使用echart 图表来绘制。而由于代码中每次刷新的都会调用echart.init方法重新创建。导致原来创建的echart实例中创建的一些变量不能释放,所以这里怀疑,echart 如果反复删除并创建会导致内存泄漏。所以让开发人员改成了缓存的方案。
当然由于TWaver表格的内部机制,会在重新绘制的时候,移除上一次单元格的内容,并移除内容所有父子关系。这个问题导致了,缓存方案失效。 最终的解决方案是重写了这个移除方法,不解除移除内容的父子关系。
到此为止,应该问题是解决了。让小伙伴改进后,继续把模拟系统一直跑起来。 很不幸的是,第二天仍然奔溃。由于此时并不能直观的看出问题所在,所以需要使用一些技巧了。

简化程序

可以确定的是,还是表格的问题导致的内存泄漏,为了避免干扰,让小伙伴把表格的核心内容拉出来写两个一个demo。 这样就可以专注于表格相关问题的定位了。

在解决一些大项目的问题的时候,如果发现一些难定位的问题,可以考虑把程序简化,抽出有问题的代码部分写小的例子。方便问题的定位,排除不必要的干扰。

使用chrome的工具分析

首先把小伙伴写的小例子跑起来,然后打开chrome的控制台。点击memory标签:

 

memory标签
memory标签

选择Allocation instrumentation on timeline,点击start,开始录制内存的记录情况,会发现有一些蓝色的条,永远不会变暗,表示这部分内存始终未被回收:

 

内存记录情况
内存记录情况

点击其中的一个蓝条,可以查看局部的内存情况,如下图所示:

 

内存记录情况2
内存记录情况2

从中可以看到有array,system和Detached HTMLSpanElement。 我们知道Detached HTMLSpanElement表示已经脱离文档树的dom元素,它也是导致内存泄漏的一个经常的诱因,点击Detached HTMLSpanElement,查看详情:

 

Detached HTML Element
Detached HTML Element

可以看到"_stringPool"这样的一个数组对象,里面放的就是Span元素,引用他的就是table,而且数量有372个之多,由于小例子使用的表格只有一行一列,这么大的数量,肯定是内存泄漏导致,直接在浏览器打印这个pool,可以看出这个数量确实在一直增加(看index的情况):

 

内存泄漏
内存泄漏

 

至此,查到了是那个地方发生了内存泄漏。 根据这个线索,比较容易定位到程序的逻辑问题所在,并很快就解决了问题。
ps:同时还发现了table.__divPool也有内存泄漏的情况,通过同样的方式定位到了这个问题并最终解决。

问题出在小伙伴对于renderCell方法的重载和release方法的重载,这个涉及到TWaver的内部逻辑,此处就不详细说明了。

欢迎关注公众号:

 

ITman彪叔公众号
ITman彪叔公众号
0
0
分享到:
评论

相关推荐

    JavaScript 案例教程源码

    12. **性能优化**:讲解如何编写高效的JavaScript代码,避免内存泄漏和性能瓶颈。 每个章节的源码文件夹将包含示例代码和对应的HTML文件,以便在浏览器环境中运行。通过这种方式,你可以直观地看到每一行代码的执行...

    内存javascript脚本

    ### 实践案例分析 假设我们有一个复杂的前端应用程序,其中包含了大量的DOM操作和事件监听器。随着时间推移,用户可能会遇到性能下降的问题,这可能是由于内存泄漏引起的。在这种情况下,可以通过以下步骤诊断并...

    前端高级面试资料.pdf

    函数式编程、事件处理、原型链、正则表达式、JSON数据格式、Ajax通信、DOM操作、BOM(浏览器对象模型)接口、内存泄漏、跨域问题、异步请求处理、模板引擎、模块化方案、 Flux架构、同构应用等都是考察的重点。...

    黑马前端学习JS高级md

    - **内存管理**:理解垃圾回收机制,避免内存泄漏。 - **DOM操作优化**:减少DOM操作次数,使用文档片段等技术批量操作。 - **代码优化**:避免全局变量,减少计算量,合理使用缓存。 7. **调试与测试** - **...

    cpp-面向Web前端的原生语言总结手册

    手册将讨论边界检查、内存泄漏、缓冲区溢出等常见问题,并提供相应的预防措施。 **6. 应用示例** 为了帮助读者更好地理解和应用这些知识,手册会包含多个实际案例,如实时图像处理、物理模拟和游戏引擎等,展示C++...

    2020前端入门开发规范手册.pdf

    包括但不限于异步加载、DOM操作优化、避免内存泄漏等。 4. **移动端优化** - 移动端优化涉及到适配不同的屏幕尺寸、处理触摸事件、性能优化等多个方面。 #### 工具箱 - 手册中还会介绍一些常用的前端开发工具,...

    iOS2019最新整理面试题+企业招聘的需求(附赠GMTC2018 全球大前端技术大会部分演讲ppt)

    - **最佳实践分享**:通过案例分析,展示如何利用最新的前端技术提升用户体验和开发效率。 - **性能优化策略**:提供一系列前端性能优化的方法论,帮助开发者构建更加高效的应用。 总结而言,对于iOS开发者来说,...

    前端性能优化:掌握解决方案.zip

    使用箭头函数和const/let代替function和var,减少内存泄漏。 11. **Web Workers**:对于计算密集型任务,可以使用Web Workers在后台线程中运行,不阻塞主线程,提高页面响应性。 12. **SEO优化**:确保网站对搜索...

    前端开发工程师专用简历模板

    - 优化首屏加载速度和弹窗加载,减少内存泄漏。 - 引入富文本编辑器并加强安全防护。 - 推动前端自动化测试。 3. **TMS市内配送项目** - 作为项目负责人,负责Vue+Mand Mobile的开发。 - 对接高德地图API,...

    《微信小程序开发图解案例教程(书签)》.pdf

    7. **性能优化**:对于微信小程序的性能优化,书籍可能会讨论减少网络请求、优化渲染效率、合理使用缓存、避免内存泄漏等策略。 8. **发布与更新**:最后,书中会介绍如何将开发完成的小程序提交审核、发布上线,...

    经典的聊天案例

    总的来说,实现"经典的聊天案例"涵盖了许多IT领域的知识,包括但不限于网络通信、身份验证、数据库设计、序列化、安全防护、前端框架和性能优化。这些技术共同构成了一个高效、安全且用户体验良好的聊天应用。

    《软件性能测试、分析与调优实践之路-第二版》ppt 课件总结

    - **内存泄漏**:检测并修复应用程序未释放内存资源的现象。 - **连接泄漏**:检查数据库连接、HTTP连接等是否正确关闭和释放。 - **线程安全问题**:避免因多线程并发访问导致的数据错误。 - **死锁**:解决...

    前端项目-jxon.zip

    7. **示例应用**:通过实际案例分析,了解如何在实际项目中应用jxon库,例如在AJAX请求中处理服务器返回的XML数据,或者将用户填写的表单数据以JSON格式发送到服务器。 8. **集成与调试**:学习如何将jxon库引入到...

    JSP源码——检测JSP服务器内存的Ajax程序_systemjc.zip

    6. **Web应用性能监控**:此类程序对于大型Web应用程序来说非常重要,可以帮助识别内存泄漏、性能瓶颈和优化服务器配置。 7. **错误处理和异常捕获**:在源码中,应当包含了处理网络错误、解析错误以及其他可能出现...

    HTML前端wangEditor富文本编辑器demo(jQuery)

    在这个Vue组件中,`mounted`钩子用于初始化编辑器,`beforeDestroy`则用于销毁编辑器以防止内存泄漏。通过`onchange`回调,我们可以实时获取编辑器中的内容并绑定到Vue的数据模型。 在提供的压缩包`makeEdior`中,...

    前端工程师面试题

    - **题目类型多样化**: 包括但不限于技术视野、项目细节、理论知识题、算法题、开放性问题、案例分析等,全面考察应聘者的综合素质和技术能力。 - **深入追问的重要性**: 通过进一步追问,可以帮助面试官更好地了解...

    akara的前端笔记.zip

    9. **性能优化**:包括减少HTTP请求、使用CDN、代码压缩、缓存策略、事件委托、避免内存泄漏等,都是提升JavaScript应用性能的关键。 10. **错误处理**:try...catch语句用于捕获和处理运行时错误,了解和正确使用...

    其他类别动态显示JSP服务器内存的Ajax程序

    2. **服务器内存管理**:了解如何监控和分析JVM(Java Virtual Machine)的内存使用情况,包括堆内存、非堆内存、PermGen(已废弃,现在是MetaSpace)或元空间等不同区域,以及如何识别和解决内存泄漏问题。...

    ACCP5.0 S2 JavaScript案例

    8. **JavaScript性能优化**:如减少DOM操作、避免内存泄漏、利用缓存等技巧,对于提高网页加载速度和用户体验至关重要。 9. **Web API**:如Fetch API、WebSocket等,可以让JavaScript与浏览器提供的更多功能进行...

    Web应用的性能问题分析

    资源不足或使用不当(如内存泄漏)会导致系统响应缓慢,严重时甚至宕机。 **3. 网络带宽** 在网络通信中,带宽限制是一个常见的性能瓶颈。当数据传输量超出网络承载能力时,延迟和丢包率会上升,影响整体性能。 *...

Global site tag (gtag.js) - Google Analytics