LibWeb: Use invalidation sets to reduce style recalculation

Implements idea described in
https://docs.google.com/document/d/1vEW86DaeVs4uQzNFI5R-_xS9TcS1Cs_EUsHRSgCHGu8

Invalidation sets are used to reduce the number of elements marked for
style recalculation by collecting metadata from style rules about the
dependencies between properties that could affect an element’s style.

Currently, this optimization is only applied to style invalidation
triggered by class list mutations on an element.

Author: kalenikaliaksandr

Libraries/LibWeb/CMakeLists.txt

@@ -82,6 +82,7 @@ set(SOURCES
     CSS/GridTrackPlacement.cpp
     CSS/GridTrackSize.cpp
     CSS/Interpolation.cpp
+    CSS/InvalidationSet.cpp
     CSS/Length.cpp
     CSS/LengthBox.cpp
     CSS/MediaList.cpp
@@ -116,6 +117,7 @@ set(SOURCES
     CSS/Sizing.cpp
     CSS/StyleComputer.cpp
     CSS/StyleInvalidation.cpp
+    CSS/StyleInvalidationData.cpp
     CSS/StyleProperty.cpp
     CSS/StyleSheet.cpp
     CSS/StyleSheetIdentifier.cpp

Libraries/LibWeb/CSS/InvalidationSet.cpp

@@ -0,0 +1,90 @@
+/*
+ * Copyright (c) 2025, Aliaksandr Kalenik <kalenik.aliaksandr@gmail.com>
+ *
+ * SPDX-License-Identifier: BSD-2-Clause
+ */
+
+#include <LibWeb/CSS/InvalidationSet.h>
+
+namespace Web::CSS {
+
+void InvalidationSet::include_all_from(InvalidationSet const& other)
+{
+    m_needs_invalidate_self |= other.m_needs_invalidate_self;
+    m_needs_invalidate_whole_subtree |= other.m_needs_invalidate_whole_subtree;
+    for (auto const& property : other.m_properties)
+        m_properties.set(property);
+}
+
+bool InvalidationSet::is_empty() const
+{
+    return !m_needs_invalidate_self && !m_needs_invalidate_whole_subtree && m_properties.is_empty();
+}
+
+void InvalidationSet::for_each_property(Function<void(Property const&)> const& callback) const
+{
+    if (m_needs_invalidate_self)
+        callback({ Property::Type::InvalidateSelf });
+    if (m_needs_invalidate_whole_subtree)
+        callback({ Property::Type::InvalidateWholeSubtree });
+    for (auto const& property : m_properties)
+        callback(property);
+}
+
+}
+
+namespace AK {
+
+unsigned Traits<Web::CSS::InvalidationSet::Property>::hash(Web::CSS::InvalidationSet::Property const& invalidation_set_property)
+{
+    return pair_int_hash(to_underlying(invalidation_set_property.type), invalidation_set_property.name.hash());
+}
+
+ErrorOr<void> Formatter<Web::CSS::InvalidationSet::Property>::format(FormatBuilder& builder, Web::CSS::InvalidationSet::Property const& invalidation_set_property)
+{
+    switch (invalidation_set_property.type) {
+    case Web::CSS::InvalidationSet::Property::Type::InvalidateSelf: {
+        TRY(builder.put_string("$"sv));
+        return {};
+    }
+    case Web::CSS::InvalidationSet::Property::Type::Class: {
+        TRY(builder.put_string("."sv));
+        TRY(builder.put_string(invalidation_set_property.name));
+        return {};
+    }
+    case Web::CSS::InvalidationSet::Property::Type::Id: {
+        TRY(builder.put_string("#"sv));
+        TRY(builder.put_string(invalidation_set_property.name));
+        return {};
+    }
+    case Web::CSS::InvalidationSet::Property::Type::TagName: {
+        TRY(builder.put_string(invalidation_set_property.name));
+        return {};
+    }
+    case Web::CSS::InvalidationSet::Property::Type::Attribute: {
+        TRY(builder.put_string("["sv));
+        TRY(builder.put_string(invalidation_set_property.name));
+        TRY(builder.put_string("]"sv));
+        return {};
+    }
+    case Web::CSS::InvalidationSet::Property::Type::InvalidateWholeSubtree: {
+        TRY(builder.put_string("*"sv));
+        return {};
+    }
+    default:
+        VERIFY_NOT_REACHED();
+    }
+}
+
+ErrorOr<void> Formatter<Web::CSS::InvalidationSet>::format(FormatBuilder& builder, Web::CSS::InvalidationSet const& invalidation_set)
+{
+    bool first = true;
+    invalidation_set.for_each_property([&](auto const& property) {
+        if (!first)
+            builder.builder().append(", "sv);
+        builder.builder().appendff("{}", property);
+    });
+    return {};
+}
+
+}

Libraries/LibWeb/CSS/InvalidationSet.h

@@ -0,0 +1,77 @@
+/*
+ * Copyright (c) 2025, Aliaksandr Kalenik <kalenik.aliaksandr@gmail.com>
+ *
+ * SPDX-License-Identifier: BSD-2-Clause
+ */
+
+#pragma once
+
+#include <AK/FlyString.h>
+#include <AK/Format.h>
+#include <AK/Forward.h>
+#include <AK/HashTable.h>
+#include <AK/Traits.h>
+
+namespace Web::CSS {
+
+class InvalidationSet {
+public:
+    struct Property {
+        enum class Type : u8 {
+            InvalidateSelf,
+            InvalidateWholeSubtree,
+            Class,
+            Id,
+            TagName,
+            Attribute,
+        };
+
+        Type type;
+        FlyString name {};
+
+        bool operator==(Property const& other) const = default;
+    };
+
+    void include_all_from(InvalidationSet const& other);
+
+    bool needs_invalidate_self() const { return m_needs_invalidate_self; }
+    void set_needs_invalidate_self() { m_needs_invalidate_self = true; }
+
+    bool needs_invalidate_whole_subtree() const { return m_needs_invalidate_whole_subtree; }
+    void set_needs_invalidate_whole_subtree() { m_needs_invalidate_whole_subtree = true; }
+
+    void set_needs_invalidate_class(FlyString const& name) { m_properties.set({ Property::Type::Class, name }); }
+    void set_needs_invalidate_id(FlyString const& name) { m_properties.set({ Property::Type::Id, name }); }
+    void set_needs_invalidate_tag_name(FlyString const& name) { m_properties.set({ Property::Type::TagName, name }); }
+    void set_needs_invalidate_attribute(FlyString const& name) { m_properties.set({ Property::Type::Attribute, name }); }
+
+    bool is_empty() const;
+    void for_each_property(Function<void(Property const&)> const& callback) const;
+
+private:
+    bool m_needs_invalidate_self { false };
+    bool m_needs_invalidate_whole_subtree { false };
+    HashTable<Property> m_properties;
+};
+
+}
+
+namespace AK {
+
+template<>
+struct Traits<Web::CSS::InvalidationSet::Property> : DefaultTraits<String> {
+    static unsigned hash(Web::CSS::InvalidationSet::Property const&);
+    static bool equals(Web::CSS::InvalidationSet::Property const& a, Web::CSS::InvalidationSet::Property const& b) { return a == b; }
+};
+
+template<>
+struct Formatter<Web::CSS::InvalidationSet::Property> : Formatter<StringView> {
+    ErrorOr<void> format(FormatBuilder&, Web::CSS::InvalidationSet::Property const&);
+};
+
+template<>
+struct Formatter<Web::CSS::InvalidationSet> : Formatter<StringView> {
+    ErrorOr<void> format(FormatBuilder&, Web::CSS::InvalidationSet const&);
+};
+
+}

Libraries/LibWeb/CSS/StyleComputer.cpp

@@ -37,6 +37,7 @@
 #include <LibWeb/CSS/CSSStyleRule.h>
 #include <LibWeb/CSS/CSSTransition.h>
 #include <LibWeb/CSS/Interpolation.h>
+#include <LibWeb/CSS/InvalidationSet.h>
 #include <LibWeb/CSS/Parser/Parser.h>
 #include <LibWeb/CSS/SelectorEngine.h>
 #include <LibWeb/CSS/StyleComputer.h>
@@ -427,6 +428,46 @@ Vector<MatchingRule> const& StyleComputer::get_hover_rules() const
     return m_hover_rules;
 }
 
+InvalidationSet StyleComputer::invalidation_set_for_properties(Vector<InvalidationSet::Property> const& properties) const
+{
+    if (!m_style_invalidation_data)
+        return {};
+    auto const& descendant_invalidation_sets = m_style_invalidation_data->descendant_invalidation_sets;
+    InvalidationSet result;
+    for (auto const& property : properties) {
+        if (auto it = descendant_invalidation_sets.find(property); it != descendant_invalidation_sets.end())
+            result.include_all_from(it->value);
+    }
+    return result;
+}
+
+bool StyleComputer::invalidation_property_used_in_has_selector(InvalidationSet::Property const& property) const
+{
+    if (!m_style_invalidation_data)
+        return true;
+    switch (property.type) {
+    case InvalidationSet::Property::Type::Id:
+        if (m_style_invalidation_data->ids_used_in_has_selectors.contains(property.name))
+            return true;
+        break;
+    case InvalidationSet::Property::Type::Class:
+        if (m_style_invalidation_data->class_names_used_in_has_selectors.contains(property.name))
+            return true;
+        break;
+    case InvalidationSet::Property::Type::Attribute:
+        if (m_style_invalidation_data->attribute_names_used_in_has_selectors.contains(property.name))
+            return true;
+        break;
+    case InvalidationSet::Property::Type::TagName:
+        if (m_style_invalidation_data->tag_names_used_in_has_selectors.contains(property.name))
+            return true;
+        break;
+    default:
+        break;
+    }
+    return false;
+}
+
 Vector<MatchingRule> StyleComputer::collect_matching_rules(DOM::Element const& element, CascadeOrigin cascade_origin, Optional<CSS::Selector::PseudoElement::Type> pseudo_element, bool& did_match_any_hover_rules, FlyString const& qualified_layer_name) const
 {
     auto const& root_node = element.root();
@@ -2576,6 +2617,11 @@ NonnullOwnPtr<StyleComputer::RuleCache> StyleComputer::make_rule_cache_for_casca
                     return static_cast<CSSNestedDeclarations const&>(rule).parent_style_rule().absolutized_selectors();
                 VERIFY_NOT_REACHED();
             }();
+
+            for (auto const& selector : absolutized_selectors) {
+                m_style_invalidation_data->build_invalidation_sets_for_selector(selector);
+            }
+
             for (CSS::Selector const& selector : absolutized_selectors) {
                 MatchingRule matching_rule {
                     shadow_root,
@@ -2842,6 +2888,7 @@ void StyleComputer::build_qualified_layer_names_cache()
 void StyleComputer::build_rule_cache()
 {
     m_selector_insights = make<SelectorInsights>();
+    m_style_invalidation_data = make<StyleInvalidationData>();
 
     if (auto user_style_source = document().page().user_style(); user_style_source.has_value()) {
         m_user_style_sheet = GC::make_root(parse_css_stylesheet(CSS::Parser::ParsingContext(document()), user_style_source.value()));
@@ -2869,6 +2916,7 @@ void StyleComputer::invalidate_rule_cache()
     m_user_agent_rule_cache = nullptr;
 
     m_hover_rules.clear_with_capacity();
+    m_style_invalidation_data = nullptr;
 }
 
 void StyleComputer::did_load_font(FlyString const&)

Libraries/LibWeb/CSS/StyleComputer.h

@@ -19,6 +19,7 @@
 #include <LibWeb/CSS/CascadedProperties.h>
 #include <LibWeb/CSS/ComputedProperties.h>
 #include <LibWeb/CSS/Selector.h>
+#include <LibWeb/CSS/StyleInvalidationData.h>
 #include <LibWeb/Forward.h>
 #include <LibWeb/Loader/ResourceLoader.h>
 
@@ -149,6 +150,9 @@ class StyleComputer {
     Vector<MatchingRule> const& get_hover_rules() const;
     Vector<MatchingRule> collect_matching_rules(DOM::Element const&, CascadeOrigin, Optional<CSS::Selector::PseudoElement::Type>, bool& did_match_any_hover_rules, FlyString const& qualified_layer_name = {}) const;
 
+    InvalidationSet invalidation_set_for_properties(Vector<InvalidationSet::Property> const&) const;
+    bool invalidation_property_used_in_has_selector(InvalidationSet::Property const&) const;
+
     void invalidate_rule_cache();
 
     Gfx::Font const& initial_font() const;
@@ -278,6 +282,7 @@ class StyleComputer {
 
     OwnPtr<SelectorInsights> m_selector_insights;
     Vector<MatchingRule> m_hover_rules;
+    OwnPtr<StyleInvalidationData> m_style_invalidation_data;
     OwnPtr<RuleCache> m_author_rule_cache;
     OwnPtr<RuleCache> m_user_rule_cache;
     OwnPtr<RuleCache> m_user_agent_rule_cache;