WebKit Bugzilla
New
Browse
Log In
×
Sign in with GitHub
or
Remember my login
Create Account
·
Forgot Password
Forgotten password account recovery
NEW
219751
Efficient low frequency animations
https://bugs.webkit.org/show_bug.cgi?id=219751
Summary
Efficient low frequency animations
Jake Archibald
Reported
2020-12-10 11:44:26 PST
I did some research on how efficient browsers are at animations where not-a-lot happens.
https://static-misc-2.glitch.me/low-freq-anims/
I played with the above while monitoring the task manager. The "High frequency animation" shows how much CPU is used on a 60hz (or whatever display frequency) animation. "setTimeout" shows how much CPU is used for a setTimeout-driven animation that updates every 5 seconds. This uses almost no CPU. The rest are CSS/web animations that update infrequently. I'm _really_ impressed with how Safari handles these cases, but there are some opportunities for optimisation. In the following tests: - Discrete values - Mostly same values - Empty animation …Safari seems to use more CPU than necessary, as if it's running a 60hz timer internally. Related Chrome issue:
https://bugs.chromium.org/p/chromium/issues/detail?id=1157483
Attachments
Add attachment
proposed patch, testcase, etc.
Simon Fraser (smfr)
Comment 1
2020-12-10 16:26:57 PST
Thanks for the info. Our long-term objective is web-exposed API that allows devs to express what frame rate their animation needs.
Jake Archibald
Comment 2
2020-12-10 23:06:01 PST
Yeah, I think we need that too. I made some notes here
https://github.com/whatwg/html/issues/5025
- seems important to allow multiple animations to exist on the same reduced frame rate timeline. I know you've thought about this more than me though, any API ideas? However, I think the unoptimised cases in this test are still worth fixing. Discrete - although a fixed frame rate would work here, it's already expressed in the animation keyframes. Mostly same values - this can't be fixed by a reduced frame rate. I've used this style of animation for a "recording" indicator. Like, a red circle that briefly fades from opacity 0.6 to 1, then back to 0.6, then stays at 0.6 for a few seconds. The fading should be high frequency, but the browser shouldn't run a high frequency timer while values aren't changing. Empty animation - this is an alternative to setTimeout but works with the document timeline timer, and doesn't tick when the document is hidden. I guess you could define this as a 0fps animation? But again this can be inferred.
Radar WebKit Bug Importer
Comment 3
2020-12-15 18:10:23 PST
<
rdar://problem/72366315
>
Antoine Quint
Comment 4
2020-12-16 04:30:45 PST
I had actually already planned to deal with discrete values, I'm still in the middle of implementing some remaining CSS properties for discrete animations. Mostly same values… that'll require a bit more thinking. Empty animations: that one's easy and I'll file a dedicated bug for this. Note that for steps() we have dedicated logic already.
Note
You need to
log in
before you can comment on or make changes to this bug.
Top of Page
Format For Printing
XML
Clone This Bug