1188318 - JS-animation interrupted

Status: RESOLVED FIXED

(Core :: JavaScript Engine, defect)

Description

[Tobi Reif]

Attachment: screenshot_2.png

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.10; rv:39.0) Gecko/20100101 Firefox/39.0
Build ID: 20150630154324

Steps to reproduce:

On Mac OS X 10.10.4 on an older MacBook I did this:

1. Open
http://www.tobireif.com/non_site_stuff/unfinished_pixijs_demo_copy_for_bug_report/
and open the dev tools -> Performance tab, reload the page.
2. Open the same URL in 10 more tabs. (Perhaps focus each for a ~ 1-2 seconds.)
3. Close the 10 tabs, and immediately ...
4. ... hit the "record" button in the Performance tab. Wait until there's a major interruption in the animation, stop the recording.
5. Screenshots #2, #3, and #4 are attached. (The call tree is fully expanded in screenshot #4.)

Is this an issue that can be fixed in Firefox? Or should I report it as issue for the lib? Or is the issue in my code?

The animation runs smoothly, so I think there's no issue in the lib code / my code.
But then there's a major interruption although the JS code doesn't instruct Firefox to halt / slow down the animation - so I think it might be something that can be fixed in Firefox.


Actual results:

There's an interruption in the animation during which the animation seems to stop / the framerate drops to 3-4 FPS.


Expected results:

Smooth animation throughout.

Comment 1

[Tobi Reif]

Attachment: screenshot_3.png

Comment 2

[Tobi Reif]

Attachment: screenshot_4.png

Comment 3

[Tobi Reif]

