Bug 146345 – Make JS & SVG animation faster

• Component: SVG
• Status: NEW

[Tobi Reif]

In my current project I animate SVG using JS (JS animation crystallized as the best option). I do ".setAttribute("transform", ...)" or ".setAttribute("x", ...)" (in a requestAnimationFrame loop) to move hundreds of small images fast across the screen (also rotation and alpha).

There might be room for improvement regarding performance; perhaps WebKit/Safari could do as much as possible in the GPU.

[Tobi Reif]

... and perhaps there are additional options for making JS-animated SVG perform really well (e.g. as fast as PixiJS).

[Tobi Reif]

1) Something like Mozilla Servo might be useful as inspiration.

2) Here's a test case:

https://twitter.com/TobiReif/status/725611064973479936
https://twitter.com/TobiReif/status/725611198847311874

[Simon Fraser (smfr)]

Test at http://codepen.io/TobiReif/pen/15e6a50df654f594ff2f845d0c649397

[Simon Fraser (smfr)]

Some brief profiling shows:

32% under WebCore painting, mostly in ellipse filling
20% under layout, most of which is computing repaint rects
6.5% under Element::setAttribute(), mostly in parsing

[Tobi Reif]

I hope the performance of WebKit regarding eg
https://tobireif.com/non_site_stuff/svg_perf_tests/animated-dots-in-svg/
can be improved.

[Simon Fraser (smfr)]

https://tobireif.com/non_site_stuff/svg_perf_tests/animated-dots-in-svg/ gets 60fps on an old MacBook Air. Seems reasonable?

[Tobi Reif]

Sounds good! It is not 100.00% smooth to my eyes, but that's hard to measure.

Now on to a more challenging JS & SVG animation 😀

Please check out Safari's perf regarding
https://tobireif.com/non_site_stuff/just-a-perf-test-animated-fork-of-my-snake-pattern-in-svg/

Please also see the screenshot "screenshot_of_animated_snake_pattern_plus_timeline.png" of that demo being measured in Safari Version 11.0 (12604.1.38.1.7).

I hope that WebKit can be improved to run this animation (and other demanding SVG & JS animations) smoothly.

[Tobi Reif]

Created attachment 324214 [details]
Screenshot of https://tobireif.com/non_site_stuff/just-a-perf-test-animated-fork-of-my-snake-pattern-in-svg/ in Safari 11.0 (12604.1.38.1.7) plus timeline.

[Simon Fraser (smfr)]

I get 60fps on https://tobireif.com/non_site_stuff/just-a-perf-test-animated-fork-of-my-snake-pattern-in-svg/ on a Mac Pro.

The slowest part is running the script which is modifying SVG attributes (about 14ms per frame). Painting only takes about 3-4ms.

[Tobi Reif]

I'm on a Mid 2015 MacBook Pro, and the visual performance of that animation in Safari is not completely & constantly smooth.

Also see the dev tools screenshot https://bug-146345-attachments.webkit.org/attachment.cgi?id=324214 .

It would be important to test the animation on an iPhone as well, perhaps you could do that?
In the meantime here's a video created using CrossBrowserTesting:
https://app.crossbrowsertesting.com/public/ib8393c20a124bac/livetests/9488261/videos/z2cc3f514d58872ec6b8

You wrote:
"The slowest part is running the script which is modifying SVG attributes (about 14ms per frame)."

The animation uses GSAP TweenMax, I hope that code is fast.

Perhaps running the JS which is modifying SVG attributes could be done faster by WebKit?

[Simon Fraser (smfr)]

(In reply to Tobi Reif from comment #10)
> The animation uses GSAP TweenMax, I hope that code is fast.

That part you could profile yourself by looking at the JS profile in the web inspector.

[Tobi Reif]

This is the complete animation code from
https://tobireif.com/non_site_stuff/just-a-perf-test-animated-fork-of-my-snake-pattern-in-svg/ :

function stagger() {
  var distance = 70;
  TweenMax.staggerFromTo(
    "use",
    0.5,
    {y: -distance},
    {
      y: distance,
      ease: Sine.easeInOut,
      yoyo: true,
      repeat: -1
    },
    0.001
  );
}

I wish I had the time to profile GSAP TweenMax and see whether their code could be made faster. But I'll have to leave that up to them (the commercial vendor Greensoock https://greensock.com/club ).

GSAP is "the industry standard". Mmany people and companies use GSAP, it's very popular.

So it would sure be worth the effort to investigate whether WebKit can run GSAP TweenMax (used with SVG eg as above) faster. If the improvements are general they will potentially benefit all JS-SVG animations.

"The slowest part is running the script which is modifying SVG attributes (about 14ms per frame)" - I hope that this duration can be improved significantly.

[Tobi Reif]

Also, Safari uses ~80% CPU (on a MacBook Pro "Retina, 15-inch, Mid 2015" == 2.5 years old). It seems Safari should instead use the GPU (for as much as possible).

[Tobi Reif]

Created attachment 328561 [details]
Safari FPS timeline for https://tobireif.com/non_site_stuff/just-a-perf-test-animated-fork-of-my-snake-pattern-in-svg/

[Tobi Reif]

On a MacBook Pro "Retina, 15-inch, Mid 2015" (== 2.5 years old), Safari's dev tools show a framerate timeline way below 60 FPS, please see the attached screenshot "screenshot_safari_fps.png".

I hope you can ensure 100% smooth animation.

[Simon Fraser (smfr)]

Safari is using the GPU for rendering, but there's a lot of CPU work that also has to happen.

[Tobi Reif]

I see, thanks for the info!

I hope you can ensure smooth animation / 60 FPS

https://bug-146345-attachments.webkit.org/attachment.cgi?id=328561

no matter how 😀

[Radar WebKit Bug Importer]

<rdar://problem/35920576>

[Tobi Reif]

This demo
https://tobireif.com/non_site_stuff/just-a-perf-test-animated-fork-of-my-snake-pattern-in-svg/
doesn't run smoothly in Safari. I hope this can get fixed soon.

[Simon Fraser (smfr)]

(In reply to Tobi Reif from comment #19)
> This demo
> https://tobireif.com/non_site_stuff/just-a-perf-test-animated-fork-of-my-
> snake-pattern-in-svg/
> doesn't run smoothly in Safari. I hope this can get fixed soon.

On what OS/hardware configuration?

[Tobi Reif]

> On what OS/hardware configuration?

MacOS 11.4 (20F71)

MacBook Pro (16-inch, 2019)
2,6 GHz 6-Core Intel Core i7
32 GB 2667 MHz DDR4
AMD Radeon Pro 5300M 4 GB
Intel UHD Graphics 630 1536 MB

[Tobi Reif]

Created attachment 433307 [details]
Framerate in Safari of https://tobireif.com/non_site_stuff/just-a-perf-test-animated-fork-of-my-snake-pattern-in-svg/

Except for the first single bar in the screenshot, the framerate is consistently below 60 fps. It seems to be around 40 fps. It would be great if it would always be at or above 60 fps.

[Tobi Reif]

The animations
https://tobireif.com/non_site_stuff/just-a-perf-test-animated-fork-of-my-snake-pattern-in-svg/
and
https://tobireif.com/non_site_stuff/svg_perf_tests/animated-dots-in-svg/
now seem to run quite smoothly.

Yay! Thanks!

I tested on a MacBook Pro (16-inch, 2019, 2,6 GHz 6-Core Intel Core i7, 32 GB 2667 MHz DDR4, AMD Radeon Pro 5300M 4 GB, Intel UHD Graphics 630 1536 MB, MacOS 12.6) (Safari 16.0 (17614.1.25.9.10, 17614)).