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
这个功能根据名称和说明，不是很看得懂是什么... 但是，还是通过一些案例给出了效果图，如下：
根据给出的图，可以看出这块的功能应该是：哪些函数影响了内存的分配，并且该函数所耗内存在内存分配中占比多少。
图中函数可以直接点击跳转到函数定义的文件和位置。
记录完毕，撒花...
