监控DOM的垃圾回收时发现的问题?

一开始看书上说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节点和事件数量都没变:

clipboard.png
然而在memory点击内存快照之后,DOM节点数量马上就正常了,在快照里看HTMLDivElement的数量也是正常的

clipboard.png
如果不点内存快照,等很久DOM数量还是节点移除前的数量,所以到底是Performance minitor监控出了问题,还是点了内存快照后,会强制进行一次垃圾回收,把没有引用的DOM及其事件回收了?测试的chrome浏览器是最新版本。

阅读 1.4k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题