在Chrome等畫布操作（fillRect（）等）時消耗內存的問題

Question

我有一個用GWT編寫的應用程序，看起來有點像甘特圖。它工作的很好，但有時我對應用程序的內存使用有一些問題。要繪製圖表，我使用一個大的畫布，例如寬度爲10000像素，高度爲2500像素。當我最初繪製圖表時，一切正常（Chrome 50 MB內存使用率JavaScript，Chrome內存使用率150 MB（來自Chrome任務管理器））。 問題開始於重新繪製圖表的某些部分，例如可以選擇某種東西，這意味着單擊的矩形應該獲得另一種顏色。在這種情況下，我會重新繪製與矩形相交的所有新圖形，例如整體大小爲40 x 10像素的其他5個矩形。這真的是內存消耗，JavaScript內存使用率幾乎是固定的，但內存使用量增加了大約100 MB。爲什麼？如果我的畫布較小，例如1500 x 1000像素，並且執行相同的操作，則內​​存使用量也會增加，但僅限於50 MB。 這就是爲什麼我認爲這個問題與我在JavaScript/GWT中的編碼無關，它有一些事情要做chromes如何處理畫布上的繪畫。有沒有可能看到什麼會消耗所有的記憶？使用Chrome開發工具，我只能看到所有的JavaScript東西。但JavaScript的內存使用情況幾乎是固定的。我讀了一些關於Chrome內部跟蹤工具的內容。但是如果你不瞭解鉻的內部知識，這真的很難理解。還有什麼可能是內存使用的原因？ 如果是在畫布上重新粉刷，我該怎麼辦？我讀了一些關於帆布/渲染策略：

1. 背景渲染（創建改變的大小的第二畫布，畫這個畫布上的所有更改，並把這個原，大單）
2. 多帆布（創建更改大小的第二個畫布，在此畫布上繪製所有更改並將此畫布置於原始頂部的正確位置，作爲第二個畫布放置在html頁面中），
3. 一個畫布適合到屏幕大小，你只畫一個小圖的孔圖，當你「滾動」時，你必須重畫缺失的部分（我認爲鉻軌跡工具是這樣工作的，不是嗎？）

首先在我的應用程序中很容易實現它，2.稍微複雜一些，3.比較困難。其中一個策略能解決我的問題嗎？如果是策略c），那麼實施它的最好方法是什麼？是否有來自GWT框架或HTML5/canvas本身的支持？關於滾動面板的用法是什麼，因爲畫布的大小是固定的？跟蹤工具如何做？

非常感謝，Szdnez

Answer 1

圖像尺寸10000 2500使用10000 * 2500 * 4個字節（100MB）最小隻是存在。取決於你如何使用該圖像以及GPU和RAM的功能，將會有更多的使用。

沒有代碼，真的不可能說出內存使用情況以及浪費和不必要的地方。

Chromes任務管理器顯示使用的總內存，這包括不再被代碼引用的內存，並且簡單地等待GC（垃圾收集，內存管理系統的一部分）清理。如果需要，瀏覽器將強制GC清理。內存使用情況（如任務管理器中所示）可以超過100MB，而實際上您只使用100MB。

Answer 2

100-150 MB的總使用率不是問題。問題在於，我在我的代碼中執行了一些操作，其中額外使用了大約100 MB。 經過大量的嘗試和錯誤，並逐行解除/評論，我發現了瓶頸（我希望我找到了它）。在我重繪例如矩形，我做一些削波是舒爾，只有一個特殊區域redrawed（簡化的代碼示例）：

context2d.save() 

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

redrawRectangle(); 

context2d.restore; 

有了這個代碼由200 MB的內存使用量增加。如果我跳過剪輯：

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

內存使用情況幾乎穩定。在這種情況下，我並不需要裁剪。但爲什麼它是如此「昂貴」？還有其他可能嗎？

感謝，Szdnez