前端内存监控 —— 使用Performance工具

内存管理为什么要监控?？
Performance工具使用流程
内存问题
- 产生内存问题的现象及本质
- 界定内存问题的标准
监控内存的几种方式
- 浏览器任务管理器
- Timeline时序图记录
- 堆快照查找分离DOM（可以观察内存泄露）
  - DOM存在的几种状态？
  - 实例
  - 怎么处理分离DOM？
- 判断是否存在频繁的垃圾回收（需要用不同的工具）
  - 为什么要判断？
  - 具体怎么用监控判断？

这里讲到的是使用Performance工具去进行监视内存和垃圾回收的情况，如果对内存管理，垃圾回收以及GC不太懂的请参考文章 JavaScript —— 内存管理及垃圾回收，下面开始进入正题

内存管理为什么要监控?

GC的目的是为了实现内存空间的良性循环，良性循环的基石是对内存空间合理使用。因为HTML中没有提供内存操作的API，所以时刻关注内存变化才能确定是否合理，我们可以通过Performance这个工具定位问题所在，Performance工具提供多种监控方式，可以时刻监控内存。

Performance工具使用流程

打开浏览器输入目标网址，这里用Chrome
进入开发人员工具面板，选择性能Performance
开启录制功能，访问具体界面
执行用户行为，一段时间后停止录制
获得报告，分析界面中记录的内存信息

下面的截图，可以看到内存Memory的选项出来的折线图就表示了内存的时候情况，有升有降就是正常的工作：

内存问题

产生内存问题的现象及本质

限定当前网络问题正常的情况下：

出现的现象	存在的问题
页面出现延迟加载或者经常性暂停	内存有问题，与`GC`频繁的垃圾回收操作是有关联的，一定存在代码中有让内存爆掉的情况
页面持续性出现糟糕的性能	存在内存膨胀，当前界面为了达到最佳使用速度，会申请一定的内存空间，这个内存空间大小超过了上限
页面的性能随时间延长越来越差	伴随内存泄露

界定内存问题的标准

内存泄露 ：内存使用持续升高
内存膨胀 ：当前应用程序本身为了达到最优效果需要一定的内存空间，也许与当前设备本身硬件不支持有关，所以产生了性能上的差异，需要去判断是程序的问题还是设备的问题。需要多做测试，在多数设备上都存在性能问题说明程序本身有问题。
频繁垃圾回收 ：通过内存变化图进行分析

监控内存的几种方式

浏览器任务管理器

以数值的形式将程序在执行的过程中内存的变化提现出来

在浏览器中 -> shift+Esc -> 右键选中【 JavaScript使用的内存】

第一列的内存是原生内存【DOM节点占据的内存】，这个数据增大表示创建了新的DOM节点。
最后一列JavaScript内存是堆内存，界面中所有可达对象正在使用的内存大小。这个数据增大表示要么在创建新对象，要么对象在不断的增长。

下面进行一下实例：

点击按钮知道内存会增大，是因为我们创建了很大的数组。之后的脚本，可以拿这个去进行监控。

Timeline时序图记录

上面的方法只能说我们的内存存在问题，但是无法更精确的定位什么时间发生的，和那些代码有关系。我们可以通过Timeline时序图直接把当前应用程序的走势以时间点的方式呈现出来。

下面进行一下实例:

进入页面，打开performance进行录制，点击三次按钮，停止录制。

可以看到内存是正常的，有升有降，降的地方就是GC在工作了。如果没有降的地方，就是有问题的地方。

堆快照查找分离DOM（可以观察内存泄露）

堆快照是很有针对性的查找当前的界面对象中是否存在一些分离的DOM，分离DOM的存在也就是存在内存泄漏。
所以先搞清楚一下 什么是分离DOM？DOM存在的几种状态？

DOM存在的几种状态？

界面元素存活在DOM树上
垃圾对象时的DOM节点 —— DOM从DOM树上脱离了，js里面也没有引用。
分离状态的DOM节点 —— DOM从DOM树上脱离了，js里面有引用，界面上看不见，存在内存里面。

实例

下面实例看一下，下面创建了ul和li，这里没有在页面中呈现，但是代码中有引用，这些就是分离DOM：

打开浏览器 -> Memory -> Profiles -> Heap snapshot -> Take snapshot

点击Add按钮 -> Take snapshot -> 可以看到多出来的ul标签和li标签，这个就是分离DOM

怎么处理分离DOM？

函数中把temEle置为null即可

var tmpEle
function fn() {
  var ul = document.createElement('ul')
  for (var i = 0; i < 10; i++) {
    var li = document.createElement('li')
    ul.appendChild(li)
  }
  tmpEle = ul
  tmpEle = null
}

这个时候时候堆快照，分离DOM就没有了。

判断是否存在频繁的垃圾回收（需要用不同的工具）

为什么要判断？

因为GC工作时应用程序是停止的，如果当前GC频繁工作，而且时间过长的话对Web应用来说很不友好，会导致应用假死说我状态，用户使用中会感知应用有卡顿。

具体怎么用监控判断？

通过 Timeline时序图 判断，对当前性能面板中的内存走势进行监控，如果其中频繁的上升下降，就出现了频繁的垃圾回收。这个时候要定位代码，看看是执行什么的时候造成了这种情况。
使用 浏览器任务管理器 会简单一些，任务管理器中主要是数值的变化，其数据频繁的瞬间增加减小，也是频繁的垃圾回收。