Chrome 开发工具之 Memory

开发过程中难免会遇到内存问题，emmm... 本文主要记录一下Chrome排查内存问题的面板，官网也有，但有些说明和例子跟不上新的版本了，也不够详细...

 

！！！ 多图预警！！！ 

 

简单的内存信息列表

 

如果只想查看当前浏览器的各个 tab 正在使用的内存量，则在 Setting - More Tools - Task Manager 即可。效果如下图：

 

 

那个列表里的可勾选项，没看错，是对于可选的信息数据列。

 

那个 End Process 按钮，没看错，选择一项后，可以在浏览器所起的任务列表里关闭改任务(任务可以是打开页面的 tab、Chrome 自身一些项目及扩展插件...为什么不是按钮上写的 process，因为这些任务里面只有部分是在机器进程列表里列出存在的，强行严格 ~ToT~ )

　　

需要看内存的实时变化过程，可以在 Chrome - Performance 面板查看时间轴上内存变化情况，其中会有 `js Heap` 记录的选项，详情参考 Chrome 开发工具之 Timeline/Performance

 

Memory 面板初始

 

如果想要看更多的内存信息快照，则需要打开 Chrome 浏览器的开发者工具中的 Memory 面板了，下面就简单介绍一下该面板的使用。

它大概是长这样：

 

上面有三个按钮：

• Heap snapshot - 用以打印堆快照，堆快照文件显示页面的 javascript 对象和相关 DOM 节点之间的内存分配

• Allocation instrumentation on timeline - 在时间轴上记录内存信息，随着时间变化记录内存信息。

• Allocation sampling - 内存信息采样，使用采样的方法记录内存分配。此配置文件类型具有最小的性能开销，可用于长时间运行的操作。它提供了由 javascript 执行堆栈细分的良好近似值分配。

 

各自举些例子吧，方便理解

 

Heap snapshot

 

给个 html，里面只有一句 js 代码 var _____testArray_____ = [ {value: 'hello'} ]; ，打个堆栈看看：

 

 

右上那块区域，从左到右有三个操作：查看方式、对象归类的筛选、对象选择。

 

左边有 `Summary` 字样的那个，可以选择查看内存快照的方式，可选方式如下：

• Summary - 可以显示按构造函数名称分组的对象。使用此视图可以根据按构造函数名称分组的类型深入了解对象（及其内存使用），适用于跟踪 DOM 泄漏。
• Comparison - 可以显示两个快照之间的不同。使用此视图可以比较两个（或多个）内存快照在某个操作前后的差异。检查已释放内存的变化和参考计数，可以确认是否存在内存泄漏及其原因。
• Containment - 此视图提供了一种对象结构视图来分析内存使用，由顶级对象作为入口。
• Statistic - 内存使用饼状的统计图。

附上 Comparison 效果，大致如下：

代码：

var _____testArray_____ = [{ value: 'hello' }]

function someTodo() {
  _____testArray_____.push({
    value: ':::::::::'
  })
}

document.querySelector('#btn').addEventListener('click', someTodo, false)

 

点击按钮后，数组中 push 了新的一项对象

图(array 那块列表展开就看不到下面列表了，就没展开)：

 

附上 Containment 视图，它的排列稍微有些不同，大致如下：

入口有：

• DOMWindow - 是被视为 JavaScript 代码 "全局" 对象的对象。
• GC - VM 的垃圾使用的实际 GC 根。GC 根可以由内置对象映射、符号表、VM 线程堆栈、编译缓存、句柄作用域和全局句柄组成。
• 原生对象 - 是 "推送" 至 JavaScript 虚拟机内以允许自动化的浏览器对象，例如 DOM 节点和 CSS 规则。

 

中间的 `Class filter` 只能够按照列出来的 Constructor 值进行筛选。

 

右边的 `All objects` 能够选择查看哪些阶段的对象、如 "Objects allocated before Snapshot1"、"Objects allocated between Snapshot1 and Snapshot2"

右中那块区域显示的内存快照信息，可以在各个数据上右键选择一些操作( `Reveal in Summary view` )，各个字段代表信息如下：

• Contructor - 表示使用此构造函数创建的所有对象
• Distance - 显示使用节点最短简单路径时距根节点的距离
• Shallow Size - 显示通过特定构造函数创建的所有对象浅层大小的总和。浅层大小是指对象自身占用的内存大小（一般来说，数组和字符串的浅层大小比较大）
• Retained Size - 显示同一组对象中最大的保留大小。某个对象删除后（其依赖项不再可到达）可以释放的内存大小称为保留大小。
• #New - Comparison 特有 - 新增项
• #Deleted - Comparison 特有 - 删除项
• #Delta - Comparison 特有 - 增量
• Alloc. Size - Comparison 特有 - 内存分配大小
• Freed Size - Comparison 特有 - 释放大小
• Size Delta - Comparison 特有 - 内存增量

