LibWeb: Don't compute full style for ::before/::after unless matched

Before this patch, we would build full computed style for these pseudo
elements, for every DOM element, even if no ::before/::after selector
actually matched.

This was a colossal waste of time, and we can also just not do that.
Instead, just abort pseudo element style resolution early if no relevant
selectors matched. :^)
This commit is contained in:
Andreas Kling 2023-03-14 16:36:20 +01:00
parent a58d84407f
commit 3e970540b4
Notes: sideshowbarker 2024-07-17 07:09:53 +09:00
3 changed files with 36 additions and 5 deletions

View file

@ -867,7 +867,7 @@ static ErrorOr<void> cascade_custom_properties(DOM::Element& element, Vector<Mat
}
// https://www.w3.org/TR/css-cascade/#cascading
ErrorOr<void> StyleComputer::compute_cascaded_values(StyleProperties& style, DOM::Element& element, Optional<CSS::Selector::PseudoElement> pseudo_element) const
ErrorOr<void> StyleComputer::compute_cascaded_values(StyleProperties& style, DOM::Element& element, Optional<CSS::Selector::PseudoElement> pseudo_element, bool& did_match_any_pseudo_element_rules) const
{
// First, we collect all the CSS rules whose selectors match `element`:
MatchingRuleSet matching_rule_set;
@ -876,6 +876,11 @@ ErrorOr<void> StyleComputer::compute_cascaded_values(StyleProperties& style, DOM
matching_rule_set.author_rules = collect_matching_rules(element, CascadeOrigin::Author, pseudo_element);
sort_matching_rules(matching_rule_set.author_rules);
if (pseudo_element.has_value() && matching_rule_set.author_rules.is_empty() && matching_rule_set.user_agent_rules.is_empty()) {
did_match_any_pseudo_element_rules = false;
return {};
}
// Then we resolve all the CSS custom properties ("variables") for this element:
// FIXME: Look into how custom properties should interact with pseudo elements and support that properly.
if (!pseudo_element.has_value())
@ -1400,12 +1405,27 @@ NonnullRefPtr<StyleProperties> StyleComputer::create_document_style() const
}
ErrorOr<NonnullRefPtr<StyleProperties>> StyleComputer::compute_style(DOM::Element& element, Optional<CSS::Selector::PseudoElement> pseudo_element) const
{
auto style = TRY(compute_style_impl(element, move(pseudo_element), ComputeStyleMode::Normal));
return style.release_nonnull();
}
ErrorOr<RefPtr<StyleProperties>> StyleComputer::compute_pseudo_element_style_if_needed(DOM::Element& element, Optional<CSS::Selector::PseudoElement> pseudo_element) const
{
return compute_style_impl(element, move(pseudo_element), ComputeStyleMode::CreatePseudoElementStyleIfNeeded);
}
ErrorOr<RefPtr<StyleProperties>> StyleComputer::compute_style_impl(DOM::Element& element, Optional<CSS::Selector::PseudoElement> pseudo_element, ComputeStyleMode mode) const
{
build_rule_cache_if_needed();
auto style = StyleProperties::create();
// 1. Perform the cascade. This produces the "specified style"
TRY(compute_cascaded_values(style, element, pseudo_element));
bool did_match_any_pseudo_element_rules = false;
TRY(compute_cascaded_values(style, element, pseudo_element, did_match_any_pseudo_element_rules));
if (mode == ComputeStyleMode::CreatePseudoElementStyleIfNeeded && !did_match_any_pseudo_element_rules)
return nullptr;
// 2. Compute the font, since that may be needed for font-relative CSS units
compute_font(style, &element, pseudo_element);

View file

@ -56,7 +56,9 @@ public:
DOM::Document const& document() const { return m_document; }
NonnullRefPtr<StyleProperties> create_document_style() const;
ErrorOr<NonnullRefPtr<StyleProperties>> compute_style(DOM::Element&, Optional<CSS::Selector::PseudoElement> = {}) const;
ErrorOr<RefPtr<StyleProperties>> compute_pseudo_element_style_if_needed(DOM::Element&, Optional<CSS::Selector::PseudoElement>) const;
// https://www.w3.org/TR/css-cascade/#origin
enum class CascadeOrigin {
@ -78,7 +80,13 @@ public:
void load_fonts_from_sheet(CSSStyleSheet const&);
private:
ErrorOr<void> compute_cascaded_values(StyleProperties&, DOM::Element&, Optional<CSS::Selector::PseudoElement>) const;
enum class ComputeStyleMode {
Normal,
CreatePseudoElementStyleIfNeeded,
};
ErrorOr<RefPtr<StyleProperties>> compute_style_impl(DOM::Element&, Optional<CSS::Selector::PseudoElement>, ComputeStyleMode) const;
ErrorOr<void> compute_cascaded_values(StyleProperties&, DOM::Element&, Optional<CSS::Selector::PseudoElement>, bool& did_match_any_pseudo_element_rules) const;
void compute_font(StyleProperties&, DOM::Element const*, Optional<CSS::Selector::PseudoElement>) const;
void compute_defaulted_values(StyleProperties&, DOM::Element const*, Optional<CSS::Selector::PseudoElement>) const;
void absolutize_values(StyleProperties&, DOM::Element const*, Optional<CSS::Selector::PseudoElement>) const;

View file

@ -154,7 +154,10 @@ ErrorOr<void> TreeBuilder::create_pseudo_element_if_needed(DOM::Element& element
auto& document = element.document();
auto& style_computer = document.style_computer();
auto pseudo_element_style = TRY(style_computer.compute_style(element, pseudo_element));
auto pseudo_element_style = TRY(style_computer.compute_pseudo_element_style_if_needed(element, pseudo_element));
if (!pseudo_element_style)
return {};
auto pseudo_element_content = pseudo_element_style->content();
auto pseudo_element_display = pseudo_element_style->display();
// ::before and ::after only exist if they have content. `content: normal` computes to `none` for them.
@ -164,7 +167,7 @@ ErrorOr<void> TreeBuilder::create_pseudo_element_if_needed(DOM::Element& element
|| pseudo_element_content.type == CSS::ContentData::Type::None)
return {};
auto pseudo_element_node = DOM::Element::create_layout_node_for_display_type(document, pseudo_element_display, pseudo_element_style, nullptr);
auto pseudo_element_node = DOM::Element::create_layout_node_for_display_type(document, pseudo_element_display, *pseudo_element_style, nullptr);
if (!pseudo_element_node)
return {};