From 62083bf586a816eea61db4a09a60cc6474585444 Mon Sep 17 00:00:00 2001 From: Andreas Kling Date: Tue, 20 Aug 2024 14:29:13 +0200 Subject: [PATCH] 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. --- Userland/Libraries/LibWeb/DOM/Element.cpp | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/Userland/Libraries/LibWeb/DOM/Element.cpp b/Userland/Libraries/LibWeb/DOM/Element.cpp index 8606f317780..27e98062a56 100644 --- a/Userland/Libraries/LibWeb/DOM/Element.cpp +++ b/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(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;