732108 - SVG Declarative animations aren't smooth and use high CPU due to too much invalidation

Status: RESOLVED FIXED

(Core :: SVG, defect)

Description

[Jeremie Patonnier :Jeremie]

This bug is a follow up of bug 722090

There is performance issue with declarative animation. This is easily seen with long animations on huge SVG files.

The link I provided is a demo I made which is a 3 min long animation in a 1.5Mo file. Most of the drawing were made with Adobe Illustrator and is not optimized at all which figures what Web designers can do in a real case scenario.

As you can see, the animation does not run smoothly.

As Brian point it out on bug 722090 it seams there is some ways to improve that :)

Comment 1

[Daniel Holbert [:dholbert]]

(In reply to Jeremie Patonnier from comment #0)
> As you can see, the animation does not run smoothly.

Can you be more specific?  e.g. is the initial opacity animation ("once upon a time") choppy? Or is the choppiness generally when a figure is being smoothly slid across the screen with animateTransform?  Or something else?

FWIW, it runs quite smoothly on my (admittedly powerful) desktop machine. :)  I do see a few occasional stutters, but those could be GC pauses for all I know (and hence not SVG/SMIL-specific).

Comment 2

[Brian Birtles (:birtles, Feb 26~ parental leave)]

(In reply to Daniel Holbert [:dholbert] from comment #1)
> FWIW, it runs quite smoothly on my (admittedly powerful) desktop machine. :)
> I do see a few occasional stutters, but those could be GC pauses for all I
> know (and hence not SVG/SMIL-specific).

Yeah, it's also very smooth for me on my (also quite powerful) laptop. I'm not seeing any stutters. Feel free to narrow this bug down to specific issues you're seeing.

I've filed bug 732323 as a tracking bug for performance in SVG declarative animation and listed some ideas there about things we could try.

Comment 3

[Jeremie Patonnier :Jeremie]

(In reply to Brian Birtles (:birtles) from comment #2)
> Feel free to narrow this bug down to specific issues you're seeing.

So be it ;)

In this demo there is 2 kind of issue :

 - Typo that are shivering (but this is bug 684041 I already filled)
 - choppy moves when animating translation (especially with the SVG characters the first time he appears and just before the light saber fight... is this some kind of a fate?)

Because I did this demo in a really short time, all animations are linear, it means that you should never see any choppiness, acceleration or slow down during the animations. At that time, I can see small "freeze" (of a few milliseconds). I aggree, it's barely visible but you can "feel" there is something ode.

About your awesomely fast laptop, I use a MacBook Pro (early 2011) with 8Go RAM, a Core i7 and an SSD (still with Snow Leopard). It's not a "small" machine and I can see all I describe.
We are talking about performance which means that we are also talking about feelings. It's not something really easy to narrow to specific use cases. However, if you use Opera to compare with Firefox, you'll see that this animation run far more smoothly (even if I admit there is rendering bugs with Opera)

Comment 4

[Brian Birtles (:birtles, Feb 26~ parental leave)]

(In reply to Jeremie Patonnier from comment #3)
>  - Typo that are shivering (but this is bug 684041 I already filled)
>  - choppy moves when animating translation (especially with the SVG
> characters the first time he appears and just before the light saber
> fight... is this some kind of a fate?)

I think this is a Mac-specific performance issue as I'm not seeing any of the symptoms you describe despite being on similar hardware (but Win 7). When running an animation workshop recently (http://parapara.mozlabs.jp/MozillaVision2012/) we noticed a significant difference in performance between Mac and Windows.

I'm pretty sure Daniel will have checked on Linux and the only perf issues he seems to have encountered are likely gc pauses.

It would be helpful if someone else can confirm this issue on Mac.

Ultimately I suspect the root causes here is graphics performance on Mac which *may* be helped by switching to Azure (bug 703159).

Comment 5

[Daniel Holbert [:dholbert]]

(In reply to Brian Birtles (:birtles) from comment #4)
> I'm pretty sure Daniel will have checked on Linux and the only perf issues
> he seems to have encountered are likely gc pauses.

(yup -- I was using Linux in comment 1, and the rare stutters that I hti did smell like GC)

Comment 6

[Jeremie Patonnier :Jeremie]

Just to mention, I use a MacBook Pro 13'' (with an INTEL HD 3000 gpu, not an AMD gpu)

I think we should use Opera as a perf reference on SVG declarative animations so I take the initiative to add [parity-opera] to the whiteboard.

Comment 7

[Anthony Ricaud (:rik)]

I'm on a Macbook Pro 13" with a NVIDIA 320M and I can confirm this.

Comment 8

[Jonathan Watt [:jwatt]]

I'm not totally sure, but I think bug 766429 may have helped a bit here.

Comment 9

[Jonathan Watt [:jwatt]]

We're doing a lot more invalidation than we should be doing. Bug 839865 and bug 869611 have recently helped reduce the invalidation a lot. 

Fixing bug 854765 would stop the continuous invalidation when the opacity is animating.

Comment 10

[Jonathan Watt [:jwatt]]

I'm going to call this fixed (by the blocking bugs that I fixed). Performance now seems smooth (and as good as Chrome), and there is minimal invalidation (except for a known text issue).