用chrome开发者工具的memory选项，分析js代码某个函数的内存使用率

大多数的前端小白都可能不知道chrome开发者选项中的memory怎么用，经过一段时间的研究，我终于摸清了它的使用套路，好啦，咱开始操作吧～

1.首先打开sources，点击需要调试的文件，找到相应的函数，在要测试的函数的一上一下添加两个断点。

2.然后刷新一下，js运行到断点位置就会停下来，先触发第一个断点，然后打开memory选项卡，选择heap snapshot选项，然后点击左侧的小灰点，它就会记录当前函数执行前的内存状况，以下三个分别为：
点击F12出来的界面中的【Memory】选项，可以看到三个主要的选项：

 1）Heap snapshot：堆快照

 2）Allocation instrumentation on timeline：分时段的内存占用

 3）Allocation sampling：分配抽样

3.继续点一下页面上的debugger按钮，让第二个断点触发，这时候在点击memory面板的左侧的小灰点，这时候就有两个snapshot了，选择如下图的选项为对比1和2

4.找到array，点开array elements，鼠标悬停在下面对应的之前写的arr1上面，就可以看到arr1的情况了

5.在右边，可以看到对应的数组arr1的内存使用情况,shallow Size代表栈存储情况，retained Size代表堆存储情况