堆快照功能工作原理：首先找到JS堆，然后对它进行一个照片的留存。有了照片的留存以后就可以看到它里面的所有信息，这也就是我们如何去监控的一个由来。而这堆快照在使用的时候其实也非常有用，因为它更像是专门针对于我们分离 DOM 的一个查找行为。
什么是分离 DOM ？
- 界面元素存活在 DOM 树上：我们在界面上看到的元素其实都是 DOM 节点，而这些 DOM 节点本应该都是存在于一个存活的 DOM 树上，不过对于 DOM 节点呢会存在几种形态。第一种形态我们称之为垃圾对象还有一种叫分离 DOM；
- 垃圾对象时的 DOM 节点：如果这个节点从当前的DOM树上进行了脱离，而且在JS代码当中也没有人在引用它，它其实也就成为了一个垃圾；
- 分离状态的 DOM 节点：如果当前节点只是从 DOM 树上脱离了，但是在 JS 代码中还有人在引用它，这种 DOM 称之为分离 DOM；
这种分离 DOM 在界面上是看不到的，但是在内存里面它却是占据着空间，所以在这种情况下就是一种内存泄漏。因此，就可以通过堆快照的功能去把它们从这里面都找出来只要能找得到就可以回到代码里面针对于这些代码进行清除，从而让我们当前的内存得到一些释放。
<html>
<body>
<button id="btn">Add</button>
<script>
let tempEle;
function fn () {
const $ul = document.createElement('ul');
for (let i = 0; i < 10000000; i++) {
const $li = document.createElement('li');
$ul.appentChild($li)
}
tempEle = $ul
}
document.getElementById('btn').addEventListenter('click', fn)
tempEle = null
</script>
</body>
</html>
