Przeglądaj źródła

LibWeb: Only recompute `before` and `after` pseudo element styles

Before this change, we would go through every known pseudo element and
compute style for it whenever recomputing the style of an element.

This led to disastrous performance on pages with selectors like
`::selection` or `::placeholder`, as they'd effectively match every
single element and thus we'd compute multiple additional styles for
every element in the DOM.

The fix is simple: only recompute `before` and `after` pseudo element
styles, since those are the only two pseudo elements that generate
*new* nodes -- other pseudo elements refer to (possibly) existing
nodes or concepts within the DOM (or internal shadow DOM).

This makes style updates take ~40ms on our GitHub repo instead of
~220ms. It's still slower than it should be, but a huge improvement.
Andreas Kling 11 miesięcy temu
rodzic
commit
62083bf586
1 zmienionych plików z 5 dodań i 3 usunięć
  1. 5 3
      Userland/Libraries/LibWeb/DOM/Element.cpp

+ 5 - 3
Userland/Libraries/LibWeb/DOM/Element.cpp

@@ -555,10 +555,9 @@ CSS::RequiredInvalidationAfterStyleChange Element::recompute_style()
         set_computed_css_values(move(new_computed_css_values));
 
     // Any document change that can cause this element's style to change, could also affect its pseudo-elements.
-    for (auto i = 0; i < to_underlying(CSS::Selector::PseudoElement::Type::KnownPseudoElementCount); i++) {
+    auto recompute_pseudo_element_style = [&](CSS::Selector::PseudoElement::Type pseudo_element) {
         style_computer.push_ancestor(*this);
 
-        auto pseudo_element = static_cast<CSS::Selector::PseudoElement::Type>(i);
         auto pseudo_element_style = pseudo_element_computed_css_values(pseudo_element);
         auto new_pseudo_element_style = style_computer.compute_pseudo_element_style_if_needed(*this, pseudo_element);
 
@@ -571,7 +570,10 @@ CSS::RequiredInvalidationAfterStyleChange Element::recompute_style()
 
         set_pseudo_element_computed_css_values(pseudo_element, move(new_pseudo_element_style));
         style_computer.pop_ancestor(*this);
-    }
+    };
+
+    recompute_pseudo_element_style(CSS::Selector::PseudoElement::Type::Before);
+    recompute_pseudo_element_style(CSS::Selector::PseudoElement::Type::After);
 
     if (invalidation.is_none())
         return invalidation;