Skip to content

[CSSTransition] Do not list up all properties for transition: all#18054

Merged
webkit-commit-queue merged 1 commit intoWebKit:mainfrom
Constellation:eng/CSSTransition-Do-not-list-up-all-properties-when-possible-with-transition-all
Sep 25, 2023
Merged

[CSSTransition] Do not list up all properties for transition: all#18054
webkit-commit-queue merged 1 commit intoWebKit:mainfrom
Constellation:eng/CSSTransition-Do-not-list-up-all-properties-when-possible-with-transition-all

Conversation

@Constellation
Copy link
Member

@Constellation Constellation commented Sep 21, 2023

66eb8a0

[CSSTransition] Do not list up all properties for transition: all
https://bugs.webkit.org/show_bug.cgi?id=261917
rdar://115861030

Reviewed by Antti Koivisto.

When `transition: all ...` CSS rule is applied, we end up listing all animatable properties.
This is incredibly costly since there are so many CSS properties. And all properties are queried,
checked equality via very slow virtual function. Many hash table lookups etc.
We found that we are using massive amount of time in this transitioning in Speedometer3/NewsSite-Next / NewsSite-Nuxt.

But in almost all cases, almost all properties are not related at all.

In this patch, we do RenderStyle comparison and collect all affected CSS properties candidate which needs to be visited in
updateCSSTransitions. We can conservatively say "this property needs to be visited". But if we know that this
is totally equal, then we can skip that.

We cannot use RenderStyle::diff for this purpose. It is highly tailored to rendering purpose. And a lof of
properties changes are not reported when it is unrelated to layout (but it is necessary for updateCSSTransitions).
Example is `top` / `left`. So instead, we have more tailored path collecting necessary properties in this patch.

With this patch, we always collect all possible affected properties. So we no longer need to list up all animatable properties.
It results in 0.7% progression in Speedometer3.

* Source/WebCore/dom/Element.cpp:
(WebCore::Element::hasAnimations const):
* Source/WebCore/dom/Element.h:
* Source/WebCore/dom/ElementRareData.h:
(WebCore::ElementRareData::hasAnimations const):
* Source/WebCore/style/Styleable.cpp:
(WebCore::Styleable::updateCSSTransitions const):

Canonical link: https://commits.webkit.org/268412@main

a6f45ad

Misc iOS, tvOS & watchOS macOS Linux Windows
✅ 🧪 style ✅ 🛠 ios ✅ 🛠 mac ✅ 🛠 wpe ✅ 🛠 wincairo
✅ 🧪 bindings ✅ 🛠 ios-sim ✅ 🛠 mac-AS-debug ⏳ 🧪 wpe-wk2
✅ 🧪 webkitperl ✅ 🧪 ios-wk2 ✅ 🧪 api-mac ✅ 🛠 gtk
⏳ 🧪 ios-wk2-wpt ✅ 🧪 mac-wk1 ✅ 🧪 gtk-wk2
✅ 🧪 api-ios ✅ 🧪 mac-wk2 ✅ 🧪 api-gtk
✅ 🛠 tv ✅ 🧪 mac-AS-debug-wk2
✅ 🛠 tv-sim
✅ 🛠 watch
✅ 🛠 🧪 unsafe-merge ✅ 🛠 watch-sim

@Constellation Constellation self-assigned this Sep 21, 2023
@Constellation Constellation added the Animations Bugs related to CSS + SVG animations and transitions label Sep 21, 2023
Copy link
Contributor

@cdumez cdumez left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not familiar enough with this code to know if this change is OK.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: could be a one liner:
return hasRareData() && elementRareData()->hasAnimations()

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

{ } shouldn't be needed.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed.

@cdumez cdumez requested review from anttijk, graouts and grorg September 21, 2023 23:47
@webkit-ews-buildbot webkit-ews-buildbot added the merging-blocked Applied to prevent a change from being merged label Sep 22, 2023
@Constellation Constellation removed the merging-blocked Applied to prevent a change from being merged label Sep 22, 2023
@Constellation Constellation force-pushed the eng/CSSTransition-Do-not-list-up-all-properties-when-possible-with-transition-all branch from 793a450 to 0ac729e Compare September 22, 2023 07:00
@Constellation Constellation marked this pull request as draft September 22, 2023 07:26
@Constellation
Copy link
Member Author

Still testing.

@Constellation Constellation force-pushed the eng/CSSTransition-Do-not-list-up-all-properties-when-possible-with-transition-all branch from 0ac729e to c9ad8e4 Compare September 22, 2023 07:37
@Constellation Constellation force-pushed the eng/CSSTransition-Do-not-list-up-all-properties-when-possible-with-transition-all branch from c9ad8e4 to ed190dd Compare September 22, 2023 08:34
@Constellation Constellation force-pushed the eng/CSSTransition-Do-not-list-up-all-properties-when-possible-with-transition-all branch from ed190dd to 6e9008f Compare September 22, 2023 08:40
@Constellation Constellation force-pushed the eng/CSSTransition-Do-not-list-up-all-properties-when-possible-with-transition-all branch from 6e9008f to fc23ce9 Compare September 22, 2023 10:05
@Constellation
Copy link
Member Author

I should add transition specific property collector like RenderStyle::diff. And also set KeyframeEffect. So then we can filter out affected ones.

@webkit-ews-buildbot webkit-ews-buildbot added the merging-blocked Applied to prevent a change from being merged label Sep 22, 2023
@Constellation Constellation removed the merging-blocked Applied to prevent a change from being merged label Sep 22, 2023
@Constellation Constellation force-pushed the eng/CSSTransition-Do-not-list-up-all-properties-when-possible-with-transition-all branch from fc23ce9 to c44d5bf Compare September 22, 2023 18:25
@Constellation Constellation removed the merging-blocked Applied to prevent a change from being merged label Sep 25, 2023
@Constellation Constellation force-pushed the eng/CSSTransition-Do-not-list-up-all-properties-when-possible-with-transition-all branch from 7253507 to 2cc1a97 Compare September 25, 2023 06:15
@Constellation Constellation force-pushed the eng/CSSTransition-Do-not-list-up-all-properties-when-possible-with-transition-all branch from 2cc1a97 to 8298c9b Compare September 25, 2023 06:19
@Constellation Constellation force-pushed the eng/CSSTransition-Do-not-list-up-all-properties-when-possible-with-transition-all branch from 8298c9b to 4ac71ae Compare September 25, 2023 06:39
@Constellation Constellation changed the title [CSSTransition] Do not list up all properties when possible with transition: all [CSSTransition] Do not list up all properties for transition: all Sep 25, 2023
@Constellation Constellation force-pushed the eng/CSSTransition-Do-not-list-up-all-properties-when-possible-with-transition-all branch from 4ac71ae to 44e015f Compare September 25, 2023 06:41
@Constellation Constellation force-pushed the eng/CSSTransition-Do-not-list-up-all-properties-when-possible-with-transition-all branch from 44e015f to 088b81b Compare September 25, 2023 07:06
Comment on lines 75 to 77
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does this really need a class (struct?) rather than using CSSPropertiesBitSet = WTF::BitSet<numCSSProperties>?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The reason of this is not adding CSSPropertyNames.h dependency from RenderStyle.h, since numCSSProperties is defined in that header.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

numCSSProperties could be generated to a header of its own.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please at least make this a struct and use struct style member naming (withou m_ prefix).

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks, I've changed it to struct for now.

Comment on lines 1427 to 1429
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

How does it answer the first question negatively? What happens then?

This really does seem like something that should be autogenerated from CSSProperties.json. It will be difficult to keep it up to date when new properties are added.

Copy link
Member Author

@Constellation Constellation Sep 25, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Now, this patch covers all the cases, and removed the fast path. So (1) should be removed, it is always handled in this code.

This really does seem like something that should be autogenerated from CSSProperties.json. It will be difficult to keep it up to date when new properties are added.

It is ideal. But right now, we do not have a mechanism to generate data structures, and RenderStyle::diff is also not doing it. So for now, this patch is aligning the approach to RenderStyle::diff. When introducing a mechanism to solve RenderStyle::diff etc. too, this probably can be organized in the same way.

Copy link
Contributor

@anttijk anttijk Sep 25, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Affected how? I think this is more like collectChangedProperties or conservativelyCollectChangedProperties

But I suppose this currently limited to animatable properties so conservativelyCollectChangedAnimatableProperties or something.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sounds good. Changed it to conservativelyCollectChangedAnimatableProperties.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As far as I can tell any missing property here will just fail to animate?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, for transition all case.

@Constellation Constellation force-pushed the eng/CSSTransition-Do-not-list-up-all-properties-when-possible-with-transition-all branch from 088b81b to e8ac477 Compare September 25, 2023 16:06
@Constellation Constellation force-pushed the eng/CSSTransition-Do-not-list-up-all-properties-when-possible-with-transition-all branch from e8ac477 to 3e52d82 Compare September 25, 2023 16:36
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

please add a FIXME about autogenerating all this.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Added.

@Constellation Constellation force-pushed the eng/CSSTransition-Do-not-list-up-all-properties-when-possible-with-transition-all branch from 3e52d82 to d68e508 Compare September 25, 2023 16:39
@Constellation Constellation force-pushed the eng/CSSTransition-Do-not-list-up-all-properties-when-possible-with-transition-all branch from d68e508 to a6f45ad Compare September 25, 2023 16:42
@Constellation Constellation added the unsafe-merge-queue Applied to send a pull request to merge-queue, but skip building and testing label Sep 25, 2023
https://bugs.webkit.org/show_bug.cgi?id=261917
rdar://115861030

Reviewed by Antti Koivisto.

When `transition: all ...` CSS rule is applied, we end up listing all animatable properties.
This is incredibly costly since there are so many CSS properties. And all properties are queried,
checked equality via very slow virtual function. Many hash table lookups etc.
We found that we are using massive amount of time in this transitioning in Speedometer3/NewsSite-Next / NewsSite-Nuxt.

But in almost all cases, almost all properties are not related at all.

In this patch, we do RenderStyle comparison and collect all affected CSS properties candidate which needs to be visited in
updateCSSTransitions. We can conservatively say "this property needs to be visited". But if we know that this
is totally equal, then we can skip that.

We cannot use RenderStyle::diff for this purpose. It is highly tailored to rendering purpose. And a lof of
properties changes are not reported when it is unrelated to layout (but it is necessary for updateCSSTransitions).
Example is `top` / `left`. So instead, we have more tailored path collecting necessary properties in this patch.

With this patch, we always collect all possible affected properties. So we no longer need to list up all animatable properties.
It results in 0.7% progression in Speedometer3.

* Source/WebCore/dom/Element.cpp:
(WebCore::Element::hasAnimations const):
* Source/WebCore/dom/Element.h:
* Source/WebCore/dom/ElementRareData.h:
(WebCore::ElementRareData::hasAnimations const):
* Source/WebCore/style/Styleable.cpp:
(WebCore::Styleable::updateCSSTransitions const):

Canonical link: https://commits.webkit.org/268412@main
@webkit-commit-queue webkit-commit-queue force-pushed the eng/CSSTransition-Do-not-list-up-all-properties-when-possible-with-transition-all branch from a6f45ad to 66eb8a0 Compare September 25, 2023 21:42
@webkit-commit-queue
Copy link
Collaborator

Committed 268412@main (66eb8a0): https://commits.webkit.org/268412@main

Reviewed commits have been landed. Closing PR #18054 and removing active labels.

@webkit-commit-queue webkit-commit-queue merged commit 66eb8a0 into WebKit:main Sep 25, 2023
@webkit-commit-queue webkit-commit-queue removed the unsafe-merge-queue Applied to send a pull request to merge-queue, but skip building and testing label Sep 25, 2023
@Constellation Constellation deleted the eng/CSSTransition-Do-not-list-up-all-properties-when-possible-with-transition-all branch September 26, 2023 01:35
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Animations Bugs related to CSS + SVG animations and transitions

Projects

None yet

Development

Successfully merging this pull request may close these issues.

6 participants