mirrors/ladybird
0
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2025-07-29 04:09:13 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 9

LibWeb: Only recompute before and after pseudo element styles

Browse source 
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.
This commit is contained in:
Andreas Kling 2024-08-20 14:29:13 +02:00 • committed by Andreas Kling
commit 62083bf586
Notes: github-actions[bot] 2024-08-20 14:11:38 +00:00
1 changed files with 5 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

8
Userland/Libraries/LibWeb/DOM/Element.cpp
View file

@ -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;