一开始看书上说IE6,IE7DOM的垃圾回收采用引用计数,所以在chrome上试了下创建元素再绑定事件,造成循环引用,然后移除DOM,看看DOM有没有被回收,然后遇到了如下问题,代码:
<body>
<button onclick='a()'>remove</button>
<button onclick='b()'>addDom</button>
<div id='div'></div>
<script type="text/javascript">
function a(){
document.querySelector('#div').remove()
}
function b(){
let $ = document.querySelector.bind(document)
for(let i=0;i<1000;i++){
let div=document.createElement('div')
div.addEventListener('click',function(e){})
$('#div').appendChild(div)
}
}
</script>
</body>
运行后,点击addDom按钮,监控DOM,这个时候没有问题,DOM添加上去了:
然后点击remove,按理说父元素被移除了,在chrome上DOM节点和事件都会被移除,但是等了很久,监控的DOM节点和事件数量都没变:
然而在memory点击内存快照之后,DOM节点数量马上就正常了,在快照里看HTMLDivElement的数量也是正常的
如果不点内存快照,等很久DOM数量还是节点移除前的数量,所以到底是Performance minitor监控出了问题,还是点了内存快照后,会强制进行一次垃圾回收,把没有引用的DOM及其事件回收了?测试的chrome浏览器是最新版本。