881644 - CanvasGradient eats up RAM instantly

Status: NEW

(Core :: Graphics: Canvas2D, defect)

Description

[YUKI "Piro" Hiroshi]

Creating new gradient by CanvasRenderingContext2D.createLinearGradient() eats up memory too instantly on lately Firefox. I tested a stress test on Firefox 3.6, 4, 5, 6, 7 and later, then the speed of increasing of the memory usage seems to be accelerated on Firefox 6 and later for me. I tested on Windows 7 (64bit).

Steps to reproduce:

 1. Start Firefox with a clean profile.
 2. Open the Windows Task Manager by Ctrl-Shift-ESC.
 3. Go to "Processes" tab and find "firefox.exe" out.
 4. Open the "scratch pad" (Shift-F4) on your Firefox.
    If you are testing on an old Firefox, use the alternative:
    http://piro.sakura.ne.jp/apps/jspanel.html
 5. Run following script:
------------------------------------------------------------------------
var canvas = document.createElementNS('http://www.w3.org/1999/xhtml', 'canvas');
canvas.width = 100;
canvas.height = 100;
canvas.setAttribute('style', 'width:100px;height:100px;position:fixed;top:0;right:0;z-index:10000;');
document.documentElement.appendChild(canvas);
var context = canvas.getContext('2d');
 
function random(max) {
  return parseInt(Math.random() * max);
}
 
function createGradient() {
  var gradient = context.createLinearGradient(0, 0, 100, 100);
  gradient.addColorStop(0, 'rgba(0,0,0,0)');
  gradient.addColorStop(1, 'rgba(' + random(255) + ',' + random(255) + ',' + random(255) + ',255)');
  return gradient;
}
 
function drawGradien() {
  context.save();
  context.strokeStyle = createGradient();
  context.beginPath();
  context.lineWidth = 10;
  context.lineCap = 'square';
  context.moveTo(random(100), 0);
  context.lineTo(random(100), 100);
  context.closePath();
  context.stroke();
  context.restore();
}
 
window.setInterval(drawGradien, 10);
window.setInterval(drawGradien, 10);
window.setInterval(drawGradien, 10);
window.setInterval(drawGradien, 10);
window.setInterval(drawGradien, 10);
------------------------------------------------------------------------

Actual result:
The memory usage of firefox.exe increases rapidly.

Expected result:
The memory usage of firefox.exe increases slowly (or, doesn't increase.)


Additional information:
On my environment (Windows 7 64bit, 2GB RAM) Nightly 24.0a1 eats over 700MB RAM just in 20 seconds.
On the other side, Firefox 3.6 eats only 60MB after 2 minutes.

Comment 1

[YUKI "Piro" Hiroshi]

One more information. I can free the eaten memory by "Minimize memory usage" button in the "about:memory". In other words, GC seems to be not working automatically for the memory eaten by CanvasGradient.

Comment 2

[YUKI "Piro" Hiroshi]

Impact from this problem:
In my addon "System Monitor" https://addons.mozilla.org/firefox/addon/system-monitor/ , I use many one-time gradients to draw stacked bar graph to report system information. However, because Firefox uses too much RAM from this problem, I cannot feel comfortable in a web-browsing anymore. (Of course, I agree to rewrite my addon to work without such one-time gradients, but I think that this problem should be solved.)

Comment 3

[YUKI "Piro" Hiroshi]

This problem doesn't happen for me, when I use just one permanent gradient. Testcase:

----------------------------------------------------------------------------------------
var canvas = document.createElementNS('http://www.w3.org/1999/xhtml', 'canvas');
canvas.width = 100;
canvas.height = 100;
canvas.setAttribute('style', 'width:100px;height:100px;position:fixed;top:0;right:0;z-index:10000;');
document.documentElement.appendChild(canvas);
var context = canvas.getContext('2d');

function random(max) {
  return parseInt(Math.random() * max);
}

function createGradient() {
  var gradient = context.createLinearGradient(0, 0, 100, 100);
  gradient.addColorStop(0, 'rgba(0,0,0,0)');
  gradient.addColorStop(1, 'rgba(' + random(255) + ',' + random(255) + ',' + random(255) + ',255)');
  return gradient;
}

var gradient = createGradient();

function drawGradien() {
  context.save();
  context.strokeStyle = gradient;
  context.beginPath();
  context.lineWidth = 10;
  context.lineCap = 'square';
  context.moveTo(random(100), 0);
  context.lineTo(random(100), 100);
  context.closePath();
  context.stroke();
  context.restore();
}

window.setInterval(drawGradien, 10);
window.setInterval(drawGradien, 10);
window.setInterval(drawGradien, 10);
window.setInterval(drawGradien, 10);
window.setInterval(drawGradien, 10);
----------------------------------------------------------------------------------------

Comment 4

[YUKI "Piro" Hiroshi]

about:support says:

Application Basics
------------------

Name: Firefox
Version: 24.0a1
User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:24.0) Gecko/20130611 Firefox/24.0

Extensions
----------

Name: ContextMenu Extensions
Version: 4.3.2013051000a134826
Enabled: false
ID: {4C4D8A1D-1E3C-439e-9298-16073A5C4851}

Name: DOM Inspector
Version: 2.0.14
Enabled: false
ID: [e-mail]

