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.
... and perhaps there are additional options for making JS-animated SVG perform really well (e.g. as fast as PixiJS).
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
Test at http://codepen.io/TobiReif/pen/15e6a50df654f594ff2f845d0c649397
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
I hope the performance of WebKit regarding eg https://tobireif.com/non_site_stuff/svg_perf_tests/animated-dots-in-svg/ can be improved.
https://tobireif.com/non_site_stuff/svg_perf_tests/animated-dots-in-svg/ gets 60fps on an old MacBook Air. Seems reasonable?
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.
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.
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.
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?
(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.
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.
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).
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/
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.
Safari is using the GPU for rendering, but there's a lot of CPU work that also has to happen.
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 😀
<rdar://problem/35920576>
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.
(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?
> 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
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.
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)).