Chrome Memory Leak bug with measureText

[eggers]

I found an actual memory leak caused by not removing some event listeners, but I still had an issue that the Chrome tab was eating up a lot of memory when drawing lots of word clouds. The memory wasn't even released upon refreshing the tab so I did some investigation and tracked it down to the calls to fctx.measureText('\uFF37')

Here is a jsfiddle illustrating the issue:

https://jsfiddle.net/9ny8m9br/

Is there a reason that you are measuring \uFF37 rather than W?

[timdream]

FULLWIDTH LATIN CAPITAL LETTER W is used to infer the em square of the font (since it's is supposedly to be a square). It would be very strange if character other than that can stop the memory leak.

I will recommend you submit this test case to Chrome. You can paste the link once you do that so people can follow it along. Thanks!

[eggers]

@timdream I didn't see the memory leak happening with .measureText('m') or .measureText('W'), take a look at the fiddle and see if you're seeing the same issue as me.

I did report it through the Chrome help menu, but don't have an issue number, if I don't get a confirmation email by next week, I'll submit it again.

[eggers]

I submitted it on the chromium page: https://bugs.chromium.org/p/chromium/issues/detail?id=718934

[eggers]

A coworker wasn't seeing the same issue on OSX Sierra (I was on Yosemite), so I upgraded as well. The memory issue went away with Sierra, but there was still a performance issue:

See: https://jsfiddle.net/9ny8m9br/3/

measureText('\uFF37') x1000 random font size: 678.69677734375ms
measureText('m') x1000 random font size: 84.05029296875ms
measureText('\uFF37') x1000 fixed font size: 11.560791015625ms
measureText('m') x1000 random font size: 11.537841796875ms

[timdream]

Wow. Thank you for your investigation. I've ran out of ideas actually given that we'll need the estimated height bigger than the em square. It's probably worthy to file another issue with Chrome also. Do you want to do a measurement with Gecko too?

[eggers]

@timdream If you could check Gecko, that would be helpful. I've checked Safari & Firefox and haven't seen the issue as bad in either of those:

// Safari
measureText('\uFF37') x1000 random font size: 10.891ms
measureText('m') x1000 random font size:10.959ms
measureText('\uFF37') x1000 fixed font size: 10.062ms
measureText('m') x1000 fixed font size: 8.808ms

//Firefox
measureText('\uFF37') x1000 random font size: 187.59ms
measureText('m') x1000 random font size: 134.13ms
measureText('\uFF37') x1000 fixed font size: 121.28ms
measureText('m') x1000 fixed font size: 115.36ms

Also, what kind of issues should I look for if I replace the measureText('\uFF37') calls with measureText('W')?

[timdream]

@timdream If you could check Gecko, that would be helpful. I've checked Safari & Firefox and haven't seen the issue as bad in either of those:

@eggers Gecko == Firefox :) Looks like you've already done it and I don't have too.

Also, what kind of issues should I look for if I replace the measureText('\uFF37') calls with measureText('W')?

So the fh variable here decides the height of the canvas where we draw and measure the glyphs. So if you remove it it's possible the glyph will get cut off.

(I assume you don't worry about the use here since it's not called on every draw.)