javascript - 关于释放引用DOM对象内存的问题
高洛峰
高洛峰 2017-04-10 17:08:09
0
1
860

运行环境:OS X El Capitan 10.11.3
浏览器:Chrome 48.0.2564.116
我创建了10000个p元素,并且用了一个数组分别引用了这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>
        <p id="zone"></p>
        <script>
        (function(){

            var elemArray = [];
            var elemCount = 10000;

            var create = function(){
                var i = 0;
                var zone = document.getElementById("zone");
                for(;i<=elemCount;i++){
                    var p = document.createElement("p");
                    p.id = "p" + i;
                    p.innerHTML = "这是第" + i + "个p";
                    zone.appendChild(p);
                }
            };
            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("p" + 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>

下面是chrome内存分析图片:

创建节点前 此时内存占用3.5M

创建节点后 此时内存占用3.5M

引用节点后 此时内存占用4.0M (注意观察HTMLpElement)

解除引用后 此时内存占用3.9M

删除元素后 此时内存占用3.5M

补充:

  1. 我的操作步骤就是图片的顺序来的

  2. 从内存占用量来看,也是在删除元素以后内存用量才降了下来

高洛峰
高洛峰

拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师,...

reply all(1)
大家讲道理

一个节点被数组和节点树同时引用,释放了数组中的引用肯定不会释放节点所占的内存啊,因为这时候还有节点树的引用没有释放呢

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template