Better to open and close 9 (instead of 10) additional tabs. Otherwise the first one might be black/empty (I'll report that latter issue separately).

Comment 4

[Tobi Reif]

Attachment: screenshot_5_nightly.png

Comment 5

[Tobi Reif]

Installed Nightly, ensured multi-process, followed the steps again - the issue is still there in Nightly. See attachment "screenshot_5_nightly.png".

Comment 6

[Tobi Reif]

(Related to reproducing this issue:
https://bugzilla.mozilla.org/show_bug.cgi?id=1188581 )

Comment 7

[Tobi Reif]

I should add that the issue might also occur if each of the tabs contains a different page (eg it might occur with different/various JS-animation/WebGL pages).

Comment 8

[Tobi Reif]

The interruption also happens without the dev tools being open.

Comment 9

[Boris Zbarsky [:bzbarsky]]

Chances are, there's a GC that happens there or something...

Comment 10

[Tobi Reif]

> Chances are, there's a GC that happens there or something...

How can we find out?

For example in

https://bug1188318.bmoattachments.org/attachment.cgi?id=8639897

there's nothing listed for the ~zero FPS phase; the horizontal top bar containing the orange/red blocks is ~empty during the selected phase/region.

In

https://bug1188318.bmoattachments.org/attachment.cgi?id=8639817
https://bug1188318.bmoattachments.org/attachment.cgi?id=8639816
https://bug1188318.bmoattachments.org/attachment.cgi?id=8639815

there doesn't seem to be much red/GC in the selected/problematic region.

Thus it's hard for me to investigate whether & where there's anything I can improve in my code.

And so I don't know whether the issue can be resolved in my JS code, or in Firefox.

Comment 11

[Terrence Cole [:terrence]]

(In reply to Tobi Reif from comment #10)
> > Chances are, there's a GC that happens there or something...
> 
> How can we find out?

In about:config enable "javascript.options.mem.log", then open the browser console (typically Ctrl + Shift + J). In the browser console you should see information about every GC that happens including the pause length of the GC event and a list of times for various phases of GC. If you can find a particular GC event that is regularly janking the animation and paste that line, it would be very helpful!

> For example in
> 
> https://bug1188318.bmoattachments.org/attachment.cgi?id=8639897
> 
> there's nothing listed for the ~zero FPS phase; the horizontal top bar
> containing the orange/red blocks is ~empty during the selected phase/region.
> 
> In
> 
> https://bug1188318.bmoattachments.org/attachment.cgi?id=8639817
> https://bug1188318.bmoattachments.org/attachment.cgi?id=8639816
> https://bug1188318.bmoattachments.org/attachment.cgi?id=8639815
> 
> there doesn't seem to be much red/GC in the selected/problematic region.

Then it is probably not GC related. Still a good idea to check though as I've sometimes seen the profiler just miss some big GC pauses.

> Thus it's hard for me to investigate whether & where there's anything I can
> improve in my code.
> 
> And so I don't know whether the issue can be resolved in my JS code, or in
> Firefox.

If it is GC releated, there are some new memory analysis devtools that might help.

Comment 12

[Tobi Reif]

In about:config I set "javascript.options.mem.log" to true, opened FF's console (on Mac alt-cmd-k), reproduced the animation interruption - no output in the console. Any idea?

> If it is GC releated, there are some new memory analysis devtools that might help.

How to access/use them? Are they in the latest table FF?

Comment 13

[Terrence Cole [:terrence]]

(In reply to Tobi Reif from comment #12)
> In about:config I set "javascript.options.mem.log" to true, opened FF's
> console (on Mac alt-cmd-k), reproduced the animation interruption - no
> output in the console. Any idea?

It seems the pause is not GC related after all.

> > If it is GC releated, there are some new memory analysis devtools that might help.
> 
> How to access/use them? Are they in the latest table FF?

I think what you probably need at this point is the developer profiler addon so we can get some C++ stacks to see what's to blame at the platform level.

https://developer.mozilla.org/en-US/docs/Mozilla/Performance/Profiling_with_the_Built-in_Profiler

Comment 14

[Tobi Reif]

I'll try
https://developer.mozilla.org/en-US/docs/Performance/Reporting_a_Performance_Problem ,
I hope that's what you suggested.

Comment 15

[Tobi Reif]

I can't install
https://github.com/bgirard/Gecko-Profiler-Addon/raw/master/geckoprofiler.xpi ,
Nightly says
"This add-on could not be installed because it has not been verified."

I reported the issue at
https://github.com/bgirard/Gecko-Profiler-Addon/issues/94

Comment 16

[Till Schneidereit [:till]]

(In reply to Tobi Reif from comment #15)
> I can't install
> https://github.com/bgirard/Gecko-Profiler-Addon/raw/master/geckoprofiler.xpi
> ,
> Nightly says
> "This add-on could not be installed because it has not been verified."

You can work around that by going to about:config and setting the xpinstall.signatures.required setting to false. Please make sure to only do this in a testing profile, though, as it disables new security checks against malicious addons. (It's also not possible to apply this setting in Firefox release or beta versions.)

Comment 17

[Tobi Reif]

Thanks for the suggestion.

I had posted this at the GitHub page of the add-on:
https://github.com/bgirard/Gecko-Profiler-Addon/issues/94
"There seems to be a workaround but I'd rather have an XPI that can be installed in a straightforward and secure way."

Is it just a matter of the author signing the XPI?

Comment 18

[Till Schneidereit [:till]]

(In reply to Tobi Reif from comment #17)
> Is it just a matter of the author signing the XPI?

No, the addon has to be uploaded to addons.mozilla.org, at which point it is run through an automated review and then signed. See https://wiki.mozilla.org/Addons/Extension_Signing for details.

Depending on how much experimenting you're going to do, it might make sense to have a dedicated profile for that in which you disable this check: I think at least for a while it will be somewhat common to encounter unsigned addons that target developers instead of a more general audience.

Comment 19

[Tobi Reif]

https://wiki.mozilla.org/Addons/Extension_Signing
"The [...] Nightly versions of Firefox will have a setting to disable signature checks [...] so that add-on developers can work on their add-ons without having to sign every build."

I'll install it.

Comment 20

[Tobi Reif]

Installed the add-on (in Nightly), tried several times to reproduce the issue, no luck.

Set "xpinstall.signatures.required" to true (this disabled ~all add-ons incl the profiling add-on), tried to reproduce the issue - success (but no profile active).

Set "xpinstall.signatures.required" to false again, couldn't reproduce the issue.

Created a fresh profile, installed the add-on, set xpinstall.signatures.required to true. This disabled the add-on (geckoprofiler). Reproduce the issue.
Set xpinstall.signatures.required to false, successfully reproduced the issue (after a few tries IIRC), shared the profiling data -> http://people.mozilla.org/~bgirard/cleopatra/ .

The profiling data should be at
http://people.mozilla.org/~bgirard/cleopatra/#report=e47367f9c9219a25beb4ceba16cb0e6387f8ac54 .

HTH

(In order to verify the latter URL, I had then entered it (in Chrome) - instead of just showing the data, the page started to run something - I hope that didn't overwrite/damage the profiling data I had uploaded. In that case please let me know and I'll try to generated and upload fresh data.)

Comment 21

[Tobi Reif]

The most time during the animation hiccup might be spent in "mach_msg_trap":"libsystem_kernel.dylib".

Should I report the issue to Apple? (I'dd add the profiling data link.)

(But please check out the profiling data yourself in any case - I'm not sure whether I investigated in the right time reqion of the data.)

Comment 22

[Tobi Reif]

The latest/finished version of my demo (old URL http://tobireif.com/non_site_stuff/unfinished_pixijs_demo_copy_for_bug_report/ )  is at https://tobireif.com/demos/swirls/ .

Comment 23

[Matthew Gaudet (he/him) [:mgaudet]]

This seems to be working good now...