前端内存泄漏的分析案例

简介: 前端内存泄漏的分析案例


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


复现bug


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


我的这边是好的呀,没有什么问题。

哎呀,是不是你的使用方法不对啊。


看到了吗,如果bug不能复现,会直接极大的减少程序员想要修复bug的意愿的。

我后来问他,测试的怎么样,他说没有问题呀。我问题跑了多久,他说有一会儿吧,看没问题就关闭了。

一般来说,内存泄漏最终导致奔溃的需要挺长一段时间的,所以我告诉他一直跑,跑到奔溃为止。

后来第二天,他说果然奔溃了。


查找原因


因为更新了的版本才出现内存泄漏的问题,所以有理由怀疑,就是新增加的功能导致的内存泄漏。 新加的功能是,在一个TWaver的表格中,部分单元格中使用echart 图表来绘制。而由于代码中每次刷新的都会调用echart.init方法重新创建。导致原来创建的echart实例中创建的一些变量不能释放,所以这里怀疑,echart 如果反复删除并创建会导致内存泄漏。所以让开发人员改成了缓存的方案。


当然由于TWaver表格的内部机制,会在重新绘制的时候,移除上一次单元格的内容,并移除内容所有父子关系。这个问题导致了,缓存方案失效。 最终的解决方案是重写了这个移除方法,不解除移除内容的父子关系。


到此为止,应该问题是解决了。让小伙伴改进后,继续把模拟系统一直跑起来。 很不幸的是,第二天仍然奔溃。由于此时并不能直观的看出问题所在,所以需要使用一些技巧了。


简化程序


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


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


使用chrome的工具分析


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



微信图片_20220423122630.jpg


memory标签


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



微信图片_20220423122708.png


内存记录情况


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



微信图片_20220423122752.png


内存记录情况2


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



微信图片_20220423122836.jpg


Detached HTML Element


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



微信图片_20220423122913.jpg


内存泄漏


至此,查到了是那个地方发生了内存泄漏。 根据这个线索,比较容易定位到程序的逻辑问题所在,并很快就解决了问题。

ps:同时还发现了table.__divPool也有内存泄漏的情况,通过同样的方式定位到了这个问题并最终解决。


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

相关文章
|
11月前
|
Web App开发 监控 JavaScript
监控和分析 JavaScript 内存使用情况
【10月更文挑战第30天】通过使用上述的浏览器开发者工具、性能分析工具和内存泄漏检测工具,可以有效地监控和分析JavaScript内存使用情况,及时发现和解决内存泄漏、过度内存消耗等问题,从而提高JavaScript应用程序的性能和稳定性。在实际开发中,可以根据具体的需求和场景选择合适的工具和方法来进行内存监控和分析。
|
4月前
|
存储 弹性计算 缓存
阿里云服务器ECS经济型、通用算力、计算型、通用和内存型选购指南及使用场景分析
本文详细解析阿里云ECS服务器的经济型、通用算力型、计算型、通用型和内存型实例的区别及适用场景,涵盖性能特点、配置比例与实际应用,助你根据业务需求精准选型,提升资源利用率并降低成本。
306 3
|
3月前
|
存储 人工智能 自然语言处理
AI代理内存消耗过大?9种优化策略对比分析
在AI代理系统中,多代理协作虽能提升整体准确性,但真正决定性能的关键因素之一是**内存管理**。随着对话深度和长度的增加,内存消耗呈指数级增长,主要源于历史上下文、工具调用记录、数据库查询结果等组件的持续积累。本文深入探讨了从基础到高级的九种内存优化技术,涵盖顺序存储、滑动窗口、摘要型内存、基于检索的系统、内存增强变换器、分层优化、图形化记忆网络、压缩整合策略以及类操作系统内存管理。通过统一框架下的代码实现与性能评估,分析了每种技术的适用场景与局限性,为构建高效、可扩展的AI代理系统提供了系统性的优化路径和技术参考。
167 4
AI代理内存消耗过大?9种优化策略对比分析
|
12月前
|
编译器 C语言
动态内存分配与管理详解(附加笔试题分析)(上)
动态内存分配与管理详解(附加笔试题分析)
196 1
|
7月前
|
存储 Java
课时4:对象内存分析
接下来对对象实例化操作展开初步分析。在整个课程学习中,对象使用环节往往是最棘手的问题所在。
|
7月前
|
Java 编译器 Go
go的内存逃逸分析
内存逃逸分析是Go编译器在编译期间根据变量的类型和作用域,确定变量分配在堆上还是栈上的过程。如果变量需要分配在堆上,则称作内存逃逸。Go语言有自动内存管理(GC),开发者无需手动释放内存,但编译器需准确分配内存以优化性能。常见的内存逃逸场景包括返回局部变量的指针、使用`interface{}`动态类型、栈空间不足和闭包等。内存逃逸会影响性能,因为操作堆比栈慢,且增加GC压力。合理使用内存逃逸分析工具(如`-gcflags=-m`)有助于编写高效代码。
137 2
|
11月前
|
JavaScript
如何使用内存快照分析工具来分析Node.js应用的内存问题?
需要注意的是,不同的内存快照分析工具可能具有不同的功能和操作方式,在使用时需要根据具体工具的说明和特点进行灵活运用。
336 62
|
9月前
|
人工智能 前端开发 架构师
2025年前端局势分析,我该不该转行?
2024年,前端领域经历了快速变化,AIGC的兴起和市场HC减少使得前端工程师面临挑战。尽管AI工具如通义灵码和Cursor能高效生成代码,但AI无法完全取代前端工程师,因其缺乏逻辑、沟通和创新能力。前端工作不仅限于编码,还包括需求分析、代码评审等。未来,前端不会“死亡”,而是持续演变。面对大环境的压力,提升综合能力、拥抱变化、持续学习和保持身心健康是关键。转型方向包括升管理、做架构师或转讲师等。稳住2025年,需适应变化、不断学习并探索更多可能性。
1132 16
|
10月前
|
存储 缓存 监控
Docker容器性能调优的关键技巧,涵盖CPU、内存、网络及磁盘I/O的优化策略,结合实战案例,旨在帮助读者有效提升Docker容器的性能与稳定性。
本文介绍了Docker容器性能调优的关键技巧,涵盖CPU、内存、网络及磁盘I/O的优化策略,结合实战案例,旨在帮助读者有效提升Docker容器的性能与稳定性。
923 7
|
11月前
|
并行计算 算法 测试技术
C语言因高效灵活被广泛应用于软件开发。本文探讨了优化C语言程序性能的策略,涵盖算法优化、代码结构优化、内存管理优化、编译器优化、数据结构优化、并行计算优化及性能测试与分析七个方面
C语言因高效灵活被广泛应用于软件开发。本文探讨了优化C语言程序性能的策略,涵盖算法优化、代码结构优化、内存管理优化、编译器优化、数据结构优化、并行计算优化及性能测试与分析七个方面,旨在通过综合策略提升程序性能,满足实际需求。
274 1