如何排查内存泄漏

工具:

  1. Chrome[kroʊm]任务管理器

    用来粗略地查看内存使用情况。

    入口在右上角三个点 -> 更多工具 -> 任务管理器,然后右键表头 -> 勾选JS使用的内存,主要关注两列:

    1. 内存占用空间。表示原生内存,DOM节点存储在原生内存中,如果此值正在增大,则说明正在创建DOM节点;
    2. JS使用的内存。表示JS堆,此列包含两个值,需要关注的是实时值(括号中的数值)。实时数值表示页面上的可访问对象正在使用的内存量。如果该数值在增大,要么是正在创建新对象,要么是现有对象正在增长。

    在这里插入图片描述

  2. Chrome DevTools Performance面板

    用来观察内存变化趋势。

    入口在DevTools的Performance面板,然后勾选Memory,如果想看页面首次加载过程内存使用情况的话,Command + R刷新页面,会自动记录整个加载过程。想看某些操作前后的内存变化的话,操作前点“黑点”按钮开始记录,操作完毕点“红点”按钮结束记录。

    记录完毕后勾选中部的JS Heap,蓝色折线表示内存变化趋势,如果总体趋势不断上涨,没有大幅回落,就再通过手动GC来确认:再操作记录一遍,操作结束前或者过程中做几次手动GC(点“黑色垃圾桶”按钮),如果GC的时间点折线没有大幅回落,整体趋势还是不断上涨,就有可能存在内存泄漏。

    或者更粗暴的确认方式,开始记录 -> 重复操作50次 -> 看有没有自动GC引发的大幅下降,在使用的内存大小达到阈值时会自动GC,如果有泄漏的话,操作n次总会达到阈值,也可以用来确认内存泄漏问题是否已修复。

    PS:还能看到document数量(可能针对iframe),节点数量、事件监听器数量、占用GPU内存的变化趋势,其中节点数量及事件监听器数量变化也有指导意义。
    在这里插入图片描述

  3. Chrome DevTools Memory面板
    在这里插入图片描述
    这个面板有3个工具,分别是堆快照、内存分配情况和内存分配时间轴:

    1. 内存分配时间轴(Record Allocation Timeline),用来查看实时的内存分配及回收情况。

      点开时间轴,对页面进行各种交互操作,出现的蓝色柱子表示新内存分配,灰色的表示释放回收,如果时间轴上存在规律性的蓝色柱子,那就有很大可能存在内存泄漏。

      然后再反复操作观察,看是什么操作导致蓝色柱子残留,剥离出具体的某个操作。
      在这里插入图片描述

    2. 堆快照(Take Heap Snapshot),用来具体分析各类型对象存活情况,包括实例数量、引用路径等等;

      堆快照用来进一步分析,找到泄漏的具体对象类型。

      到这里应该已经锁定可疑的操作了,通过不断重复该操作,观察堆快照各项的数量变化来定位泄漏对象类型。

      堆快照有4种查看模式:

      Summary:摘要视图,展开并选中子项查看Object’s retaining tree(引用路径);

      Comparison:对比视图,与其它快照对比,看增、删、Delta数量及内存大小;

      Containment:俯瞰视图,自顶向下看堆的情况,根节点包括window对象,GC root,原生对象等等;

      Dominators:支配树视图,新版Chrome好像去掉了,展示之前术语概念部分提到的支配树。

      其中最常用的是对比视图和摘要视图,对比视图可以把2次操作和1次操作的快照做diff,看Delta增量,找出哪类对象一直在增长。摘要视图用来分析这类可疑对象,看Distance,找出奇怪的长路径上,哪一环忘记断开了。

      看摘要视图有个小常识是新增的东西是黄底黑字,删除的是红底黑字,本来就有的是白底黑字,这一点很关键。
      在这里插入图片描述

    3. 内存分配情况(Record Allocation Profile),用来查看分配给各函数的内存大小;
      在这里插入图片描述

其中内存分配时间轴和堆快照比较有用,时间轴用来定位内存泄漏操作,对快照用来具体分析问题。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值