Bug 146345 - Make JS & SVG animation faster
Summary: Make JS & SVG animation faster
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: SVG (show other bugs)
Version: 528+ (Nightly build)
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
URL: http://codepen.io/TobiReif/pen/15e6a5...
Keywords: InRadar
Depends on:
Reported: 2015-06-26 06:06 PDT by Tobi Reif
Modified: 2017-12-07 15:08 PST (History)
4 users (show)

See Also:

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. plus timeline. (680.87 KB, image/png)
2017-10-19 02:47 PDT, Tobi Reif
no flags Details
Safari FPS timeline for https://tobireif.com/non_site_stuff/just-a-perf-test-animated-fork-of-my-snake-pattern-in-svg/ (771.97 KB, image/png)
2017-12-06 02:22 PST, Tobi Reif
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Tobi Reif 2015-06-26 06:06:34 PDT
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.
Comment 1 Tobi Reif 2016-02-16 04:22:17 PST
... and perhaps there are additional options for making JS-animated SVG perform really well (e.g. as fast as PixiJS).
Comment 2 Tobi Reif 2016-05-10 02:28:27 PDT
1) Something like Mozilla Servo might be useful as inspiration.

2) Here's a test case:

Comment 3 Simon Fraser (smfr) 2016-05-10 13:42:59 PDT
Test at http://codepen.io/TobiReif/pen/15e6a50df654f594ff2f845d0c649397
Comment 4 Simon Fraser (smfr) 2016-05-10 13:47:59 PDT
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
Comment 5 Tobi Reif 2017-10-17 04:14:00 PDT
I hope the performance of WebKit regarding eg
can be improved.
Comment 6 Simon Fraser (smfr) 2017-10-17 08:30:33 PDT
https://tobireif.com/non_site_stuff/svg_perf_tests/animated-dots-in-svg/ gets 60fps on an old MacBook Air. Seems reasonable?
Comment 7 Tobi Reif 2017-10-19 02:45:09 PDT
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

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

I hope that WebKit can be improved to run this animation (and other demanding SVG & JS animations) smoothly.
Comment 8 Tobi Reif 2017-10-19 02:47:25 PDT
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. plus timeline.
Comment 9 Simon Fraser (smfr) 2017-10-31 13:14:53 PDT
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.
Comment 10 Tobi Reif 2017-11-02 02:01:03 PDT
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:

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?
Comment 11 Simon Fraser (smfr) 2017-11-02 08:24:21 PDT
(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.
Comment 12 Tobi Reif 2017-11-05 01:36:13 PST
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;
    {y: -distance},
      y: distance,
      ease: Sine.easeInOut,
      yoyo: true,
      repeat: -1

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.
Comment 13 Tobi Reif 2017-12-06 02:17:35 PST
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).
Comment 15 Tobi Reif 2017-12-06 02:24:10 PST
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.
Comment 16 Simon Fraser (smfr) 2017-12-06 10:06:51 PST
Safari is using the GPU for rendering, but there's a lot of CPU work that also has to happen.
Comment 17 Tobi Reif 2017-12-07 01:57:17 PST
I see, thanks for the info!

I hope you can ensure smooth animation / 60 FPS


no matter how 😀
Comment 18 Radar WebKit Bug Importer 2017-12-07 15:08:04 PST