GC是如何回收DOM对象的？

Question

问题描述：

代码如下：

        (function(){

            var btn = document.querySelector("#btn")

            btn.bigString = new Array(1000).join(new Array(2000).join("XXXXX"));

            btn = null

        })()

当我在自执行函数中往btn中添加了一个自定义属性，然后在末尾都已经置btn为null.按理说我这个大字符串btn.bigString会随着btn一起被回收，为什么我在profile中看到的却不是这样子的？btn这个DOM对象完全没有被回收，大字符串也还在。

当我将btn 替换成普通对象的时候，却又是正常的，这个bigString 是被回收掉的。

        (function(){

            //var btn = document.querySelector("#btn")

            var btn = {}

            btn.bigString = new Array(1000).join(new Array(2000).join("XXXXX"));

            btn = null

        })()

profile:

是我对于DOM对象 和js对象理解有误吗？我应该如何释放上面的DOM对象和bigString？

浏览器版本：

Answer 1

DOM元素是被页面所使用的，页面不被卸载（unload），DOM元素是不会被回收的。所以，btn=null只能让btn这个变量不再引用id='btn'的DOM元素，但页面依然在使用这个元素，当然是不会回收这个元素对应的对象的。