多个画布层内存泄漏

multiple canvas layers memory leak

本文关键字：内存 泄漏 布层      更新时间：2024-06-02

我正在尝试将多个画布层添加到DOM中，发现如果我使用.fillText将内容添加到层中，虽然添加许多层并不是问题，但我突然使用了大量内存，通常会导致firefox崩溃并导致整台机器停机。如果有人能看到我做错了什么，我会感谢你的任何建议——谢谢tb！

下面的代码——这是真实情况的简化版本，但说明了问题——如果我增加循环的运行次数，我很快就会遇到问题。然而，如果我注释掉.fillText代码，我似乎可以添加许多层，但只要我尝试并添加.fillText，我的内存使用就会激增。。。。

  <!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>.</title>
</head>
<body>
    <div id="canvasCont"></div>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script>
    $(function () {
    var id = 1;
    var top = 100;
    for ( i = 0; i < 5; i++ ) {
        var left = 100;
        for ( a = 0; a < 5; a++ ) {
            $('#canvasCont').append(
                "<canvas width='1300px' height='1300px' style='position: absolute; border: 1px solid black;' id='canvas_" + id + "'>" +
                    "Your browser does not support canvas" +
                "</canvas>"
            );
            var context = document.getElementById( 'canvas_' + id ).getContext( '2d' );
            context.font = "10px Verdana";
            context.fillStyle = "red";
            context.fillText(
                id,
                left,
                top
            );
            left += 55;
            id++;
        }
        top = top + 55;
    }
}
});
</script>
</body>
</html>

FillText使用大量内存进行显示，因为它是基于矢量的绘图。（如果你打算始终显示相同的文本，我建议使用图像）

我还要补充一点，你正在制作分辨率很高的多页画布，这对你的机器来说可能很难。

最后我找到了这个库。。。。。paperJS解决了多个画布层上的多个实时数据点的性能问题。强烈推荐。

相关文章：