右下那块区域显示的是被选中对象的详细信息，如上面图片的内容一样一样的...可以在各个数据上右键选择一些操作( `Reveal in Summary view` )。

注意：图中最最下面那块最有用，就是搜索，ctrl/command + f 唤出 ~

最后，根据上面的图来分析一下上面代码产生的效果，根据 js 的类型和引用的关系来分析，变量 _____testArray_____ 在列表中的情况是：

• 基础类型 string 值为 hello ，内存标记是 string@353953，这个 string 值存在于 Object @362113 对象上的 value 属性上；

• Object @362113 在 Object 列表里，在 Array @356493 的索引 0 位置存在该对象的引用；

• Array @356493 在 Window / @353829 对象上存在引用，属性名为"___testArray___"；

• Window / @353829 是个 Windows 对象，在 Windows 列表里。 

"hello" -> 在(string)列表里 -> string@353953 -> value in Object @362113

    Object  -> 在 Object 列表里 -> [0] in Array @356493

        Array -> 在(array)列表里 -> _____testArray_____ in Window / @353829

                Windows ->  在 Windows 列表里 -> Window / @353829

 

Allocation instrumentation on timeline

 

看完静态的快照，再来看看动态的。

代码如下：

var _____testArray_____ = [{ value: 'hello' }]
var count = 1

function someTodo() {
  // 每次点击 字符串长度都以上一次为基础增加到5倍，拉大差异突出效果，并且之后在字符串头部加上count值做区分
  count *= 5
  var str = new Array(count * 10).join(':')
  _____testArray_____.push({
    value: count + str
  })
}

document.querySelector('#btn').addEventListener('click', someTodo, false)

 

选择 Allocation instrumentation on timeline 点击开始记录的按钮，然后得到如图所示：

 

每条线的高度与最近分配的对象大小对应，竖线的颜色表示这些对象是否仍然显示在最终的堆快照中。蓝色竖线表示在时间线最后对象仍然显示，灰色竖线表示对象已在时间线期间分配，但曾对其进行过垃圾回收。(这图中不是很明显，放大 devtool 面板后，图中的蓝色线顶部是有部分是灰色的...)

 

可以选择时间范围，查看该时间范围内的内存变化情况，如上图 5 次变化的情况分别是：

# 前面的数字代表本次记录索引，点击了5次

# 0  Shallow Size : 112
Constructor         Distance   Shallow Size    Retained Size
- - - - - - - - - - - - - - - - - - - - - - - - -  - - - - - - - - - - -
(array)×9                3      5008  0%         5008  0%
(system)×60              3      2416  0%         2640  0%
(closure)×1              3      4768  0%         2928  0%
Object×3                 3      144   0%         768   0%
MouseEvent×3             4      112   0%         7200  0%
(string)×2               5      96    0%         96    0%
(concatenated string)×2  4      64    0%         160   0%
Event                    5      56    0%         2040  0%
UIEvent                  5      32    0%         648   0%

# 1
(string)×2               5      296   0%         296   0%
(concatenated string)×2  4      64    0%         360   0%
Object                   3      32    0%         392   0%

# 2
(string)×2               5      1296  0%         1296  0%
(concatenated string)×2  4      64    0%         1360  0%
Object                   3      32    0%         1392  0%

# 3
(string)×2               5      6296  0%         6296  0%
(concatenated string)×2  4      64    0%         6360  0%
Object                   3      32    0%         6392  0%

# 4
(string)×2               5      31296 0%         31296 0%
(array)                  4      80    0%         80    0%
(concatenated string)×2  4      64    0%         31360 0%
(system)                 4      32    0%         32    0%
Object                   3      32    0%         31392 0%

当勾选 Record allocation stacks 框后，还可以在 Allocation stack 面板里打印出调用堆栈。

如上面代码的效果：

Allocation sampling

 

这个功能根据名称和说明，不是很看得懂是什么... 但是，还是通过一些案例给出了效果图，如下：

根据给出的图，可以看出这块的功能应该是：哪些函数影响了内存的分配，并且该函数所耗内存在内存分配中占比多少。

图中函数可以直接点击跳转到函数定义的文件和位置。

记录完毕，撒花...