Name: JavaScript Debugger
Version: 0.9.89
Enabled: false
ID: {f13b157f-b174-47e7-a34d-4815ddfdfeb8}

Name: SQLite Manager
Version: 0.8.0
Enabled: false
ID: [e-mail]

Name: System Monitor
Version: 0.7.0+
Enabled: false
ID: [e-mail]

Name: Tree Style Tab
Version: 0.14.2013052901
Enabled: false
ID: [e-mail]

Important Modified Preferences
------------------------------

accessibility.typeaheadfind.flashBar: 0
browser.cache.disk.capacity: 358400
browser.cache.disk.smart_size.first_run: false
browser.cache.disk.smart_size.use_old_max: false
browser.cache.disk.smart_size_cached_value: 245760
browser.link.open_newwindow.restriction: 0
browser.link.open_newwindow.restriction.backup: 2
browser.places.smartBookmarksVersion: 4
browser.search.openintab: true
browser.search.useDBForOrder: true
browser.startup.homepage: chrome://ubufox/locale/ubufox.properties
browser.startup.homepage_override.buildID: 20130611081224
browser.startup.homepage_override.mstone: 24.0a1
browser.tabs.closeWindowWithLastTab: false
browser.tabs.insertRelatedAfterCurrent: false
browser.tabs.loadFolderAndReplace: false
browser.tabs.maxOpenBeforeWarn: 9999
browser.tabs.onTop: false
browser.tabs.tabClipWidth: 100
browser.tabs.warnOnClose: false
dom.mozApps.used: true
dom.w3c_touch_events.expose: false
extensions.checkCompatibility.3.7a: false
extensions.checkCompatibility.3.7b: false
extensions.checkCompatibility.4.0b: false
extensions.checkCompatibility.4.2a: false
extensions.checkCompatibility.6.0a: false
extensions.checkCompatibility.nightly: false
extensions.lastAppVersion: 24.0a1
font.internaluseonly.changed: true
font.name-list.monospace.ja: EUDC,MS Gothic, MS Mincho, MS PGothic, MS PMincho,Meiryo
font.name-list.sans-serif.ja: EUDC,MS PGothic, MS Gothic, MS PMincho, MS Mincho,Meiryo
font.name-list.serif.ja: EUDC,MS PMincho, MS Mincho, MS PGothic, MS Gothic,Meiryo
general.autoScroll: false
gfx.direct3d.checkDX10: false
gfx.direct3d.last_used_feature_level_idx: 1
network.cookie.prefsMigrated: true
places.database.lastMaintenance: 1371193958
places.history.expiration.transient_current_max_pages: 17087
places.history.expiration.transient_optimal_database_size: 84430848
plugin.disable_full_page_plugin_for_types: application/pdf
plugin.importedState: true
privacy.cpd.cookies: false
privacy.cpd.downloads: false
privacy.cpd.formdata: false
privacy.cpd.history: false
privacy.cpd.sessions: false
privacy.sanitize.migrateFx3Prefs: true
security.warn_viewing_mixed: false
storage.vacuum.last.index: 1
storage.vacuum.last.places.sqlite: 1370233507

Graphics
--------

Adapter Description: Intel(R) G45/G43 Express Chipset
Adapter Drivers: igdumd64 igd10umd64 igdumdx32 igd10umd32
Adapter RAM: Unknown
Device ID: 0x2e22
Direct2D Enabled: true
DirectWrite Enabled: true (6.2.9200.16492)
Driver Date: 2-11-2011
Driver Version: 8.15.10.2302
GPU #2 Active: false
GPU Accelerated Windows: 2/2 Direct3D 10
Vendor ID: 0x8086
WebGL Renderer: Google Inc. -- ANGLE (Intel(R) G45/G43 Express Chipset Direct3D9Ex vs_3_0 ps_3_0)
windowLayerManagerRemote: false
AzureCanvasBackend: direct2d
AzureContentBackend: direct2d
AzureFallbackCanvasBackend: cairo

JavaScript
----------

Incremental GC: true

Accessibility
-------------

Activated: false
Prevent Accessibility: 0

Library Versions
----------------

NSPR
Expected minimum version: 4.10
Version in use: 4.10

NSS
Expected minimum version: 3.15 Basic ECC
Version in use: 3.15 Basic ECC

NSSSMIME
Expected minimum version: 3.15 Basic ECC
Version in use: 3.15 Basic ECC

NSSSSL
Expected minimum version: 3.15 Basic ECC
Version in use: 3.15 Basic ECC

NSSUTIL
Expected minimum version: 3.15
Version in use: 3.15

Comment 5

[Alice0775 White]

I filed Bug 883089 that is regressed since Firefox7.

Comment 6

[Alice0775 White]

(In reply to YUKI "Piro" Hiroshi from comment #0)
I tested a stress test on
> Firefox 3.6, 4, 5, 6, 7 and later, then the speed of increasing of the
> memory usage seems to be accelerated on Firefox 6 and later for me. I tested
> on Windows 7 (64bit).

Are you sure that the problem occurred in Firefox6?

Comment 7

[YUKI "Piro" Hiroshi]

(In reply to Alice0775 White from comment #6)
> Are you sure that the problem occurred in Firefox6?

Yes. However, this seems to be a problem depends on my systems (video driver, etc.) because it isn't reproduced by other people.