关于释放引用DOM对象内存的问题

Question

关于释放引用DOM对象内存的问题

2025

发布于
2016-02-21

更新于
2016-02-21

运行环境：OS X El Capitan 10.11.3
浏览器：Chrome 48.0.2564.116
我创建了10000个DIV元素，并且用了一个数组分别引用了这10000个对象。按理说当我把数组中的元素删除后应该释放对应引用对象的内存。然而并没有，只有当我把元素从DOM树中删除了对应的内存才真正的释放了。请问为什么会出现这种情况

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>测试</title>
    </head>
    <body>
        <button id="create" >创建节点</button>
        <button id="clear" >删除节点</button>
        <button id="link" >连接节点</button>
        <button id="unlink" >取消连接</button>
        <div id="zone"></div>
        <script>
        (function(){

            var elemArray = [];
            var elemCount = 10000;

            var create = function(){
                var i = 0;
                var zone = document.getElementById("zone");
                for(;i<=elemCount;i++){
                    var div = document.createElement("div");
                    div.id = "div" + i;
                    div.innerHTML = "这是第" + i + "个div";
                    zone.appendChild(div);
                }
            };
            document.getElementById("create").addEventListener("click",create,false);

            var clear = function(){
                var zone = document.getElementById("zone");
                zone.innerHTML = "";
            };
            document.getElementById("clear").addEventListener("click",clear,false);

            var link = function(){
                var i = 0;
                for(;i<=elemCount;i++){
                    elemArray[i] = document.getElementById("div" + i);
                }
            };
            document.getElementById("link").addEventListener("click",link,false);

            var unlink = function(){
                if(elemArray.length > 0)
                    elemArray.splice(0,elemArray.length);
            }
            document.getElementById("unlink").addEventListener("click",unlink,false);

        })();
        </script>

    </body>
</html>