重要的事情说三遍：
一定要养成良好的编码习惯！
一定要养成良好的编码习惯！
一定要养成良好的编码习惯！
1. 发现问题
最近在做文档的解析和渲染，属于dom操作比较频繁的了。
一通写下来畅快淋漓，最后跑起来，诶？没问题还挺好，非常完美，多翻几页，任务管理器 浏览器占的内存要爆了，飙到了 5G，我的妈。
因为是内存问题，我们可以很快就想到利用 chrome 的快照功能。
2. 解决问题
建立第一个快照，并且按 shallow size 倒序排。
翻到第4页，建立第二个快照。
对比两个快照的增量
随便选中一个就定位了，然后咱们就对症下药了就行啦。
虽然不是我写的这块，但是我觉得我肯定也会写成这样，对自己就是这么自信！
3. 什么是 detached dom elements?
即使 dom elements 已经不在 dom tree 里了，但是他们的引用还保留着，那么这块 dom elements 所占的内存就不会被释放掉，因为引用还在，垃圾回收机制并不会因为它不在 dom tree 中了而去回收他。
4. 典型案例
var example = document.createElement("p");
example.id = "someText";
document.body.appendChild(example);
var value = {
text: document.getElementById('someText')
};
function createFun() {
value.text.innerHTML = "Javascript is not Java";
}
createFun();
function deleteFun() {
// 从 dom tree 中移除了，但是 value.text 对她的引用还在哟~
document.body.removeChild(document.getElementById('someText'));
}
deleteFun();
我们看一下快照
这里有一个线上的 demo 大家可以点点看。 jec.fyi/demo/detach…
ball ball 大家一定要养成良好的编码习惯啊！！！一些蜜汁 bug 很可能就是编码习惯造成的。
参考文档：
