LibWeb: Cache the value of Element::lang()

This reduces the time spent in
`SelectorEngine::matches_lang_pseudo_class()` from 1.9% to 0.41% on
https://cloudflare.com

Author: tcl3

Libraries/LibWeb/DOM/Element.cpp

@@ -3907,6 +3907,11 @@ void Element::attribute_changed(FlyString const& local_name, Optional<String> co
             m_dir = Dir::Auto;
         else
             m_dir = {};
+    } else if (local_name == HTML::AttributeNames::lang) {
+        for_each_in_inclusive_subtree_of_type<Element>([](auto& element) {
+            element.invalidate_lang_value();
+            return TraversalDecision::Continue;
+        });
     }
 
     // https://html.spec.whatwg.org/multipage/common-dom-interfaces.html#reflecting-content-attributes-in-idl-attributes:concept-element-attributes-change-ext
@@ -4020,7 +4025,7 @@ void Element::set_counters_set(OwnPtr<CSS::CountersSet>&& counters_set)
 // https://html.spec.whatwg.org/multipage/dom.html#the-lang-and-xml:lang-attributes
 Optional<String> Element::lang() const
 {
-    auto attempt_to_determine_lang_attribute = [&]() -> Optional<String> {
+    auto determine_lang_attribute = [&]() -> String {
         // 1. If the node is an element that has a lang attribute in the XML namespace set
         //      Use the value of that attribute.
         auto maybe_xml_lang = get_attribute_ns(Namespace::XML, HTML::AttributeNames::lang);
@@ -4039,23 +4044,23 @@ Optional<String> Element::lang() const
         //      Use the language of that shadow root's host.
         if (auto parent = parent_element()) {
             if (parent->is_shadow_root())
-                return parent->shadow_root()->host()->lang();
+                return parent->shadow_root()->host()->lang().value_or({});
         }
 
         // 4. If the node's parent element is not null
         //      Use the language of that parent element.
         if (auto parent = parent_element())
-            return parent->lang();
+            return parent->lang().value_or({});
 
         // 5. Otherwise
         //      - If there is a pragma-set default language set, then that is the language of the node.
         if (document().pragma_set_default_language().has_value()) {
-            return document().pragma_set_default_language();
+            return document().pragma_set_default_language().value_or({});
         }
 
         //      - If there is no pragma-set default language set, then language information from a higher-level protocol (such as HTTP),
         if (document().http_content_language().has_value()) {
-            return document().http_content_language();
+            return document().http_content_language().value_or({});
         }
 
         //        if any, must be used as the final fallback language instead.
@@ -4065,11 +4070,22 @@ Optional<String> Element::lang() const
         return {};
     };
 
+    if (!m_lang_value.has_value())
+        m_lang_value = determine_lang_attribute();
+
     // If the resulting value is the empty string, then it must be interpreted as meaning that the language of the node is explicitly unknown.
-    auto maybe_lang = attempt_to_determine_lang_attribute();
-    if (!maybe_lang.has_value() || maybe_lang->is_empty())
+    if (m_lang_value->is_empty())
         return {};
-    return maybe_lang.release_value();
+
+    return m_lang_value;
+}
+
+void Element::invalidate_lang_value()
+{
+    if (m_lang_value.has_value()) {
+        m_lang_value.clear();
+        set_needs_style_update(true);
+    }
 }
 
 template<typename Callback>

Libraries/LibWeb/DOM/Element.h

@@ -148,6 +148,7 @@ class WEB_API Element
     String get_attribute_value(FlyString const& local_name, Optional<FlyString> const& namespace_ = {}) const;
 
     Optional<String> lang() const;
+    void invalidate_lang_value();
 
     WebIDL::ExceptionOr<void> set_attribute_for_bindings(FlyString qualified_name, Variant<GC::Root<TrustedTypes::TrustedHTML>, GC::Root<TrustedTypes::TrustedScript>, GC::Root<TrustedTypes::TrustedScriptURL>, Utf16String> const& value);
     WebIDL::ExceptionOr<void> set_attribute_for_bindings(FlyString qualified_name, Variant<GC::Root<TrustedTypes::TrustedHTML>, GC::Root<TrustedTypes::TrustedScript>, GC::Root<TrustedTypes::TrustedScriptURL>, String> const& value);
@@ -626,6 +627,8 @@ class WEB_API Element
     // https://html.spec.whatwg.org/multipage/grouping-content.html#ordinal-value
     Optional<i32> m_ordinal_value;
 
+    mutable Optional<String> m_lang_value;
+
     // https://w3c.github.io/webappsec-csp/#is-element-nonceable
     // AD-HOC: We need to know the element had a duplicate attribute when it was created from the HTML parser.
     //         However, there currently isn't any specified way to do this, so we store a flag on the token, which is

Libraries/LibWeb/HTML/HTMLMetaElement.cpp

@@ -144,6 +144,7 @@ void HTMLMetaElement::inserted()
             // 9. Set the pragma-set default language to candidate.
             auto language = String::from_utf8_without_validation(candidate.bytes());
             document().set_pragma_set_default_language(language);
+            document().document_element()->invalidate_lang_value();
             break;
         }
         case HttpEquivAttributeState::ContentSecurityPolicy: {

Tests/LibWeb/Ref/expected/css/lang-selector-invalidation-ref.html

@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<style>
+    div {
+        color: green;
+    }
+</style>
+<div>This text should be green</div>
+<div>This text should also be green</div>
+<div>This text should also be green</div>

Tests/LibWeb/Ref/input/css/lang-selector-invalidation.html

@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head></head>
+<link rel="match" href="../../expected/css/lang-selector-invalidation-ref.html">
+<style>
+    div:lang(en) {
+        color: red;
+    }
+    div:lang(es) {
+        color: blue;
+    }
+    div:lang(eu) {
+        color: green;
+    }
+    html:lang(eu) {
+        color: green;
+    }
+</style>
+<div class="parent" lang="es">
+    <div class="child">
+        This text should be green
+        <div class="grandchild" lang="en">This text should also be green</div>
+    </div>
+</div>
+This text should also be green
+<script>
+
+window.onload = async () => {
+    function waitForStyleUpdate() {
+        return new Promise((resolve) => {
+            requestAnimationFrame(() => {
+                requestAnimationFrame(() => {
+                    resolve();
+                });
+            });
+        });
+    }
+    const parent = document.querySelector('.parent');
+    const grandchild = document.querySelector('.grandchild');
+
+    await waitForStyleUpdate();
+    parent.setAttribute("lang", "eu");
+    await waitForStyleUpdate();
+    grandchild.removeAttribute("lang");
+
+    const metaElement = document.createElement("meta");
+    metaElement.httpEquiv = "content-language";
+    metaElement.content = "eu";
+    document.head.appendChild(metaElement)
+    await waitForStyleUpdate();
+    document.documentElement.classList.remove("reftest-wait");
+}
+
+</script>
+</html>