由于我的谷歌浏览器开发工具，偏好修改为中文，所以以下图片，都是中文，英文我也会附上

Memory 的面板

我们可以看到，我们可以选择的分析类型有三种

  • 堆快照（Heap snapshot）
    • 用以打印堆快照，堆快照文件显示页面的 javascript 对象和相关 DOM 节点之间的内存分配
  • 按时间轴记录内存分配（Allocation instrumentation on timeline）
    • 在时间轴上记录内存信息，随着时间变化记录内存信息。
  • 内存采样（Allcation sampling）
    • 使用采样的方法记录内存分配。此配置文件类型具有最小的性能开销，可用于长时间运行的操作。它提供了由 javascript 执行堆栈细分的良好近似值分配

image.png

堆快照（Heap snapshot）

我们的 html 页面如下
JS 中只声明了一个 字符串变量。

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.   <title>Document</title>
  9.   <style>
  10.     .box {
  11.       display: flex;
  12.     }
  13.   </style>
  14. </head>
  16. <body>
  17.   <div id="div">
  18.     <button id="btn">1</button>
  19.   </div>
  20.   <script>
  21.     var konsoue = '456'
  22.   </script>
  23. </body>
  25. </html>

现在我们打一个快照，右上这一部分区域，有三个操作

  • 查看方式
    • summary(摘要)
      • 可以显示按构造函数名称分组的对象。
      • 使用此视图可以根据按构造函数名称分组的类型深入了解对象（及其内存使用），适用于跟踪 DOM 泄漏
    • containment(控制)
      • 此视图提供了一种对象结构视图来分析内存使用，由顶级对象window作为入口。
    • statistic(统计信息)
      • 内存使用饼状的统计图。
    • comparison(比较)：
      • 可以显示两个快照之间的不同。
      • 使用此视图可以比较两个（或多个）内存快照在某个操作前后的差异。
      • 检查已释放内存的变化和参考计数，可以确认是否存在内存泄漏及其原因。
      • （当拍两个快照以上时，才会出现）
  • 对象归类的筛选(class filter)
  • 对象的选择
    • 所有对象
    • 在快照 1前分配的对象
    • 在快照 n和快照 n - 1之间分配的对象 (n > 1)

image.png

摘要（summary）

可以显示按构造函数名称分组的对象。 使用此视图可以根据按构造函数名称分组的类型深入了解对象（及其内存使用），适用于跟踪 DOM 泄漏

摘要中可查看的四个项目

  • 构造函数(constructor)
  • 距离(distance)：显示 该节点 与 根节点window 的距离
  • 浅层大小(shallow size)
    • 显示通过特定构造函数创建的所有对象浅层大小的总和。
    • 浅层大小是指对象自身占用的内存大小（一般来说，数组和字符串的浅层大小比较大）
  • 保留大小(retained size)
    • 显示同一组对象中最大的保留大小。
    • 某个对象删除后（其依赖项不再可到达）可以释放的内存大小称为保留大小。

image.png

找 konsoue 变量

按下 ctrl/command + F，打开搜索框

从浅层大小 和 保留大小可以看出，只要把 konsoue = null，应该就可以把这个变量释放。
我们来试一下
image.png

控制（containment）

此视图提供了一种对象结构视图来分析内存使用，由顶级对象window作为入口。

控制中可查看的四个项目

  • 对象
    • Window
      • 是被视为 JavaScript 的全局对象window
    • Object
      • 原生对象
      • 是推送至 JavaScript 虚拟机内以允许自动化的浏览器对象，例如 DOM 节点和 CSS 规则。
    • GC roots
      • V8 引擎的内存管理中的 GC 根
      • GC 根可以由内置对象映射、符号表、VM 线程堆栈、编译缓存、句柄作用域和全局句柄组成。
  • 距离
  • 浅层大小
  • 保留大小

image.png

统计信息（statistic）

内存使用饼状的统计图。

image.png

比较（comparison）

可以显示两个快照之间的不同。 使用此视图可以比较两个（或多个）内存快照在某个操作前后的差异。 检查已释放内存的变化和参考计数，可以确认是否存在内存泄漏及其原因。

  • #New：新增项
  • #Deleted：删除项
  • #Delta：增量
  • Alloc Size：内存分配大小
  • Freed Size：已释放的大小
  • Size Delta：内存增量大小

image.png

按时间轴记录内存分配（Allocation instrumentation on timeline）

每条线的高度与最近分配的对象大小对应，竖线的颜色表示这些对象是否仍然显示在最终的堆快照中。

  1. 紫色竖线表示在时间线最后对象仍然显示。
  2. 灰色竖线表示对象已在时间线期间分配，但曾对其进行过垃圾回收。

    可以选择时间范围，查看该时间范围内的内存变化情况

image.png

内存采样（Allocation sampling）

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

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.   <title>Document</title>
  9.   <style>
  10.     .box {
  11.       display: flex;
  12.     }
  13.   </style>
  14. </head>
  16. <body>
  17.   <div id="div">
  18.     <button id="btn">1</button>
  19.   </div>
  20.   <script>
  21.     document.getElementById("btn").onclick = function () {
  22.       console.log(123);
  23.     };
  24.   </script>
  25. </body>
  27. </html>

image.png

参考文章

《Chrome 开发工具之 Memory》