Benchmark: multiple selectors vs multiple matches

multiple selectors vs multiple matches (version: 0)

Is it faster to check if a full selector matches an element or if individual selectors match? One matching selector is FASTER than many by a factor of x3 (which only gets worse as more selectors are searched, > 1000 is like x7) HOWEVER, if you need to determine WHICH selectors match, that requires you to do the individual search, at which point your search is actually a quarter worse than just doing the individual search at the start. nullifying much of the savings. If a match will be RARE, it could make sense to do the full string. however, if a match is common, I'd just stick with the individual matching from the start.

Comparing performance of: One large selector with match vs Many Small selectors vs One large selector without match

Created: 4 years ago by: Guest

Jump to the latest result

HTML Preparation code:

<div id='el' example="99"></div>

Script Preparation code:

var selectorList = [...Array(100).keys()].map(n => `[example="${n}"]`);

var selectorString = selectorList.join(", ");

function matcher(elem) {
    const shrt = (s) => elem.matches(s);
    return shrt
}

Tests:

One large selector with match
matcher(el)(selectorString) && selectorList.map(matcher(el))
Many Small selectors
selectorList.map(matcher(el))
One large selector without match
matcher(el)(selectorString)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
One large selector with match
Many Small selectors
One large selector without match

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:137.0) Gecko/20100101 Firefox/137.0

Browser/OS: Firefox 137 on Mac OS X 10.15

View result in a separate tab

Test name	Executions per second
One large selector with match	90977.7 Ops/sec
Many Small selectors	142486.6 Ops/sec
One large selector without match	254110.7 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what is being tested.

**Benchmark Definition:**

The benchmark compares two approaches to matching CSS selectors:

1. **Single Full Selector Match**: This approach uses a single string that represents a full CSS selector (e.g., "example=\"99\""). The test checks if this full selector matches an element.
2. **Multiple Individual Matches**: This approach uses an array of individual CSS selectors (e.g., ["example=\"98\"", "example=\"99\""]) and checks if each one individually matches an element.

**Options Compared:**

* Single Full Selector Match vs Multiple Individual Matches
* The test compares the performance of these two approaches in terms of execution speed (executions per second).

**Pros and Cons:**

* **Single Full Selector Match**: This approach has a potential advantage when the full selector is rare, as it can be faster. However, this advantage diminishes if the match is common, as the initial overhead can outweigh any savings.
* **Multiple Individual Matches**: This approach has a potential advantage when individual matches are rare, as it avoids the initial overhead of checking the full selector. However, this approach becomes slower than the single full selector match when individual matches are common.

**Library and Purpose:**

The `matches()` method is used to check if an element matches a CSS selector. This method is part of the Web API and provides a way to determine whether an element matches a given selector.

**Special JS Feature or Syntax:**

This benchmark uses JavaScript's `template literals` feature, which allows you to embed expressions inside string literals using backticks (`). The `Array.prototype.map()` method is also used to create an array of individual selectors.

**Other Considerations:**

When evaluating the performance of these approaches, consider the following:

* The rarity of matches can significantly impact performance. If matches are rare, the single full selector match may be faster.
* The size and complexity of the CSS selector(s) being matched can also affect performance.
* Modern browsers like Safari 17 have optimized their CSS matching algorithms to improve performance.

**Alternatives:**

Other approaches that could be compared in a similar benchmark include:

* Using a CSS parser library (e.g., `css-parser`) instead of relying on the Web API's `matches()` method.
* Using a different approach to generating individual selectors, such as using a set of predefined rules or generating them dynamically.
* Comparing the performance of other CSS matching algorithms, such as those used in older browsers.

Related benchmarks: