Mark Straver Reporter
	Description • 10 years ago

User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:34.0) Gecko/20100101 Firefox/34.0
Build ID: 20141125180439

Steps to reproduce:

I went to W3schools for a canvas tutorial it is used to demonstrate the use of canvas drawing an analog clock.

http://www.w3schools.com/canvas/canvas_clock_start.asp


Actual results:

Firefox starts the animation just fine. after about 15 seconds or so, it becomes laggy, and another 10 seconds later the browser just completely chokes up.

Windows' "not responding" dialog box has the following details:

Description:
  A problem caused this program to stop interacting with Windows.

Problem signature:
  Problem Event Name:	AppHangB1
  Application Name:	firefox.exe
  Application Version:	37.0.0.5446
  Application Timestamp:	5479be43
  Hang Signature:	0d22
  Hang Type:	0
  OS Version:	6.1.7601.2.1.0.256.1
  Locale ID:	2057
  Additional Hang Signature 1:	0d2247cf47154e532790f7f954ae32de
  Additional Hang Signature 2:	f6a5
  Additional Hang Signature 3:	f6a5084e134ca375a2e7a19f422e0cc9
  Additional Hang Signature 4:	0d22
  Additional Hang Signature 5:	0d2247cf47154e532790f7f954ae32de
  Additional Hang Signature 6:	f6a5
  Additional Hang Signature 7:	f6a5084e134ca375a2e7a19f422e0cc9

I've checked with Nightly, same thing happens.


Expected results:

The Canvas animated clock should run and keep running without hanging the browser.

	Mark Straver Reporter
	Comment 1 • 10 years ago

Checked with a brand new install of Firefox-release in a Windows 8 VM; the exact same thing happens. This VM is not hardware-accelerated, so it's likely not HWA/driver related. Brand new install on a new profile, no extensions.

	Loic
	Comment 2 • 10 years ago

Same issue with the old FF8.
Could you run the Profiler Add-on and upload the Cleopatra profile when it starts hanging.
https://developer.mozilla.org/en-US/docs/Mozilla/Performance/Profiling_with_the_Built-in_Profiler

	Alice0775 White
	Comment 3 • 10 years ago

http://people.mozilla.org/~bgirard/cleopatra/#report=b5b544d2886314a12428c0703307cb0d4c2cf5ff

I can also reproduce high CPU usage on IE11. I think the demonstrate is poor coding(algorithm).

	Mark Straver Reporter
	Comment 4 • 10 years ago

How, exactly, am I supposed to use an in-browser profiler when the browser becomes completely unresponsive? I tried using the tool, it's impossible. Do note that once it starts seriously hanging, the only way out is killing the process and restarting the browser. That won't allow me to capture or save any profiles.

There's also a difference between high CPU usage and a hard hang like in Firefox. The programming is an example, and is very straightforward. it's even explained exactly what is done in the 4 pages leading up to that one :)

	:Gijs (he/him)
	Comment 5 • 10 years ago

This doesn't reproduce on Mac, so it almost looks like it's related to the Windows drawing code...

Bas, is there any chance this is graphics-related? (see also the profile in comment #3)

	Milan Sreckovic [:milan] (needinfo for best results)
	Comment 6 • 10 years ago

I don't see this problem in Windows 7.  The memory usage doesn't seem to get out of hand, but there are Flash ads on this page, does disabling Flash make the problem go away?

	Alice0775 White
	Comment 7 • 10 years ago

I cannot reproduce on latest Nightly(2014-Jan-06) as well as on the bad build(2014-Dec-06)....
(Did the site change something?)

	Mark Straver Reporter
	Comment 8 • 10 years ago

I think the site must have changed something. I did shoot w3schools a message about the problem.

I didn't save the original script, sorry, and they never responded in e-mail either.

	Mark Straver Reporter
	Comment 9 • 10 years ago

By the way, Flash was not the issue, I already tested it with that disabled.

	Mark Straver Reporter
	Comment 10 • 10 years ago

I poked at archive.org, and found out what was changed -- the problem was in the Javascript itself and must have been a mistake of the w3schools people.

It still causes an issue because the unresponsive script routine is never triggered (since it ends up hanging on the draw routine, but not completely).

The problem is using setInterval recursively. They had drawClock() containing a setInterval with a call to itself. This would start exponentially stacking draw commands on the canvas:

function drawClock() {
  drawFace(ctx, radius);
  drawNumbers(ctx, radius);
  drawTime(ctx, radius);
  setInterval(drawClock, 1000);
}

Yes, bad scripting - is it possible to somehow safeguard against this kind of thing?

	Bas Schouten (:bas.schouten)
	Comment 11 • 10 years ago

(In reply to Mark Straver from comment #10)
> I poked at archive.org, and found out what was changed -- the problem was in
> the Javascript itself and must have been a mistake of the w3schools people.
> 
> It still causes an issue because the unresponsive script routine is never
> triggered (since it ends up hanging on the draw routine, but not completely).
> 
> The problem is using setInterval recursively. They had drawClock()
> containing a setInterval with a call to itself. This would start
> exponentially stacking draw commands on the canvas:
> 
> function drawClock() {
>   drawFace(ctx, radius);
>   drawNumbers(ctx, radius);
>   drawTime(ctx, radius);
>   setInterval(drawClock, 1000);
> }
> 
> Yes, bad scripting - is it possible to somehow safeguard against this kind
> of thing?

That's really a JavaScript question :-). But I doubt there is.

	Boris Zbarsky [:bzbarsky]
	Comment 12 • 10 years ago

> That's really a JavaScript question

No, it's a DOM question.  setInterval is not part of JavaScript.

Per spec, there's not much that can be done here short of trying to throttle the interval timers or something...