了解关于chorme浏览器下的CPU profiler的使用，能让你知道在javascript代码里，哪些代码导致运行慢，以及查看是否存在内存泄漏数据及数据存储的问题。
关于heap snapshot的使用
图一 heap snapshot位置
通过浏览器无痕模式打开只有的空态页面example 1，参考上图，在浏览器开发者工具中选择Memory下的profiles, 选中heap snapshot,点击take snapshot按钮开始进行数据统计，会出现图2的效果
图二 空态页面下heap snapshot的快照数据
虽然，上面是一个空态内容页面，但有很多对象也被包含其中，每个js对象在页面加载时都会包含一系列的不可调用的本地构造函数，带括号的表示不可以直接调用的本地构造函数，可以从图2中看到有很多 (compiled code) 和 (system)的实例，还有一些传统的js对象，如Document、Window等。
<html>
<head>
<script>
var counter = 0;
var instances = [];
function X() {this.i = counter++;}
function allocate() {
instances.push(new X());
}
</script>
</head>
<body>
<button onclick="allocate()">Allocate</button>
</body>
</html>
接下来分析一个复杂的案例Example 2，当每次点击“allocate”按钮时，它会分配一些内存。点击完按钮后，在通过heap snapshot监测，能看到多了变量X的信息，如图3所示
图3 点击按钮后的快照信息
在图3中一眼看到的X信息是通过滚动才找到的，当数据比较多时，查找不太方便，会有以下两种方法供参考，第一种是你知道自己要找什么内容，可以在搜索框中过滤，如图4，搜索X可以快速过滤无用信息，找到有用信息。
图4 快速搜索查找
另一种，是你需要了解在操作过程中产生的内存数据，此时利用chrome的堆快照工具中的一个比较好的功能，这个会用的比较多，它允许你将两个快照视图相互比较，只关注差异。要使用它，请刷新页面并使用图4中所示的清除所有配置文件按钮清除堆快照视图。
图5 清除配置文件快照
需要注意的是，重置heap snapshot视图的方式有2种，一是点击图4中的“清除所有profiles”按钮，而是通过刷新页面
接下来，在点击“allocate”按钮前，先记录一个heap snapshot快照，然后选中左侧的profiles栏目，会出现类似图1的导航，现在可以点击几次“allocate”按钮，点击“”take heap snapshot "按钮会生成另一个快照图5所示,如果你选择第二个红色框的“All Objects”下拉选项，它会出现多个选项，主要是关于一个快照记录和另一个快照记录的差异对比，如果snapshot1和snapshot2的对比，通过一些列操作，snapshot2比snapshot1多了哪些属性才是用户关心和感兴趣的
图6 多个快照
点击“allocate”按钮时，会产生额外的X对象，由于Chrome会延迟加载对象进行智能处理，如果您点击按钮后发现没有获取X，可以尝试多点几次进行快照记录，同时，越往后看到的内存视图会越简明，如图7和图8的对比
图7 snapshot1-snapshot2快照对比数据
图8 snapshot2-snapshot3快照对比数据
到此为止，基本上介绍完关于heap snapshot的大致使用方式，接下来对数据进行分析， 您仍可以看到为这些 X 对象分配内存所涉及的内容远多于给它们自己的内存。但现在让我们关注 X 对象本身
图9 X的具体数据
如果您展开 X 旁边的显示三角形，您将看到您在内存快照之间分配的三个 X 实例。每个都报告为 X @94753 之类的东西——@ 后面的数字对于页面中每个分配的对象都是唯一的。如果您刷新并重新加载页面，您将获得一组新的、不同的对象 ID。
这些 ID 只是为了帮助您保持对象实例的正确性，而不是引用任何内部的东西；特别是，它们不引用实际的内存地址。
参考文档： commandlinefanatic.com/cgi-bin/sho… mp.weixin.qq.com/s/uxSoXkmi5…
