Performance issue: getMatchedCSSRules takes ~800ms, causing slowdowns during split operations

[francesc79]

Hi,

I am experiencing a performance issue related to the getMatchedCSSRules method. During split operations, this method takes approximately 800ms to execute, causing noticeable slowdowns. In the image attached you can see a problem.

Have you considered adding a cache to this method or passing with options the value required for avoid search in all css rules?

Looking forward to your feedback

[mrjjwright]

here is what i did in my TS fork:

const ruleCache = new WeakMap<Element, CSSStyleRule[]>()

export function getMatchedCSSRules(el: Element): CSSStyleRule[] {
  // Check cache first
  const cached = ruleCache.get(el)
  if (cached) {
    return cached
  }

  const matchedRules: CSSStyleRule[] = []
  const sheets = Array.from(el.ownerDocument.styleSheets)

  // Process each stylesheet
  for (const sheet of sheets) {
    try {
      const rules = Array.from(sheet.cssRules || []) as CSSStyleRule[]

      // Batch process rules using filter
      const matches = rules.filter((rule) => {
        try {
          return el.matches(rule.selectorText)
        } catch {
          return false
        }
      })

      matchedRules.push(...matches)
    } catch {
      // Ignore security errors from cross-origin stylesheets
      continue
    }
  }

  // Cache the results
  ruleCache.set(el, matchedRules)
  return matchedRules
}