在这之前我们已经知道，一个 web 应用在执行的过程中如果想要去观察它内部的内存变化，是可以有多种方式的。例如在这里就通过简单的 Demo 演示一下怎样借助于浏览器当中自带的任务管理器去监控脚本运行时内存的变化。
开始之前先做一些简单的说明，将来我们要运行文件的平台是浏览器所以在这里要编写的就是 HTML 文档。至于如何在代码当中模拟内存的变化，这里我们选择的就是在界面当中去放置一个元素，然后给它添加上一个点击事件，当这个事件触发的时候我们就去创建一个长度非常长的数组，这样就是产生一个内存空间上的消耗。
<html>
<body>
<button id="btn">Add</button>
<script>
const btn = document.getElementById('btn');
btn.onClick = function () {
let arr = new Array(100,000)
}
</script>
</body>
</html>
如图中内存管理器所示有一列内存和和一列JavaScript内存，这两列都叫内存有什么区别呢？简单来说明一下，针对于第一列的内存来说它其实表示的是原生内存，简单理解就是我们当前界面里面会有很多的DOM节点，而这个内存指的就是 DOM 节点所占据的内存。如果说这个数值在持续的增大，就说明了我们的界面中在不断的去创建新 DOM ；最后一列叫 JavaScript 内存，这列里面我们表示的就是 JS 的堆在这列当中我们需要关注的其实就会死小括号里的值，它表示的就是是我们界面当中所有可达对象正在使用的内存大小。如果说这个数值一直在增大就意味着我们当前的界面中要么在创建新对象，要么就是当前现有对象在不断的增长。比如说一当前界面为例，点击之前小括号里的值一直都保持不变。当我们在页面中多次点击 Add 按钮过后再看看浏览器任务管理器中 JS 内存的变化，会发现数值变大了。通过这样一个过程我们就可以借助于当前浏览器的任务管理器来监控一下脚本运行时整个内存的变化。我们能得出的结论就是，如果说我们当前做后一列小括号里面的数值一直增大，就意味着我们这个内存是有问题的具体来说是什么样的问题，我们当前这个工具就显得不是那么好用了。因为它只能去帮助我们发现这个地方有没有问题，但是如果说我们想地位问题的时候它就不太好用了。
