7

继续这个问题：任务管理器显示内存泄漏，但堆快照没有

我设法创建了一个非常简单的示例来说明此泄漏，这是完整的源代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>svg test</title>



        <script type="text/javascript">

            var svg;
            var interval;
            var svg;

            window.onload = function(){
                createSVG();
                start();
            }

            function start(){
                interval = setInterval(createElements, 100);                
            }

            function createSVG(){

                var div = document.getElementById("svgdiv");
                div.innerHTML = "";

                svg = createSvgElement("svg");
                svg.style.position = "absolute";
                svg.style.width = "600px";
                svg.style.height = "500px";
                svg.setAttribute("version", "1.1");
                div.appendChild(svg);
                createElements();               
            }


            function createElements(){

                removeElements();

                for(var i = 0; i < 500; i++){
                    var element = createSvgElement("circle");
                    element.setAttribute("r", Math.random() * 10);
                    var transform = "translate(" + Math.round(Math.random() * 600) + "," + Math.round(Math.random() * 500) + ")";
                    element.setAttribute("transform", transform);
                    element.setAttribute("fill", "#CC0000");
                    svg.appendChild(element);
                }
            }

            function removeElements(){
                while(svg.hasChildNodes() ){
                    svg.removeChild(svg.lastChild);
                }               
            }


            function createSvgElement (name) {
                return document.createElementNS("http://www.w3.org/2000/svg", name);
            }

            function stop(){
                clearInterval(interval)
            }


        </script>
    </head>
    <body style="background-color:#FFFFFF">
        <div id="svgdiv" style="width:600px; height:500px;"></div>
        <input type="button" value="start" onclick="start()">
        <input type="button" value="stop" onclick="stop()">
    </body>
    </html>

如果我运行这个脚本，Chrome 会一直吃掉内存，直到它崩溃。其他浏览器没有。我没有一个一个地删除孩子，我还尝试通过设置innerHTML=""来快速清除它，但它是一样的。

我启用了 Chrome 的一个实验性功能，它显示了所使用的内存类型。“页面结构”内存增加了一点（但是 HTML 保持不变，并且没有分离的 DOM 对象），但大部分内存都在“其他”部分。

如果我停止脚本并强制 GC 完成它的工作，内存只会减少几千字节。但是，如果我等待一两分钟，内存几乎会被清理到初始水平。我知道我的脚本非常紧张，但是如果我仅每 1 或 2 秒运行一次它也会发生这种情况 - 我认为这足以让 GC 完成它的工作。而且我知道 GC 正在工作，因为释放了其他类型的内存。这可能是Chrome错误吗？也许我应该在删除元素之前做点什么？

4

3 回答 3

1

我设法减慢它的速度，但它仍然在泄漏。我还使用没有泄漏的 Raphael.js 重新创建了测试。但是当我测试时，我发现它是在附加圆圈的时候。所以拉斐尔一定在做些什么来阻止它在那个时候泄露。

于 2013-01-25T10:59:46.467 回答
0

不确定，如果它会有很大帮助，但是如果你只定义一次“var svg”，那么内存消耗（在任务管理器中）并没有那么快地上升，并且 stop() 函数在那之后也可以工作

于 2013-01-25T12:42:50.580 回答
0

这确实是 Chrome 中的错误，稍后修复： https ://bugs.chromium.org/p/chromium/issues/detail?id=172221&can=4&q=svg&colspec=ID%20Pri%20Mstone%20ReleaseBlock%20OS% 20Area%20Feature%20Status%20Owner%20Summary

于 2016-07-06T19:05:47.397 回答