Javascript Chrome等中的画布操作（fillRect（）等）时内存消耗问题

我有一个用GWT编写的应用程序，看起来有点像甘特图。它工作得很好，但有时我在应用程序的内存使用方面遇到一些问题。。为了绘制图表，我使用了一个大画布，例如宽度10000像素，高度2500像素。当我开始绘制图表时，一切都很好（内存使用JavaScript在Chrome 50MB中，内存使用全部在Chrome 150MB中（来自Chrome任务管理器））。 问题开始于重新绘制图表的某些部分，例如，可以选择某些内容，这意味着单击的矩形应该得到另一种颜色。在这种情况下，我重新绘制了所有与我的矩形相交的新矩形，例如5个总尺寸为40 x 10 px的其他矩形。这确实是在消耗内存，JavaScript内存使用量几乎是固定的，但总体上内存使用量增加了大约100MB。为什么？如果我的画布更小，例如1500 x 1000 px，并且我执行相同的操作，那么内存使用量也会增加，但仅增加50 MB。 这就是为什么我认为问题与我在JavaScript/GWT中的编码无关，它与chromes如何处理画布上的绘画有关。有没有可能看到，是什么消耗了所有的记忆？使用Chrome开发工具，我只能看到所有JavaScript内容。但是JavaScript的内存使用几乎是固定的。我读到一些关于chrome内部跟踪工具的信息。但是如果你不了解chrome的内部结构，这真的很难理解。内存使用的其他原因是什么？ 如果是在画布上重新喷漆，我应该怎么做？我读了一些关于画布/渲染策略的内容：

背景渲染（创建更改大小的第二个画布，在此画布上绘制所有更改，并将此画布放置在原始的大画布中）

多画布（创建更改大小的第二个画布，在此画布上绘制所有更改，并将此画布放置在原始大画布顶部的正确位置，作为html页面中的第二个画布）

一个适合屏幕大小的画布，你只画孔图的一个小视图，当你“滚动”时，你必须重新绘制缺失的部分（我认为chrome trace工具就是这样工作的，不是吗？）

首先，在我的应用程序中实现它非常容易，2。有点复杂，3。这很难。其中一种策略能解决我的问题吗？如果是战略c），那么最好的实施方式是什么？GWT框架或HTML5/canvas本身是否提供支持？滚动面板的用途是什么，因为画布的大小是固定的？跟踪工具是如何做到这一点的

---

非常感谢，Szdnez

图像大小10000 x 2500使用10000*2500*4字节（100mb）的最小值。根据您如何使用该映像以及GPU及其RAM的功能，将会有更多的使用

如果没有代码，真的不可能说出内存使用在哪里，哪里是浪费和不必要的

---

Chromes任务管理器显示使用的总内存，其中包括代码不再引用的内存，以及仅等待GC（垃圾收集，内存管理系统的一部分）清理的内存。如果需要，浏览器将强制GC清理。内存使用量（如任务管理器中所示）可以远远超过100MB，而实际上您只使用100MB。

100-150 MB的总使用量不是问题所在。问题是，我的代码中有一些操作，额外使用了大约100MB。 经过多次尝试和错误，逐行取消/注释，我发现了瓶颈（我希望我找到了）。例如，在我重新绘制矩形之前，我对舒尔进行了一些剪辑，只重新绘制了一个特殊区域（简化的代码示例）：

使用此代码，内存使用量将增加200 MB。如果我跳过剪辑：

// context2d.rect( x, y, width, height );
// context2d.clip();

内存使用几乎是稳定的。在这种情况下，我并不真的需要剪辑。但为什么它如此“昂贵”？还有其他的可能性吗

---

谢谢，Szdnez

几年前，我遇到了同样的问题，不得不选择3。这只发生在Chrome上，奇怪的是，Firefox和IE11都很好。这对我来说越来越奇怪了。在使用clipping的测试用例中，我在整个画布上绘制了rect。现在我试着不用剪辑，所以我必须画出与之前剪辑相同大小的矩形。现在，内存问题又回来了。如果我只是将新代码中rect的大小更改为画布的大小，那么就没有内存问题。看起来，当你画一些比画布小的东西时，内存有问题。

// context2d.rect( x, y, width, height );
// context2d.clip();