开发者社区> jerrywangsap> 正文

使用 Chrome Dev tools 分析应用的内存泄漏问题

简介: 使用 Chrome Dev tools 分析应用的内存泄漏问题
+关注继续查看

Catching memory leaks with Chrome DevTools


当分配的内存没有返回给操作系统或内存池时,我们将其称为内存泄漏。 在这种情况下,内存未被任何应用程序使用,并且被不必要地占用。 这会导致低性能、高延迟和频繁崩溃。


Understanding memory leaks

如果您熟悉 C 等低级语言,您一定使用过 malloc() 和 free()。 相比之下,JavaScript 在创建对象时自动分配内存,并在不再使用时释放它。


好吧,因为它是自动管理的,所以我们作为开发人员总是有一个错误的印象,即我们不需要担心浏览器中的内存管理。 如果一个站点使用越来越多的内存,这意味着没有人收集它并且存在内存泄漏。


Garbage collectors

如果垃圾收集器 (GC) 是完美的,那么内存泄漏就不是问题。 问题是他们的算法不够聪明,无法检测内存泄漏。 因此,需要人工干预。


垃圾收集器执行查找程序不再使用的内存并将其释放回操作系统以供将来重新分配的过程。 该方法有效,但仍然会发生内存泄漏。 该方法无法检测每个泄漏,例如泄漏的引用。


Why is there a memory leak?

下列是几种常见的内存泄漏类型。


Accidental global variables


image.png

image.png

这里的 this 指的是 window 对象,因此这个变量将在 window 中创建。


由于全局变量不是由 GC 收集的,如果此字符串变得太大,可能会导致内存泄漏。 意外全局变量的一个类似示例是在不使用 let 和 var 关键字的情况下声明变量。


Detached DOM nodes

分离 DOM 节点是一个关键问题。 由于全局引用,分离的节点仍然存在于内存中。


image.png

image.png

在上面的例子中,removeChild 函数从树中移除了 DOM 节点,但是全局主对象中的引用 Id 仍然保留在内存中并且没有被垃圾收集。

闭包

闭包为内部函数维护外部函数变量的范围,即使在外部函数的范围之外。

image.png

这里的函数score,也就是内部函数,有一个全局引用,叫做initial。 这个初始引用永远不会被垃圾收集。


Tools to identify memory leaks

意外的全局变量 内存泄漏可以通过分析轻松检测到。 我们举一个代码片段的例子,它会因为全局变量而导致内存泄漏。

例子:


image.png

image.png

到 Chrome 开发者工具里,打开 Profiles 标签页:



image.png

选择 Take Heap Snapshot.


在这里,window 对象的黄色实际上描绘了从 JS 代码中直接引用的节点。 我们需要修复这里的代码,以便我们可以摆脱黄色标记。


image.png


此处的选项是在函数内将数组设为局部,以便垃圾收集器可以收集它或显式删除全局变量。 您可以找到更正后的代码:

image.png

Allocation profiler

Allocation Timeline 是另一个工具,可以帮助您跟踪 JS 堆中的内存泄漏。 要记录时间线,请转到您的 profile 面板,然后单击上面给出的相同代码的开始。


当我们单击如图所示的开始按钮并使用分配分析器进行配置时,我们可以看到它生成了如图所示的蓝线。


image.png


蓝条代表新的内存分配,这可能是内存泄漏。 您可以通过缩放这些蓝色条中的任何一个来查看详细信息。 此处的详细信息表示被推入数组且从不进行垃圾回收的长字符串。


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Chrome 浏览器降级后浏览网站不保留用户数据问题原因及解决方法
Chrome 浏览器降级后浏览网站不保留用户数据问题原因及解决方法
58 0
使用 Chrome 开发者工具的 lighthouse 功能分析 web 应用的性能问题
使用 Chrome 开发者工具的 lighthouse 功能分析 web 应用的性能问题
34 0
【巡检问题分析与最佳实践】MongoDB 空间使用问题
阿里云数据库MongoDB的空间使用率是一个非常重要的监控指标,如果实例的存储空间完全打满,将会直接导致实例不可用。一般来说,当一个MongoDB实例的存储空间使用比例达到80-85%以上时,就应及时进行处理,要么降低数据库实际占用空间的大小,要么对存储空间进行扩容,以避免空间打满的风险。 然而,阿里云数据库MongoDB的空间使用情况分析并不简单,本文将由浅入深帮您查看,分析和优化云数据库MongoDB的空间使用。
343 0
使用 Chrome Dev tools 分析应用的内存泄漏问题
使用 Chrome Dev tools 分析应用的内存泄漏问题
58 0
使用 Chrome 开发者工具分析内存问题
使用 Chrome 开发者工具分析内存问题
37 0
MyBatisPlus中使用SELECT关联查询时未添加别名报异常的问题分析与修复
本文记录了在使用MyBatis表写入自定义的SQL查询语句时发生的异常问题。当定义使用include对主表中的字段进行包装时,在之后需要用到使用主表的关联查询,要将整个主表中include包装的字段都添加上别名,否则就会报错。本文记录在第一次使用MyBatisPlus框架时遇到的问题,是一次踩坑经验,希望帮助大家避免这样的坑。
214 0
只需4个步骤,分析解决在生产环境下JVM内存泄露问题
只需4个步骤,分析解决在生产环境下JVM内存泄露问题
4874 0
解决Chrome插件安装时出现的“程序包无效”问题
错误信息:程序包无效。 详细信息:“Cannot load extension with file or directory name . Filenames starting with "" are reserved for use by the system.”。
8491 0
一个内存增长问题的分析和处理(二)——valgrind工具的用法
valgrind是linux下对C++和C程序进行内存泄露检测的工具,除了内存检测,valgrind还提供了很多其他的功能,这里主要介绍下valgrind的内存检测的功能。   首先是文件的下载,valgrind的官方网址是http://valgrind.org/,最新版本的valgrind是3.9,下载地址如下:http://valgrind.org/downloads/。
1083 0
用WinDbg分析Debug Diagnostic Tool生成的Userdump文件
1、下载WinDbg(Debugging Tools for Windows):http://www.microsoft.com/whdc/devtools/debugging/default.mspx 2、安装WinDbg 3、运行WinDbg 4、配置Symbol文件路径: File>Symbol File Path,输入:SRV*c:\websymbols*http://msdl.
906 0
+关注
2624
文章
0
问答
来源圈子
更多
+ 订阅
文章排行榜
最热
最新
相关电子书
更多
OceanBase 入门到实战教程
立即下载
阿里云图数据库GDB,加速开启“图智”未来.ppt
立即下载
实时数仓Hologres技术实战一本通2.0版(下)
立即下载