内存增加绘图到画布

Memory increase drawing to Canvas

本文关键字：绘图 增加 内存      更新时间：2023-09-26

我试图理解为什么在Chrome（版本38.0.2125.111）中，当在HTML5画布上绘制图像时，内存会持续积累。使用下面的代码，我看到Chrome任务管理器中我的选项卡的"内存"数字以每秒300-400kb的速度增加到35mb到50mb之间，然后下降到5mb左右。在这种情况发生一次之后，随着这个过程的继续，记忆就会不断攀升（即它似乎再也不会被清除）。如果我再次单击"转到"，或者即使刷新页面，内存也不会下降。

<!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>

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

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

您应该使用RAF，setInterval实际上应该是您的最后手段，因为它会在浏览器试图保持循环时占用浏览器。如果这没有意义的话，看看这里。

相反，如果不能使用RAF，请使用setTimeout。

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

这是不可避免的，因为每次执行RAF时都会有一个函数调用开销（堆栈、参数等）。但有了RAF，GC应该在适当的时候在当今大多数浏览器上启动（以避免颠簸），并清除过时的旧一代数据。

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

谢谢你的帮助。

相关文章：