Question

我想了解为什么在将图像绘制到HTML5 Canvas时，内存会继续在Chrome（版本38.0.2125.111）中累积。使用下面的代码，我会看到“内存”。我在Chrome浏览器的任务管理器中的标签数字增加了大约300-400kb /秒，最高可达35mb到50mb之间，然后下降到大约5mb。在那之后发生一次，随着过程继续，记忆只是继续攀爬和攀爬（即，它似乎再次被清除）。如果我点击“Go＆＃39;再次，或者即使我刷新页面，内存也不会下降。

＆＃13;

<!DOCTYPE HTML>
<html>
    <head>
        <script type="text/javascript">
            function tryit () {
                var px=1;
                var py=1;
                var canvas = document.getElementById('myCanvas');
                var context = canvas.getContext('2d');
                var canvas2 = document.getElementById('myCanvas2');
                var context2 = canvas2.getContext('2d');
                var img=document.getElementById("img1");
                var thereps=document.getElementById("txtreps").value;
                
                context2.drawImage(img,0,0);

                var counter=1;

                function loop() {
                    counter=counter+1;
                    px=Math.random()*1000;
                    py=Math.random()*800;
                    
                    context.drawImage(canvas2, 0, 0, 10, 16, px,py,10,16);
                    if (counter>=thereps) {
                        clearInterval(myTimer);
                        context.clearRect(0,0,1034,814);
                        alert("done");
                    }
                }
                myTimer = setInterval(loop,17);
            }
        </script>
    </head>
    <body>
        Loop: 
        <input id="txtreps" type="text" size="6" value="10000"/> 
        times 
        <input type="button" onclick="tryit();" value="Go"/>
        
        <div style="position:relative;width:1034px;height:814px;border:1px solid grey;">
            <canvas id="myCanvas" width="1034" height="814" style="visibility: visible; position: absolute; top:0; left: 0;border:1px solid black;" ></canvas>          
            <canvas id="myCanvas2" width="10" height="16" style="visibility: hidden;position:absolute; left:0px; top:0px;border:1px solid red;" ></canvas>
            <img id="img1" src="untitled.png" width="10" height="16" style="visibility: hidden; position: absolute; top:0; left: 0;border:1px solid green;">
        </div>
    </body>
</html>

＆＃13;

这是我的大型应用程序如何运行的微观示例。用户输入触发动画启动，它们通常最多运行5秒然后停止。然后用户再次给出输入以开始另一个动画。这可以重复数百次。由于我有更多的图像，我发现内存以每秒3-4mb的速度增加，不久之后我就遇到了Aw Snap错误，因为内存已超过1.4gb。难道我做错了什么？有什么方法可以强制清理＆＃39;浏览器似乎经常再次应用的过程？

请注意，当我使用requestAnimationFrame而不是计时器设置循环时，我发现即使我实际上没有绘制任何内容也会发生内存增加（即我没有进行drawImage调用）。

Answer 1

您应该使用RAF，setInterval实际上应该是您的最后手段，因为它会在浏览器尝试保持循环准时时占用。 Take a look here if that makes no sense

相反，如果您无法使用RAF，请使用setTimeout。

请注意，当我使用requestAnimationFrame设置循环而不是一个计时器，我发现即使我没有，也会发生内存增加实际上绘制任何东西（即我不进行drawImage调用）。

这是不可避免的，因为每次RAF执行时都会有一个函数调用开销（堆栈，参数等）。但是对于RAF，GC应该在当今大多数浏览器的适当时间启动（以避免混蛋）并清除明确的old-generation数据。

Answer 2

这似乎是当前Chrome版本的潜在错误。我向谷歌提出了一个问题，希望能够解决这个问题。

感谢您的帮助。

内存增加绘制到画布

2 个答案: